@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/config-provider/tag.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('config-provider#tag')
+  await page.getByText('这是一个Tag被DOM包裹').click()
+  await page.locator('#tag span').nth(2).click()
+  await page.waitForTimeout(300)
+  await page.locator('#tag span').nth(2).click()
+  await page.waitForTimeout(300)
+  await expect(page.locator('.tiny-switch').nth(2)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+})

package/demos/pc/app/config-provider/text-direct.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('测试改变文字方向', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('config-provider#text-direct')
+  await page.getByRole('link', { name: '改变文字方向' }).click()
+  await page.getByRole('button', { name: 'RTL' }).click()
+  await page.waitForTimeout(300)
+  await page.getByRole('button', { name: 'LTR' }).click()
+  await page.waitForTimeout(300)
+})

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

@@ -0,0 +1,7 @@
+---
+title: ConfigProvide Assembly
+---
+
+# ConfigProvide Assembly
+
+<div></div>

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

@@ -4,24 +4,32 @@ export default {
   demos: [
     {
       'demoId': 'base',
-      'name': { 'zh-CN': '基本使用', 'en-US': '' },
-      'desc': { 'zh-CN': '可以通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑', 'en-US': '' },
+      'name': { 'zh-CN': '基本使用', 'en-US': 'Basic Use' },
+      'desc': {
+        'zh-CN': '通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑。',
+        'en-US':
+          'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'text-direct',
-      'name': { 'zh-CN': '改变文字方向', 'en-US': '' },
+      'name': { 'zh-CN': '改变文字方向', 'en-US': 'Change the direction of text' },
       'desc': {
         'zh-CN':
-          '有时, 我们需要改变文字的排列方向, 例如我们在排列阿拉伯语是就需要RTL而非LTR.config-provider也考虑到了这点,只需要覆写design.direction即可',
-        'en-US': ''
+          '通过<code>:direction="ltr"</code>设置文字对齐方向，<code>ltr</code>为左对齐，<code>rtl</code>为右对齐。',
+        'en-US':
+          'Set the text alignment direction through<code>: direction="ltr"</code>, where<code>ltr</code>is left aligned and<code>rtl</code>is right aligned.'
       },
       'codeFiles': ['text-direct.vue']
     },
     {
       'demoId': 'tag',
-      'name': { 'zh-CN': '自定义标签', 'en-US': '' },
-      'desc': { 'zh-CN': '可以通过<code>tag</code>可以自定义容器标签', 'en-US': '' },
+      'name': { 'zh-CN': '自定义标签', 'en-US': 'Custom tags' },
+      'desc': {
+        'zh-CN': '通过<code>tag</code>可以自定义容器标签。',
+        'en-US': 'Container labels can be customized through<code>tag</code>.'
+      },
       'codeFiles': ['tag.vue']
     }
   ],
@@ -29,33 +37,40 @@ export default {
     {
       'name': 'config-provider',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'design',
           'type': 'ConfigProviderProps',
           'defaultValue': '',
-          'desc': { 'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范', 'en-US': '' },
+          'desc': {
+            'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范',
+            'en-US': 'Standardization can be achieved by customizing some custom interaction specifications'
+          },
           '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': '' },
+          'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': 'Breakpoints, providing layout with' },
           'demoId': 'base'
         },
         {
           'name': 'direction',
           'type': "'ltr' | 'rtl'",
           'defaultValue': 'ltr',
-          'desc': { 'zh-CN': '文字排版方向', 'en-US': '' },
+          'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
           'demoId': 'text-dire'
         },
         {
           'name': 'tag',
           'type': 'object',
           'defaultValue': "{enable: true,name: 'div'}",
-          'desc': { 'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div', 'en-US': '' },
+          'desc': {
+            'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div',
+            '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'
         }
       ],

package/demos/pc/app/container/basic-usage.spec.js

@@ -2,8 +2,53 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-
   await page.goto('container#basic-usage')
-  const header = page.locator('.pc-demo-container .tiny-container__header')
+
+  const preview = page.locator('.pc-demo-container')
+  const header = preview.locator('.tiny-container__header')
+  const aside = preview.locator('.tiny-container__aside')
+  const main = preview.locator('.tiny-container__main')
+  const footer = preview.locator('.tiny-container__footer')
+  const btnCalssic = preview.getByText('经典')
+  const btnSimple = preview.getByText('简约')
+  const btnfashion = preview.getByText('时尚')
+  const btnlegend = preview.getByText('传奇')
+
+  // 默认显示
   await expect(header).toHaveText('Header')
+  await expect(main).toHaveCSS('top', '60px')
+  await expect(main).toHaveCSS('left', '200px')
+  await page.waitForTimeout(20)
+
+  // 经典模式
+  await btnCalssic.click()
+  await expect(footer).toHaveText('Footer')
+  await expect(main).toHaveCSS('top', '60px')
+  await expect(main).toHaveCSS('bottom', '60px')
+  await expect(main).toHaveCSS('left', '0px')
+  await page.waitForTimeout(20)
+
+  // 简约
+  await btnSimple.click()
+  await expect(header).toHaveCount(0)
+  await expect(main).toHaveCSS('top', '0px')
+  await expect(main).toHaveCSS('left', '200px')
+  await page.waitForTimeout(20)
+
+  // 时尚
+  await btnfashion.click()
+  await expect(header).toHaveCount(1)
+  await expect(header).toHaveCSS('top', '0px')
+  await expect(header).toHaveCSS('left', '200px')
+  await expect(main).toHaveCSS('top', '60px')
+  await expect(main).toHaveCSS('left', '200px')
+  await page.waitForTimeout(20)
+
+  // 传奇
+  await btnlegend.click()
+  await expect(header).toHaveCount(1)
+  await expect(main).toHaveCSS('top', '60px')
+  await expect(main).toHaveCSS('left', '200px')
+  await expect(aside).toHaveCSS('top', '60px')
+  await expect(footer).toHaveCSS('left', '200px')
 })

