@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/chart/webdoc/chart-liquidfill.js

@@ -41,5 +41,5 @@ export default {
       'codeFiles': ['liquidfill/demo5.vue']
     }
   ],
-  apis: [{ 'name': 'chart-liquidfill', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-liquidfill', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-map.js

@@ -9,5 +9,5 @@ export default {
       'codeFiles': ['map/base.vue']
     }
   ],
-  apis: [{ 'name': 'chart-map', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-map', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-pie.js

@@ -50,5 +50,5 @@ export default {
       'codeFiles': ['pie/demo7.vue']
     }
   ],
-  apis: [{ 'name': 'chart-pie', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-pie', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-question.js

@@ -42,5 +42,5 @@ export default {
       'codeFiles': ['question/demo2.vue']
     }
   ],
-  apis: [{ 'name': 'chart-question', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-question', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-radar.js

@@ -26,5 +26,5 @@ export default {
       'codeFiles': ['radar/demo3.vue']
     }
   ],
-  apis: [{ 'name': 'chart-radar', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-radar', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-ring.js

@@ -50,5 +50,5 @@ export default {
       'codeFiles': ['ring/ring-title.vue']
     }
   ],
-  apis: [{ 'name': 'chart-ring', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-ring', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-sankey.js

@@ -20,5 +20,5 @@ export default {
       'codeFiles': ['sankey/demo2.vue']
     }
   ],
-  apis: [{ 'name': 'chart-sankey', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-sankey', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-scatter.js

@@ -62,5 +62,5 @@ export default {
       'codeFiles': ['scatter/demo8.vue']
     }
   ],
-  apis: [{ 'name': 'chart-scatter', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-scatter', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-sunburst.js

@@ -20,5 +20,5 @@ export default {
       'codeFiles': ['sunburst/demo2.vue']
     }
   ],
-  apis: [{ 'name': 'chart-sunburst', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-sunburst', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-tree.js

@@ -38,5 +38,5 @@ export default {
       'codeFiles': ['tree/demo5.vue']
     }
   ],
-  apis: [{ 'name': 'chart-tree', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-tree', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-waterfall.js

@@ -38,5 +38,5 @@ export default {
       'codeFiles': ['waterfall/demo5.vue']
     }
   ],
-  apis: [{ 'name': 'chart-waterfall', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-waterfall', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-wordcloud.js

@@ -32,5 +32,5 @@ export default {
       'codeFiles': ['wordcloud/demo4.vue']
     }
   ],
-  apis: [{ 'name': 'chart-wordcloud', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-wordcloud', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart.js

@@ -18,7 +18,7 @@ export default {
     {
       'name': 'chart',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data ',
           'type': 'object ',

package/demos/pc/app/color/webdoc/color.js

@@ -21,5 +21,5 @@ export default {
       'codeFiles': ['neutral-color.vue']
     }
   ],
-  apis: [{ 'name': 'color', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'color', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/color-picker/alpha.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#enable-alpha')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByText('演示AlphaAlpha选择。取消选择').click()
+  await page.getByText('用户选择了取消').click()
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByText('#804040FF').click()
+})

package/demos/pc/app/color-picker/base.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#basic-usage')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#basic-usage').getByRole('img').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-picker/default-visible.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('默认显示色盘', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#default-visible')
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-picker/dynamic-color-change.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('动态切换颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#dynamic-color-change')
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+})

package/demos/pc/app/color-picker/event.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#event')
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '取消' }).click()
+})

package/demos/pc/app/color-picker/history.spec.ts

@@ -8,8 +8,8 @@ test('测试历史记录', async ({ page }) => {
   const arrow = page.locator('.tiny-collapse-item__arrow')
   await arrow.click()
   await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为更改历史记录测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
@@ -17,7 +17,7 @@ test('测试历史记录', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
   ).toBeVisible()
-  //点击色块中心，并点击选择，历史记录增加1的测试
+  // 点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
   const x = center?.x ?? 0 + (center?.width ?? 0) / 2

package/demos/pc/app/color-picker/predefine.spec.ts

@@ -10,8 +10,8 @@ test('测试预定义颜色', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
   ).toBeVisible()
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为预定义颜色测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')

package/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -88,16 +88,6 @@ export default {
       'name': 'color-picker',
       'type': 'component',
       'props': [
-        {
-          'name': 'modelValue',
-          'type': 'string',
-          'defaultValue': `'transparent'`,
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
         {
           name: 'visible',
           type: 'boolean',

package/demos/pc/app/color-select-panel/alpha.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#alpha')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-select-panel/base.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#basic-usage')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-select-panel/event.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#event')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+})

package/demos/pc/app/color-select-panel/history.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('历史记录', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#history')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+  await page.getByRole('button', { name: 'Pop history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+})

package/demos/pc/app/color-select-panel/predefine.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('预定义颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#predefine')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
+  await page.getByRole('button', { name: 'Pop predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+})

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -60,16 +60,6 @@ export default {
       'name': 'color select panel',
       'type': 'component',
       'props': [
-        {
-          name: 'modelValue',
-          type: 'String',
-          defaultValue: 'transparent',
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
         {
           name: 'visible',
           type: 'boolean',

package/demos/pc/app/company/webdoc/company.js

@@ -34,7 +34,7 @@ export default {
     {
       'name': 'company',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'string , number',

package/demos/pc/app/config-provider/webdoc/config-provider.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvide 组件
+title: ConfigProvider 组件
 ---
 
-# ConfigProvide 组件
+# ConfigProvider 组件
 
 <div></div>

package/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -48,19 +48,12 @@ export default {
           },
           'demoId': 'base'
         },
-        {
-          'name': 'breakPoints',
-          'type': 'breakPoint',
-          'defaultValue': "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}",
-          'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': 'Breakpoints, providing layout with' },
-          'demoId': 'base'
-        },
         {
           'name': 'direction',
           'type': "'ltr' | 'rtl'",
           'defaultValue': 'ltr',
           'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
-          'demoId': 'text-dire'
+          'demoId': 'text-direct'
         },
         {
           'name': 'tag',
@@ -71,7 +64,7 @@ export default {
             'en-US':
               'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
           },
-          'demoId': 'base'
+          'demoId': 'tag'
         }
       ],
       'events': [],

package/demos/pc/app/container/webdoc/container.js

@@ -50,7 +50,7 @@ export default {
             'zh-CN': '版型类型',
             'en-US': 'Measurement type'
           },
-          'demoId': 'custom-container'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'aside-width',

package/demos/pc/app/count-api.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const basePath = '.';
+
+const readFile = function (path) {
+  let componentCount = 0;
+  let apiCount = 0;
+  const readDir = fs.readdirSync(path);
+
+  readDir.forEach(i => {
+    const curDir = `${path}/${i}`;
+    const stat = fs.statSync(curDir);
+
+    if (stat.isFile() && i.endsWith('.json')) {
+      componentCount += 1;
+      const data = fs.readFileSync(curDir, 'utf-8');
+      let dataJson = null;
+
+      try {
+        dataJson = JSON.parse(data);
+      } catch (err) {
+        console.log('err:', err);
+      }
+
+      if (dataJson !== null) {
+        apiCount += (dataJson.attrs?.length || 0) + (dataJson.slots?.length || 0) + (dataJson.events?.length || 0) + (dataJson.methods?.length || 0);
+      }
+    }
+  });
+
+  console.log('componentCount:', componentCount);
+  console.log('apiCount:', apiCount);
+}
+
+readFile(basePath);

package/demos/pc/app/country/webdoc/country.js

@@ -33,7 +33,7 @@ export default {
     {
       'name': 'country',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'string , number',

package/demos/pc/app/credit-card-form/webdoc/credit-card-form.js

@@ -32,7 +32,7 @@ export default {
     {
       'name': 'credit-card-form',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'background-image',
           'type': 'string , object',

package/demos/pc/app/crop/aspect-ratio-composition-api.vue

@@ -10,6 +10,7 @@
       :preview="true"
       :quality="0.5"
       max-size="300KB"
+      @setAspectRatio="setAspectRatio"
     ></tiny-crop>
   </div>
 </template>
@@ -20,4 +21,11 @@ import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+
+function setAspectRatio(aspectRatio) {
+  Modal.message({
+    message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
+    status: 'info'
+  })
+}
 </script>

package/demos/pc/app/crop/aspect-ratio.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪框宽高比', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#aspect-ratio')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('.iconButton > .tiny-svg').first().click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})

package/demos/pc/app/crop/aspect-ratio.vue

@@ -10,6 +10,7 @@
       :preview="true"
       :quality="0.5"
       max-size="300KB"
+      @setAspectRatio="setAspectRatio"
     ></tiny-crop>
   </div>
 </template>
@@ -27,6 +28,14 @@ export default {
       visible: false,
       imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
     }
+  },
+  methods: {
+    setAspectRatio(aspectRatio) {
+      Modal.message({
+        message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
+        status: 'info'
+      })
+    }
   }
 }
 </script>

package/demos/pc/app/crop/auto-crop-area.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自动裁剪面积', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#auto-crop-area')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.icon').first().click()
+  await page.locator('.icon').first().click()
+  await page.locator('.iconButton > .tiny-svg').first().click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(7) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+})

package/demos/pc/app/crop/basic-usage.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#basic-usage')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(3) > .icon').click()
+  await page.locator('div:nth-child(4) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
+  await page.locator('div:nth-child(6) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+})

package/demos/pc/app/crop/crop-meth.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('裁剪框方法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#crop-meth')
+  await page.getByRole('link', { name: '裁剪框方法 事件' }).click()
+  await page.getByRole('button', { name: '启用裁剪框' }).click()
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('div:nth-child(5) > .tiny-svg').click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(2)').click()
+  await page.locator('.icon').first().click()
+  await page.locator('div:nth-child(8) > .tiny-svg').click()
+  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
+})

package/demos/pc/app/crop/drag-mode-composition-api.vue

@@ -5,7 +5,7 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :movable="false"
+      :movable="true"
       drag-mode="move"
     ></tiny-crop>
   </div>

package/demos/pc/app/crop/drag-mode.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('拖拽模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('crop#drag-mode')
+  await page.getByRole('button', { name: '图片裁剪' }).click()
+  await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
+  const crops = page.locator('#drag-mode').getByRole('img').nth(1).boundingBox()
+  const { x, y } = await crops
+  // 开始拖拽
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x + 50, y - 100)
+  await page.mouse.move(x - 50, y + 150)
+  await page.mouse.up()
+})

package/demos/pc/app/crop/drag-mode.vue

@@ -5,7 +5,7 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :movable="false"
+      :movable="true"
       drag-mode="move"
     ></tiny-crop>
   </div>

package/demos/pc/app/crop/event-about-crop-composition-api.vue

@@ -11,6 +11,8 @@
       @cropmove="cropmove"
       @cropend="cropend"
       @crop="crop"
+      @cropdata="cropdata"
+      enable
     ></tiny-crop>
   </div>
 </template>
@@ -30,6 +32,13 @@ function getCanvasData() {
   })
 }
 
+function cropdata(data) {
+  Modal.message({
+    message: `Canvas 数据：${JSON.stringify(data)}`,
+    status: 'info'
+  })
+}
+
 function cropstart(e) {
   Modal.message({
     message: 'cropstart 事件，回调参数：' + e,