doc(fix):[carousel,color-picker,color-select-panel,config-provider,crop,dialog-box] Update doc text (#1130)

2023-12-14 15:41:38 +08:00 · 2023-12-14 15:41:38 +08:00 · 41c608fbbd
parent 899174994c
commit 41c608fbbd
15 changed files with 69 additions and 36 deletions
--- a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
+++ b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
@ -287,7 +287,7 @@ export default {
          'type': 'string',
          'defaultValue': '',
          'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
-          'demoId': 'show-title'
+          'demoId': 'manual-play'
        }
      ],
      'slots': [
--- a/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
+++ b/examples/sites/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',
--- a/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
+++ b/examples/sites/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',
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md
+++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.cn.md
@ -1,7 +1,7 @@
 ---
-title: ConfigProvide 组件
+title: ConfigProvider 组件
 ---

-# ConfigProvide 组件
+# ConfigProvider 组件

 <div></div>
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
+++ b/examples/sites/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': [],
--- a/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
+++ b/examples/sites/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>
--- a/examples/sites/demos/pc/app/crop/aspect-ratio.vue
+++ b/examples/sites/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>
--- a/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
+++ b/examples/sites/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,
--- a/examples/sites/demos/pc/app/crop/event-about-crop.vue
+++ b/examples/sites/demos/pc/app/crop/event-about-crop.vue
@ -11,6 +11,8 @@
      @cropmove="cropmove"
      @cropend="cropend"
      @crop="crop"
+      @cropdata="cropdata"
+      enable
    ></tiny-crop>
  </div>
 </template>
@ -36,6 +38,12 @@ export default {
        status: 'info'
      })
    },
+    cropdata(data) {
+      Modal.message({
+        message: `Canvas 数据：${JSON.stringify(data)}`,
+        status: 'info'
+      })
+    },
    cropstart(e) {
      Modal.message({
        message: 'cropstart 事件，回调参数：' + e,
--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
@ -4,7 +4,13 @@
      获取裁剪后的图片数据
    </tiny-button>
    <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
-    <tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
+    <tiny-crop
+      ref="cropRef"
+      :cropvisible="visible"
+      @update:cropvisible="visible = $event"
+      :src="imgUrl"
+      :crop-type="blob"
+    ></tiny-crop>
  </div>
 </template>

--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
@ -4,7 +4,13 @@
      获取裁剪后的图片数据
    </tiny-button>
    <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
-    <tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
+    <tiny-crop
+      ref="crop"
+      :cropvisible="visible"
+      @update:cropvisible="visible = $event"
+      :src="imgUrl"
+      :crop-type="blob"
+    ></tiny-crop>
  </div>
 </template>

--- a/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
@ -1,6 +1,7 @@
 <template>
  <div>
    <tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
+    <tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
    <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
    <tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
  </div>
@ -20,4 +21,10 @@ function getImageData() {
    status: 'info'
  })
 }
+function getCanvasData() {
+  Modal.message({
+    message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
+    status: 'info'
+  })
+}
 </script>
--- a/examples/sites/demos/pc/app/crop/get-image-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data.vue
@ -1,6 +1,7 @@
 <template>
  <div>
    <tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
+    <tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
    <tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
    <tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
  </div>
@ -26,6 +27,12 @@ export default {
        message: `图像数据：${JSON.stringify(this.$refs.crop.getImageData())}`,
        status: 'info'
      })
+    },
+    getCanvasData() {
+      Modal.message({
+        message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
+        status: 'info'
+      })
    }
  }
 }
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
      <template #title>
        <div class="header">
          <span class="title">标题区</span>
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
      <template #title>
        <div class="header">
          <span class="title">标题区</span>