package/demos/pc/app/container/custom-with-height.spec.js

@@ -2,8 +2,16 @@ import { test, expect } from '@playwright/test'
 
 test('自定义宽度和高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-
   await page.goto('container#custom-with-height')
-  const header = page.locator('.pc-demo-container .tiny-container__header')
+
+  const preview = page.locator('.pc-demo-container')
+  const header = preview.locator('.tiny-container__header')
+  const aside = preview.locator('.tiny-container__aside')
+  const main = preview.locator('.tiny-container__main')
+  const footer = preview.locator('.tiny-container__footer')
+
   await expect(header).toHaveCSS('height', '80px')
+  await expect(aside).toHaveCSS('width', '200px')
+  await expect(main).toHaveCSS('top', '80px')
+  await expect(footer).toHaveCSS('height', '80px')
 })

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

@@ -29,17 +29,17 @@ export default {
       'name': { 'zh-CN': '裁剪框最小宽高', 'en-US': 'Minimum width and height of the crop box' },
       'desc': {
         'zh-CN':
-          '<p>通过属性 <code>min-crop-box-width</code> 、<code>min-crop-box-height</code> 设置裁剪框最小宽高。设置后，调整裁剪框宽高时，调整到最小值后将不能再调整。\n通过属性 <code>mmin-container-width</code> 、<code>min-container-height</code> 设置容器的最小宽度,最小高度。</p>\n',
+          '<p>通过属性 <code>min-crop-box-width</code> 、<code>min-crop-box-height</code> 设置裁剪框最小宽高。设置后，调整裁剪框宽高时，调整到最小值后将不能再调整。\n通过属性 <code>min-container-width</code> 、<code>min-container-height</code> 设置容器的最小宽度,最小高度。</p>\n',
         'en-US':
-          '<p>Set the minimum width and height of the cropping frame through the <code>min-crop-box-width</code> and <code>min-crop-box-height</code> attributes. After this parameter is set, the width and height of the cropping box cannot be adjusted after the width and height are adjusted to the minimum value. \n Set the minimum width and height of the container through the <code>mmin-container-width</code> and <code>min-container-height</code> attributes. </p>\n'
+          '<p>Set the minimum width and height of the cropping frame through the <code>min-crop-box-width</code> and <code>min-crop-box-height</code> attributes. After this parameter is set, the width and height of the cropping box cannot be adjusted after the width and height are adjusted to the minimum value. \n Set the minimum width and height of the container through the <code>min-container-width</code> and <code>min-container-height</code> attributes. </p>\n'
       },
       'codeFiles': ['min-crop-box-width-height.vue']
     },
     {
       'demoId': 'no-background',
-      'name': { 'zh-CN': '不显示网格背景', 'en-US': 'Do not display the grid background.' },
+      'name': { 'zh-CN': '不显示网格背景', 'en-US': 'Do not display the grid background' },
       'desc': {
-        'zh-CN': '<p>设置 <code>background</code> 属性为 <code>false</code> 后，将不显示容器的网格背景。</p>\n',
+        'zh-CN': '<p>通过设置 <code>background</code> 属性为 <code>false</code> 后，将不显示容器的网格背景。</p>\n',
         'en-US':
           '<p>When <code>background</code> is set to <code>false</code>, the grid background of the container is not displayed. </p>\n'
       },
@@ -47,9 +47,9 @@ export default {
     },
     {
       'demoId': 'no-guides',
-      'name': { 'zh-CN': '不显示虚线', 'en-US': 'Do not display dotted lines.' },
+      'name': { 'zh-CN': '不显示虚线', 'en-US': 'Do not display dotted lines' },
       'desc': {
-        'zh-CN': '<p>设置 <code>guides</code> 属性为 <code>false</code> 将取消裁剪框上方的虚线显示。</p>\n',
+        'zh-CN': '<p>通过设置 <code>guides</code> 属性为 <code>false</code> 将取消裁剪框上方的虚线显示。</p>\n',
         'en-US':
           '<p>Setting <code>guides</code> to <code>false</code> will cancel the dotted line above the crop box. </p>\n'
       },
@@ -59,7 +59,8 @@ export default {
       'demoId': 'no-modal',
       'name': { 'zh-CN': '不显示模态', 'en-US': 'Do not display modal' },
       'desc': {
-        'zh-CN': '<p>设置 <code>modal</code> 属性为 <code>false</code> 将取消裁剪框下方图片上方的模态层显示。</p>\n',
+        'zh-CN':
+          '<p>通过设置 <code>modal</code> 属性为 <code>false</code> 将取消裁剪框下方图片上方的模态层显示。</p>\n',
         'en-US':
           '<p>Setting <code>modal</code> to <code>false</code> cancels the display of the modal layer above the image below the crop box. </p>\n'
       },
@@ -102,7 +103,7 @@ export default {
       'demoId': 'get-container-data',
       'name': { 'zh-CN': '获取容器数据', 'en-US': 'Obtain container data' },
       'desc': {
-        'zh-CN': '<p>调用 <code>getContainerData</code> 方法可以获取容器的大小数据。</p>\n',
+        'zh-CN': '<p>通过调用 <code>getContainerData</code> 方法可以获取容器的大小数据。</p>\n',
         'en-US': '<p>Invoke the <code>getContainerData</code> method to obtain the container size data. </p>\n'
       },
       'codeFiles': ['get-container-data.vue']
@@ -111,7 +112,7 @@ export default {
       'demoId': 'get-crop-box-data',
       'name': { 'zh-CN': '获取剪切框数据', 'en-US': 'Obtain clip box data' },
       'desc': {
-        'zh-CN': '<p>调用 <code>getCropBoxData</code> 方法可以获取剪切框的位置和大小数据。</p>\n',
+        'zh-CN': '<p>通过调用 <code>getCropBoxData</code> 方法可以获取剪切框的位置和大小数据。</p>\n',
         'en-US':
           '<p>Invoke the <code>getCropBoxData</code> method to obtain the position and size of the clip box. </p>\n'
       },
@@ -122,7 +123,7 @@ export default {
       'name': { 'zh-CN': '获取裁剪后的图片数据', 'en-US': 'Obtain the cropped image data' },
       'desc': {
         'zh-CN':
-          '<p>调用 <code>getCroppedCanvas</code> 方法可以获取裁剪后的图片数据，搭配 <code>toDataURL</code> 方法将转成 base64 图片数据，搭配 <code>toBlob</code> 方法将生成 Blob 图片数据。</p>\n',
+          '<p>通过调用 <code>getCroppedCanvas</code> 方法可以获取裁剪后的图片数据，搭配 <code>toDataURL</code> 方法将转成 base64 图片数据，搭配 <code>toBlob</code> 方法将生成 Blob 图片数据。</p>\n',
         'en-US':
           '<p>Invoke the <code>getCroppedCanvas</code> method to obtain the cropped image data. Use the <code>toDataURL</code> method to convert the cropped image data to Base64 image data. Use the <code>toBlob</code> method to generate Blob image data. </p>\n'
       },
@@ -132,7 +133,7 @@ export default {
       'demoId': 'get-data',
       'name': { 'zh-CN': '获取裁剪区域数据', 'en-US': 'Obtain crop area data' },
       'desc': {
-        'zh-CN': '<p>调用 <code>getData</code> 方法可以获取裁剪区域的位置以及大小。</p>\n',
+        'zh-CN': '<p>通过调用 <code>getData</code> 方法可以获取裁剪区域的位置以及大小。</p>\n',
         'en-US':
           '<p>Invoke the <code>getData</code> method to obtain the position and size of the cropping area. </p>\n'
       },
@@ -143,7 +144,7 @@ export default {
       'name': { 'zh-CN': '获取图像数据', 'en-US': 'Obtain Image Data' },
       'desc': {
         'zh-CN':
-          '<p>调用 <code>getImageData</code> 方法可以获取图像位置、大小和其他相关数据，若想获取画布位置和大小数据可以调用 <code>getCanvasData</code> 方法。</p>\n',
+          '<p>通过调用 <code>getImageData</code> 方法可以获取图像位置、大小和其他相关数据，若想获取画布位置和大小数据可以调用 <code>getCanvasData</code> 方法。</p>\n',
         'en-US':
           '<p>Invoke the <code>getImageData</code> method to obtain the image position, size, and other related data. To obtain the canvas position and size data, call the <code>getCanvasData</code> method. </p>\n'
       },
@@ -154,7 +155,7 @@ export default {
       'name': { 'zh-CN': '替换图片', 'en-US': 'Replace Image' },
       'desc': {
         'zh-CN':
-          '<p>调用 <code>replace</code> 方法可以替换图像的 src 并重新构建 cropper 。 通过 <code>rotatable</code> 属性控制图片旋转，默认为 true 。</p>\n',
+          '<p>通过调用 <code>replace</code> 方法可以替换图像的 src 并重新构建 cropper 。 通过 <code>rotatable</code> 属性控制图片旋转，默认为 true。</p>\n',
         'en-US':
           '<p>Invoke the <code>replace</code> method to replace the image src and rebuild the cropper. The <code>rotatable</code> attribute is used to control image rotation. The default value is true. </p>\n'
       },
@@ -163,7 +164,10 @@ export default {
     {
       'demoId': 'replace-image1',
       'name': { 'zh-CN': '放大图片', 'en-US': 'Enlarge Image' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>zoomable</code>可放大图片。',
+        'en-US': 'You can zoom in on the image by<code>zoomable</code>.'
+      },
       'codeFiles': ['replace-image.vue']
     },
     {
@@ -174,7 +178,7 @@ export default {
       },
       'desc': {
         'zh-CN':
-          '<p><code>zoom-on-wheel</code> 属性为 <code>true</code> 情况下，通过 <code>wheel-zoom-ratio</code> 属性可以设置缩放比例，默认为 <code>0.1</code> 。</p>\n',
+          '<p>通过<code>zoom-on-wheel</code> 属性为 <code>true</code> 情况下，通过 <code>wheel-zoom-ratio</code> 属性可以设置缩放比例，默认为 <code>0.1</code> 。</p>\n',
         'en-US':
           '<p><code>zoom-on-wheel</code> attribute is set to <code>true</code>, you can use the <code>wheel-zoom-ratio</code> attribute to set the scaling ratio. The default value is <code>0.1</code>. </p>\n'
       },
@@ -182,10 +186,10 @@ export default {
     },
     {
       'demoId': 'zoom-on-wheel',
-      'name': { 'zh-CN': '禁用鼠标滚轮缩放图像', 'en-US': 'Disable the mouse wheel to zoom in or out the image.' },
+      'name': { 'zh-CN': '禁用鼠标滚轮缩放图像', 'en-US': 'Disable the mouse wheel to zoom in or out the image' },
       'desc': {
         'zh-CN':
-          '<p>设置 <code>zoom-on-wheel</code> 属性为 <code>false</code> 后，将不允许通过滚动鼠标滚轮来缩放图像。</p>\n',
+          '<p>通过设置 <code>zoom-on-wheel</code> 属性为 <code>false</code> 后，将不允许通过滚动鼠标滚轮来缩放图像。</p>\n',
         'en-US':
           '<p>After the <code>zoom-on-wheel</code> attribute is set to <code>false</code>, the image cannot be zoomed in or out by scrolling the mouse wheel. </p>\n'
       },
@@ -195,7 +199,7 @@ export default {
       'demoId': 'event-ready',
       'name': { 'zh-CN': 'ready 事件', 'en-US': 'ready event' },
       'desc': {
-        'zh-CN': '<p>当一个 cropper 实例完全构建时触发 <code>ready</code> 事件。</p>\n',
+        'zh-CN': '<p>当一个 cropper 实例完全构建时，通过触发 <code>ready</code> 事件。</p>\n',
         'en-US': '<p>When a cropper instance is completely built, the <code>ready</code> event is triggered. </p>\n'
       },
       'codeFiles': ['event-ready.vue']
@@ -205,9 +209,9 @@ export default {
       'name': { 'zh-CN': '裁剪框方法 事件', 'en-US': 'Crop box method event' },
       'desc': {
         'zh-CN':
-          '<p>当一个 cropper 实例完全构建时触发 <code>disable</code> 方法禁用裁剪框，当触发 <code>enable</code> 启用裁剪框</p>\n',
+          '<p>当一个 cropper 实例完全构建时，通过触发 <code>disable</code> 方法禁用裁剪框，当触发 <code>enable</code> 启用裁剪框。</p>\n',
         'en-US':
-          '<p>When a cropper instance is completely built, the <code>disable</code> method is triggered to disable the cropping box. When the <code>enable</code> method is triggered to enable the cropping box</p>\n'
+          '<p>When a cropper instance is completely built, the <code>disable</code> method is triggered to disable the cropping box. When the <code>enable</code> method is triggered to enable the cropping box.</p>\n'
       },
       'codeFiles': ['crop-meth.vue']
     },
@@ -216,9 +220,9 @@ export default {
       'name': { 'zh-CN': '裁剪相关事件', 'en-US': 'Cutout Event' },
       'desc': {
         'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>说明当画布或剪切框开始发生变化时触发 <code>cropstart</code> 事件\n当画布或剪切框正在发生变化时触发 <code>cropmove</code> 事件\n当画布或剪切框发生变化结束时触发 <code>cropend</code> 事件\n当画布或裁剪框发生改变时触发 <code>crop</code> 事件\n通过触发 <code>getCanvasData</code> 获取画布 Canvas（图像包装器）位置和大小数据</p>\n</div>\n',
+          '<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>说明当画布或剪切框开始发生变化时触发 <code>cropstart</code> 事件\n当画布或剪切框正在发生变化时触发 <code>cropmove</code> 事件\n当画布或剪切框发生变化结束时触发 <code>cropend</code> 事件\n当画布或裁剪框发生改变时触发 <code>crop</code> 事件\n通过触发 <code>getCanvasData</code> 获取画布 Canvas（图像包装器）位置和大小数据。</p>\n</div>\n',
         'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> Description: The <code>cropstart</code> event is triggered when the canvas or clipping box starts to change.\nThe <code>cropmove</code> event is triggered when the canvas or clipping box is changed.\nThe <code>cropen event is triggered when the canvas or clipping box ends. d</code>Event\nThe <code>crop</code> event is triggered when the canvas or crop box changes. \nThe <code>getCanvasData</code> event is triggered to obtain the position and size data of the canvas (image wrapper) </p>\n</div>\n'
+          '<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> Description: The <code>cropstart</code> event is triggered when the canvas or clipping box starts to change.\nThe <code>cropmove</code> event is triggered when the canvas or clipping box is changed.\nThe <code>cropen event is triggered when the canvas or clipping box ends. d</code>Event\nThe <code>crop</code> event is triggered when the canvas or crop box changes. \nThe <code>getCanvasData</code> event is triggered to obtain the position and size data of the canvas (image wrapper). </p>\n</div>\n'
       },
       'codeFiles': ['event-about-crop.vue']
     }
@@ -227,15 +231,15 @@ export default {
     {
       'name': 'crop',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'crop-type',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64 。',
+            'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64',
             'en-US':
-              'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64.'
+              'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64'
           },
           'demoId': 'get-cropped-canvas'
         },
@@ -244,8 +248,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置裁剪区域图片是否可预览，默认为 false 。',
-            'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false.'
+            'zh-CN': '设置裁剪区域图片是否可预览，默认为 false',
+            'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false'
           },
           'demoId': ''
         },
@@ -254,9 +258,9 @@ export default {
           'type': 'number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92 。',
+            'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92',
             'en-US':
-              'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92.'
+              'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92'
           },
           'demoId': ''
         },
@@ -273,9 +277,9 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1 。',
+              '定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
             'en-US':
-              'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1.'
+              'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
           },
           'demoId': 'view-mode'
         },
@@ -285,9 +289,9 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              "定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理。",
+              "定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
             'en-US':
-              "Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required."
+              "Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
           },
           'demoId': 'drag-mode'
         },
@@ -319,7 +323,7 @@ export default {
           'desc': {
             'zh-CN': '是否显示图片上方裁剪框下方的黑色模态;默认为 true',
             'en-US':
-              'Whether to display the black mode below the cropping box above the image; The default value is true.'
+              'Whether to display the black mode below the cropping box above the image; The default value is true'
           },
           'demoId': 'no-modal'
         },
@@ -329,7 +333,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否在裁剪框上方显示虚线;默认为 true',
-            'en-US': 'Whether to display dotted lines above the crop box; The default value is true.'
+            'en-US': 'Whether to display dotted lines above the crop box; The default value is true'
           },
           'demoId': 'no-guides'
         },
@@ -339,7 +343,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '裁剪框是否在图片正中心;默认为 true',
-            'en-US': 'Whether the cropping frame is in the center of the image; The default value is true.'
+            'en-US': 'Whether the cropping frame is in the center of the image; The default value is true'
           },
           'demoId': 'aspect-ratio'
         },
@@ -349,7 +353,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否显示容器的网格背景;默认为 true',
-            'en-US': 'Whether to display the grid background of the container; The default value is true.'
+            'en-US': 'Whether to display the grid background of the container; The default value is true'
           },
           'demoId': 'no-background'
         },
