@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/file-upload/picture-card.spec.ts

@@ -5,8 +5,9 @@ test('照片墙', async ({ page }) => {
   await page.goto('file-upload#picture-card')
 
   const upload = page.locator('.tiny-upload')
-  const lists = page.locator('.tiny-upload-list__item')
-  const first = lists.nth(0)
+  const li = page.locator('.tiny-upload-list__li')
+  const items = li.locator('.tiny-upload-list__item')
+  const first = items.nth(0)
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const delButton = page
     .getByRole('listitem')
@@ -24,14 +25,14 @@ test('照片墙', async ({ page }) => {
 
   await expect(width).toEqual(148)
   await expect(height).toEqual(148)
-  await expect(lists).toHaveCount(1)
+  await expect(li).toHaveCount(1)
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(2)
+  await expect(li).toHaveCount(2)
   await first.hover()
   await prevPic.click()
   await expect(prevImg).toHaveAttribute('src', '/static/images/fruit.jpg')
   await dialogClose.click()
   await first.hover()
   await delButton.click()
-  await expect(lists).toHaveCount(1)
+  await expect(items).toHaveCount(1)
 })

package/demos/pc/app/file-upload/picture-list.spec.ts

@@ -7,7 +7,6 @@ test('图片列表缩略图', async ({ page }) => {
   const upload = page.locator('.tiny-upload')
   const lists = page.locator('.tiny-upload-list__item')
   const item1 = page.getByText('test1按 delete 键可删除')
-  const item2 = page.getByText('test2按 delete 键可删除')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const { width, height } = await item1.boundingBox()
   const images = page.locator('.tiny-upload-list__item-thumbnail')
@@ -16,8 +15,8 @@ test('图片列表缩略图', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toEqual(771)
-  await expect(height).toEqual(56)
+  await expect(width).toBeGreaterThanOrEqual(708)
+  await expect(height).toBeGreaterThanOrEqual(56)
   await expect(lists).toHaveCount(2)
   await fileChooser.setFiles(currentPath)
   await expect(images.nth(0)).toHaveCSS('width', '56px')

package/demos/pc/app/file-upload/prevent-delete-file.spec.ts

@@ -13,7 +13,7 @@ test('阻止删除文件', async ({ page }) => {
   await expect(lists).toHaveText(/test1/)
   await lists.hover()
   await close.click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await modal.nth(1).waitFor({ state: 'attached', timeout: 100 })
   await modalCancel.click()
   await expect(lists).toHaveCount(1)
   await expect(lists).toHaveText(/test1/)

package/demos/pc/app/file-upload/prevent-upload-file.spec.ts

@@ -5,7 +5,7 @@ test('阻止上传文件', async ({ page }) => {
   await page.goto('file-upload#prevent-upload-file')
 
   const upload = page.getByRole('button', { name: '选取文件' })
-  const modal = page.locator('.tiny-modal')
+  const modal = page.locator('.tiny-modal').nth(1)
   const modalCancel = page.getByRole('button', { name: '取消' })
   const lists = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

package/demos/pc/app/file-upload/upload-events.spec.ts

@@ -18,12 +18,14 @@ test('事件', async ({ page }) => {
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await fileChooser.setFiles(currentPath)
-  await expect(modals).toHaveCount(3)
-  await expect(modals).toHaveText(['触发上传文件改变回调事件', '文件上传失败回调', '触发上传文件改变回调事件'])
+  await page.getByText('文件上传失败回调').isVisible()
+  await expect(page.getByText('触发上传文件改变回调事件')).toHaveCount(2)
+  await page.waitForTimeout(100)
+
   await lists.nth(0).hover()
   await delButton.click()
-  await expect(modals.nth(3)).toHaveText('触发删除文件回调事件')
+  await page.getByText('触发删除文件回调事件').isVisible()
 
   await fileChooser.setFiles([currentPath, currentPath, currentPath, currentPath])
-  await expect(modals.nth(3)).toHaveText('触发文件超出个数限制回调事件')
+  await page.getByText('触发文件超出个数限制回调事件').isVisible()
 })

package/demos/pc/app/file-upload/upload-file-list-slot.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('定义文件列表', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('file-upload#upload-file-list-slot')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(lists).toHaveCount(2)
+  await expect(lists).toHaveText([/test1/, /test2/])
+  await fileChooser.setFiles(currentPath)
+  await page.getByText('测试.jpg').isVisible()
+})

package/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue

@@ -23,9 +23,10 @@ const options = ref({
   showDel: true,
   showTooltip: false,
   popperClass: 'my-thumb-name',
-  downloadFile: (file) => {
-    console.log('file', file)
-  },
+  // 取消以下注释自定义下载
+  // downloadFile: (file) => {
+  //   console.log('file', file)
+  // },
   icon: iconEditorListNum()
 })
 const fileList = ref([

package/demos/pc/app/file-upload/upload-file-list-thumb.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('上传的文件列表弹出显示', async ({ page }) => {
+test('列表弹窗显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#upload-file-list-thumb')
 
@@ -12,7 +12,7 @@ test('上传的文件列表弹出显示', async ({ page }) => {
   await expect(thumb).toHaveText('2')
   await thumb.hover()
   await popList.isVisible()
-  await delItem1.locator('svg').dblclick()
+  await delItem1.locator('svg').click()
   await expect(thumb).toHaveText('1')
   const page3Promise = page.waitForEvent('popup')
   await downloadItem2.locator('svg').click()

package/demos/pc/app/file-upload/upload-file-list-thumb.vue

@@ -29,9 +29,10 @@ export default {
         showDel: true,
         showTooltip: false,
         popperClass: 'my-thumb-name',
-        downloadFile: (file) => {
-          console.log('file', file)
-        },
+        // 取消以下注释自定义下载
+        // downloadFile: (file) => {
+        //   console.log('file', file)
+        // },
         icon: iconEditorListNum()
       },
       fileList: [

package/demos/pc/app/file-upload/upload-file-list.spec.ts

@@ -1,22 +1,22 @@
 import { test, expect } from '@playwright/test'
 
-test('上传的文件列表', async ({ page }) => {
+test('文件列表', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#upload-file-list')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const items = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-  const { width, height } = await lists.nth(0).boundingBox()
+  const { width, height } = await items.nth(0).boundingBox()
 
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toEqual(771)
-  await expect(height).toBeCloseTo(25, 0)
-  await expect(lists).toHaveCount(2)
-  await expect(lists).toHaveText([/test1/, /test2/])
+  await expect(width).toBeGreaterThanOrEqual(708)
+  await expect(height).toBeGreaterThanOrEqual(25, 0)
+  await expect(items).toHaveCount(2)
+  await expect(items).toHaveText([/test1/, /test2/])
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(3)
-  await expect(lists).toHaveText([/test1/, /test2/, /测试.jpg/])
+  await page.getByText('测试.jpg').isVisible()
+  await expect(items).toHaveText([/test1/, /test2/])
 })

package/demos/pc/app/file-upload/upload-limit.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('最大上传限制', async ({ page }) => {
+test('上传前限制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#upload-limit')
 
@@ -13,11 +13,8 @@ test('最大上传限制', async ({ page }) => {
   const path2 = path.resolve(__dirname, '测试.svg')
   const path3 = path.resolve(__dirname, '测试.png')
 
-  await fileChooser.setFiles(path1)
-  await expect(lists).toHaveCount(1)
-  await fileChooser.setFiles(path2)
-  await expect(lists).toHaveCount(1)
-  await fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/测试.jpg/)
+  fileChooser.setFiles(path1)
+  fileChooser.setFiles(path2)
+  fileChooser.setFiles(path3)
+  await expect(lists).toHaveCount(0)
 })

package/demos/pc/app/file-upload/upload-request.spec.ts

@@ -16,7 +16,7 @@ test.describe('设置上传请求', () => {
 
   test('支持发送 cookie 凭证信息', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('file-upload#upload-request1')
+    await page.goto('file-upload#upload-request')
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

package/demos/pc/app/file-upload/upload-user-head.spec.ts

@@ -5,7 +5,7 @@ test('用户头像上传', async ({ page }) => {
   await page.goto('file-upload#upload-user-head')
 
   const upload = page.locator('.tiny-upload')
-  const addIcon = page.locator('#preview svg').nth(1)
+  const addIcon = page.locator('#upload-user-head svg')
 
   await expect(upload).toHaveCSS('width', '87px')
   await expect(upload).toHaveCSS('height', '87px')

package/demos/pc/app/file-upload/webdoc/file-upload.js

@@ -212,12 +212,12 @@ export default {
       'demoId': 'upload-events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
+        'zh-CN': `<div class="tip custom-block"><code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
           <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/> <code>change</code> 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
-          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
+          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</div>`,
+        'en-US': `<div class="tip custom-block"><code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
         <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> <code>change</code> Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
-        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</p></div>`
+        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</div>`
       },
       'codeFiles': ['upload-events.vue']
     },

package/demos/pc/app/file-upload//346/265/213/350/257/225.txt

@@ -0,0 +1 @@
+测试txt文件

package/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -23,13 +17,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const createData = reactive({

package/demos/pc/app/form/custom-validation-rule.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -22,7 +16,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
 
 export default {
   components: {

package/demos/pc/app/form/form-validate-field.vue

@@ -8,7 +8,7 @@
       label-width="100px"
       show-message
     >
-      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+      <tiny-form-item label="姓名" prop="users" required>
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="日期" prop="datepicker">
@@ -62,7 +62,7 @@ export default {
         }
       })
       if (errArray.length > 0) {
-        console.log(errArray)
+        // empty
       } else {
         Modal.alert('日期和url通过校验')
       }

package/demos/pc/app/form/size.spec.ts

@@ -7,20 +7,40 @@ test('测试表单尺寸', async ({ page }) => {
   const demo = page.locator('#size')
   const form = demo.locator('.tiny-form')
   const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
+  const submitBtn = form.getByRole('button', { name: '提交' })
+  const input = form.locator('.tiny-numeric__input')
+  const firstLabel = form.locator('.tiny-form-item__label').first()
 
   // mini表单
+  const miniHeight = '24px'
   await getBtnByText('mini').click()
   await expect(form.locator('.tiny-form-item--mini')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--mini/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveClass(/tiny-button--mini/)
+  await expect(input).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveCSS('height', miniHeight)
+  await expect(input).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('line-height', miniHeight)
+
   // small表单
+  const smallHeight = '32px'
   await getBtnByText('small').click()
   await expect(form.locator('.tiny-form-item--small')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--small/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveClass(/tiny-button--small/)
+  await expect(input).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveCSS('height', smallHeight)
+  await expect(input).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('line-height', smallHeight)
+
   // medium表单
+  const mediumHeight = '40px'
   await getBtnByText('medium').click()
   await expect(form.locator('.tiny-form-item--medium')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--medium/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveClass(/tiny-button--medium/)
+  await expect(input).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveCSS('height', mediumHeight)
+  await expect(input).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('line-height', mediumHeight)
 })

package/demos/pc/app/grid/custom-style/body-style-composition-api.vue

@@ -102,7 +102,7 @@ const cellClassName = ({ rowIndex, columnIndex }) => {
   color: palevioletred;
 }
 .grid-cell-style .tiny-grid-body__column.col-orange {
-  background-color: #f60;
+  background-color: pink;
   color: #fff;
 }
 </style>

package/demos/pc/app/grid/custom-style/footer-style-composition-api.vue

@@ -1,19 +1,38 @@
 <template>
-  <tiny-grid
-    class="grid-footer-cell-style"
-    :data="tableData"
-    show-footer
-    :footer-method="footerMethod"
-    border
-    :footer-cell-class-name="footerCellClassName"
-  >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <h4 class="title">自定义表尾行样式：</h4>
+    <tiny-grid
+      class="grid-footer-row-style"
+      :data="tableData"
+      show-footer
+      :footer-method="footerMethod"
+      border
+      :footer-row-class-name="footerRowClassName"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+    <h4 class="title">自定义表尾单元格样式：</h4>
+    <tiny-grid
+      class="grid-footer-cell-style"
+      :data="tableData"
+      show-footer
+      :footer-method="footerMethod"
+      border
+      :footer-cell-class-name="footerCellClassName"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -79,7 +98,7 @@ const tableData = ref([
   }
 ])
 
-function footerMethod({ columns, data }) {
+const footerMethod = ({ columns, data }) => {
   return [
     columns.map((column, columnIndex) => {
       if (columnIndex === 0) {
@@ -105,12 +124,20 @@ function footerMethod({ columns, data }) {
     })
   ]
 }
-
-function footerCellClassName({ $rowIndex }) {
-  if ($rowIndex === 0) {
+const footerCellClassName = ({ column, $rowIndex }) => {
+  if ($rowIndex === 0 && column.property === 'employees') {
     return 'footer__cell--blue'
   }
 }
+const footerRowClassName = ({ $rowIndex }) => {
+  if ($rowIndex === 0) {
+    return 'footer__row--red'
+  }
+
+  if ($rowIndex === 1) {
+    return 'footer__row--green'
+  }
+}
 </script>
 
 <style>
@@ -118,4 +145,22 @@ function footerCellClassName({ $rowIndex }) {
   background-color: #2db7f5;
   color: #fff;
 }
+
+.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
+  background-color: palevioletred;
+  color: #fff;
+}
+.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
+  background-color: green;
+  color: #fff;
+}
+</style>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  padding: 15px;
+  font-weight: bolder;
+  color: #444;
+}
 </style>

package/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue

@@ -2,8 +2,8 @@
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="触发源" width="100">
-      <template #default>
-        <div class="only-me-can-drag">拖拽触发源</div>
+      <template #default="{ row }">
+        <div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@@ -18,7 +18,7 @@ import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
-const dropConfig = ref({
+const dropConfig = {
   plugin: Sortable,
   row: true,
   trigger: '.only-me-can-drag', // 触发源控制
@@ -27,7 +27,7 @@ const dropConfig = ref({
     if (row.id === '8') return false // return false 时取消拖动
   },
   column: false // 取消列拖拽
-})
+}
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue

@@ -23,7 +23,7 @@
       ></tiny-grid-column>
       <tiny-grid-column title="操作" width="200" align="center">
         <template #default="data">
-          <template v-if="$refs.theGrid && $refs.theGrid.hasActiveRow(data.row)">
+          <template v-if="$refs.theGridRef && $refs.theGridRef.hasActiveRow(data.row)">
             <tiny-button size="mini" @click="saveRowEvent(data.row)"> 保存 </tiny-button>
             <tiny-button size="mini" @click="cancelRowEvent(data.row)"> 取消 </tiny-button>
           </template>
@@ -90,7 +90,7 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const theGridRef = ref()
+const theGridRef = ref('theGridRef')
 
 function editRowEvent(row) {
   theGridRef.value.setActiveRow(row).then(() => {

package/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue

@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, Button } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent">
+    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent" @cell-mouseleave="cellMouseleaveEvent">
       <tiny-grid-column type="index" title="序号" width="100"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>

package/demos/pc/app/grid/event/context-menu-event-composition-api.vue

@@ -2,6 +2,7 @@
   <div>
     <tiny-grid
       :data="tableData"
+      @header-cell-context-menu="headerMenuClick"
       @footer-cell-context-menu="footerMenuClick"
       :context-menu="{
         header: { options: headerMenus },

package/demos/pc/app/grid/event/edit-event-composition-api.vue

@@ -5,7 +5,7 @@
     @edit-closed="editClosed"
     @edit-disabled="editDisabled"
     seq-serial
-    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, activeMethod }"
   >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>

package/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue

@@ -6,7 +6,12 @@
       <tiny-button @click="toggleRowExpansion">手动切换展开行</tiny-button>
     </div>
     <br />
-    <tiny-grid :data="tableData" ref="grid" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <tiny-grid
+      :data="tableData"
+      ref="gridRef"
+      border
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column type="expand" title="操作" width="60">
@@ -82,11 +87,11 @@ const tableData = ref([
     boole: true
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 const setRowExpansion = () => {
   gridRef.value.clearRowExpand()
-  gridRef.value.setRowExpansion([this.tableData[1], this.tableData[0]], true)
+  gridRef.value.setRowExpansion([tableData.value[1], tableData.value[0]], true)
 }
 
 const setAllRowExpansion = () => {
@@ -94,7 +99,7 @@ const setAllRowExpansion = () => {
 }
 
 const toggleRowExpansion = () => {
-  gridRef.value.toggleRowExpansion(this.tableData[1])
+  gridRef.value.toggleRowExpansion(tableData.value[1])
 }
 
 const checkboxEdit = (h, { row, column }) => {