tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard

🐛 [Bug]: DialogBox中内嵌TinyGrid,行内编辑状态下,点击弹窗空白处,编辑效果还在

Open sunny-Fung opened this issue 8 months ago • 4 comments

Version

3.19

Vue Version

3.5.13

Link to minimal reproduction

<template>
  <div>
    <tiny-button @click="boxVisibility = true" :close-on-click-modal="false" title="弹出 Dialog">弹出 Dialog</tiny-button>
    <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="80%">
      <tiny-grid
      :data="tableData"
      show-overflow="tooltip"
      height="400px"
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
    >
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column
        field="name"
        title="名称"
        :editor="{ component: 'input', events: { input } }"
      ></tiny-grid-column>
      <tiny-grid-column
        field="employees"
        title="人数"
        :editor="{
          component: 'input',
          events: { change },
          attrs: { type: 'number' }
        }"
      ></tiny-grid-column>
      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
      <tiny-grid-column
        field="createdDate"
        title="创建时间"
        :editor="{ component: 'input', attrs: { type: 'date' } }"
      ></tiny-grid-column>
      <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
    </tiny-grid>
      <template #footer>
        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
        <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>
      </template>
    </tiny-dialog-box>
    
  </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { TinyGrid, TinyGridColumn, TinyModal,TinyButton, TinyDialogBox} from '@opentiny/vue'
  
  const boxVisibility = ref(false)

const options = ref([
  { label: '华中区', value: '华中区' },
  { label: '华东区', value: '华东区' },
  { label: '华南区', value: '华南区' },
  { label: '西南区', value: '西南区' }
])
const tableData = ref([
  // {
  //   id: '1',
  //   name: 'GFD 科技 YX 公司',
  //   userId: 421000103624183,
  //   area: '华东区',
  //   province: '福建省',
  //   city: '福州',
  //   contact: '许生',
  //   telephone: '1234567890',
  //   address: '福州',
  //   ipaddress: '192.168.111.111',
  //   introduction: '公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。',
  //   employees: 800,
  //   createdDate: '2014-04-30 00:56:00',
  //   boole: false,
  //   assets: '1000000',
  //   rate: 0.9
  // },
  // {
  //   id: '2',
  //   name: 'WWW 科技 YX 公司',
  //   userId: 421000103624183,
  //   area: '华南区',
  //   province: '广东省',
  //   city: '深圳',
  //   contact: '朱生',
  //   telephone: '1234567890',
  //   address: '深圳福田区',
  //   ipaddress: '192.168.111.1',
  //   introduction: '公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。',
  //   employees: 300,
  //   createdDate: '2016-07-08 12:36:22',
  //   boole: true,
  //   assets: '1500000',
  //   rate: 0.7
  // },
  // {
  //   id: '3',
  //   name: 'RFV 有限责任公司',
  //   userId: 441047913162396,
  //   area: '华南区',
  //   province: '广东省',
  //   city: '中山',
  //   contact: '秦生',
  //   telephone: '1234567890',
  //   address: '中山市',
  //   ipaddress: '192.168.111.120',
  //   introduction: '公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。',
  //   employees: 1300,
  //   createdDate: '2014-02-14 14:14:14',
  //   boole: false,
  //   assets: '1500000',
  //   rate: 0.6
  // },
  {
    id: '4',
    name: 'TGB 科技 YX 公司',
    userId: 702973890055088,
    area: '华东区',
    province: '福建省',
    city: '龙岩',
    contact: '周生',
    telephone: '1234567890',
    address: '龙岩',
    ipaddress: '192.168.11.111',
    introduction: '公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。',
    employees: 360,
    createdDate: '2013-01-13 13:13:13',
    boole: true,
    assets: '1200000',
    rate: 0.5
  },
  {
    id: '5',
    name: 'YHN 科技 YX 公司',
    userId: 702973890055088,
    area: '华南区',
    province: '广东省',
    city: '韶关',
    contact: '郑生',
    telephone: '1234567890',
    address: '韶关',
    ipaddress: '192.168.101.111',
    introduction: '公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。',
    employees: 810,
    createdDate: '2012-12-12 12:12:12',
    boole: true,
    assets: '1500000',
    rate: 0.6
  }
])

function change() {
  TinyModal.message({ message: 'change:', status: 'info' })
}

function input() {
  TinyModal.message({ message: 'input:', status: 'info' })
}
</script>

Step to reproduce

演练场中粘贴上面的代码可以复现

What is expected

期望点击弹窗空白处,编辑效果取消

What is actually happening

目前:点击弹窗空白处,编辑效果还在

What is your project name

demo

Any additional comments (optional)

No response

sunny-Fung avatar Apr 11 '25 03:04 sunny-Fung