@@ -359,7 +363,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否允许可以移动后面的图片;默认为 true',
-            'en-US': 'Indicates whether the image can be moved. The default value is true.'
+            'en-US': 'Indicates whether the image can be moved. The default value is true'
           },
           'demoId': 'drag-mode'
         },
@@ -369,7 +373,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否允许旋转图像;默认为 true',
-            'en-US': 'Indicates whether images can be rotated. The default value is true.'
+            'en-US': 'Indicates whether images can be rotated. The default value is true'
           },
           'demoId': 'replace-image'
         },
@@ -379,7 +383,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否允许放大图像;默认为 true',
-            'en-US': 'Whether to allow image zooming in; The default value is true.'
+            'en-US': 'Whether to allow image zooming in; The default value is true'
           },
           'demoId': 'replace-image'
         },
@@ -390,7 +394,7 @@ export default {
           'desc': {
             'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像;默认为 true',
             'en-US':
-              'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true.'
+              'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true'
           },
           'demoId': 'zoom-on-wheel'
         },
@@ -451,7 +455,7 @@ export default {
           'desc': {
             'zh-CN': '初始化时，是否自动显示裁剪框;默认为 true',
             'en-US':
-              'Indicates whether to automatically display the crop box during initialization. The default value is true.'
+              'Indicates whether to automatically display the crop box during initialization. The default value is true'
           },
           'demoId': 'auto-crop-area'
         },
@@ -483,7 +487,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '当一个 cropper 实例完全构建时触发',
-            'en-US': 'This event is triggered when a cropper instance is completely built.'
+            'en-US': 'This event is triggered when a cropper instance is completely built'
           },
           'demoId': 'event-ready'
         },
@@ -494,7 +498,7 @@ export default {
           'desc': {
             'zh-CN': 'cropdata 事件回调函数中可以拿到裁剪后的数据，默认为 base64 数据',
             'en-US':
-              'The tailored data can be obtained from the cropdata event callback function. The default value is Base64 data.'
+              'The tailored data can be obtained from the cropdata event callback function. The default value is Base64 data'
           },
           'demoId': 'event-about-crop'
         },
@@ -562,8 +566,8 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '替换图像的 src 并重新构建 cropper;参数为 图片 URL ',
-            'en-US': 'Replace the image src and rebuild the cropper. The parameter is the image URL.'
+            'zh-CN': '替换图像的 src 并重新构建 cropper;参数为 图片 URL',
+            'en-US': 'Replace the image src and rebuild the cropper. The parameter is the image URL'
           },
           'demoId': 'replace-image'
         },
@@ -634,7 +638,7 @@ export default {
           'desc': {
             'zh-CN': '改变裁切框的宽高比;参数为(aspectRatio)，类型 number，是一个正数',
             'en-US':
-              'Change the aspect ratio of the cutting frame; The parameter is (aspectRatio) and the type is number. The value is a positive number.'
+              'Change the aspect ratio of the cutting frame; The parameter is (aspectRatio) and the type is number. The value is a positive number'
           },
           'demoId': 'aspect-ratio'
         },
@@ -644,7 +648,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '禁用裁切框（裁切框不可移动）',
-            'en-US': 'Disable the cropping box (the cropping box cannot be moved).'
+            'en-US': 'Disable the cropping box (the cropping box cannot be moved)'
           },
           'demoId': 'crop-meth'
         },
@@ -661,7 +665,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '销毁 cropper 并从图像中删除整个 cropper',
-            'en-US': 'Destroy the cropper and delete the entire cropper from the image.'
+            'en-US': 'Destroy the cropper and delete the entire cropper from the image'
           },
           'demoId': 'event-ready'
         }