@opentiny/vue-docs 2.2.11 → 2.2.14

package/demos/mobile-first/app/select-mobile/webdoc/select-mobile.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'multiple',
       name: {
@@ -77,6 +76,5 @@ export default {
       },
       codeFiles: ['mode-form.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/select-view/webdoc/select-view.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'field',
       name: {
@@ -90,6 +89,5 @@ export default {
       },
       codeFiles: ['place-holder.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/selected-box/webdoc/selected-box.js

@@ -53,6 +53,5 @@ export default {
       },
       codeFiles: ['enumeration.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/signature/basic-usage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="h-72">
+    <tiny-signature></tiny-signature>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  }
+}
+</script>

package/demos/mobile-first/app/signature/bgcolor.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="h-72">
+    <tiny-signature :background-color="backgroundColor"></tiny-signature>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  },
+  data() {
+    return {
+      backgroundColor: '#2070f380'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/button-text.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="h-72">
+    <tiny-signature rewrite-button-text="取消" submit-button-text="提交"></tiny-signature>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  }
+}
+</script>

package/demos/mobile-first/app/signature/get-image.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="h-72">
+      <tiny-signature ref="signature" :show-submit-button="false"></tiny-signature>
+    </div>
+    <div class="mt-5">
+      <tiny-button @click="getImage">生成图片</tiny-button>
+    </div>
+    <tiny-image :src="url"></tiny-image>
+  </div>
+</template>
+
+<script>
+import { Signature, Image, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature,
+    TinyImage: Image,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      url: ''
+    }
+  },
+  methods: {
+    getImage() {
+      const { image } = this.$refs.signature.getSignatureImage()
+      this.url = image
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/in-dialogbox.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-button @click="boxVisibility = true">默认属性配置</tiny-button>
+    <tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event">
+      <div class="h-72">
+        <tiny-signature ref="signature" :show-submit-button="false"></tiny-signature>
+      </div>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script>
+import { Signature, Button, DialogBox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature,
+    TinyDialogBox: DialogBox,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/line-style.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="h-72">
+    <tiny-signature :line-width="8" :pen-color="penColor"></tiny-signature>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  },
+  data() {
+    return {
+      penColor: '#2070f380'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/placeholder.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="h-72">
+    <tiny-signature placeholder="自定义占位符"></tiny-signature>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  }
+}
+</script>

package/demos/mobile-first/app/signature/preview.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="h-72">
+      <tiny-signature @submit="submit"></tiny-signature>
+    </div>
+    <h4 class="mt-5 text-base font-bold">点击确认按钮生成预览图片：</h4>
+    <tiny-image :src="url"></tiny-image>
+  </div>
+</template>
+
+<script>
+import { Signature, Image } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature,
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: ''
+    }
+  },
+  methods: {
+    submit({ image }) {
+      this.url = image
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/value.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="h-72">
+      <tiny-signature :value="url"></tiny-signature>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Signature } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySignature: Signature
+  },
+  mounted() {
+    setTimeout(() => {
+      this.url = this.remoteUrl
+    }, 1000)
+  },
+  data() {
+    return {
+      url: '',
+      remoteUrl:
+        'data:image/png;base64,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'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/signature/webdoc/signature.cn.md

@@ -0,0 +1,9 @@
+---
+title: Signature 手写签名组件
+---
+
+# Signature 手写签名组件
+
+<div>
+
+</div>

package/demos/mobile-first/app/signature/webdoc/signature.en.md

@@ -0,0 +1,9 @@
+---
+title: Signature 手写签名组件
+---
+
+# Signature 手写签名组件
+
+<div>
+
+</div>

package/demos/mobile-first/app/signature/webdoc/signature.js

@@ -0,0 +1,130 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>height</code> 属性设置画布高度。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'bgcolor',
+      name: {
+        'zh-CN': '自定义背景颜色',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>backgroundColor</code> 属性设画布背景颜色。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['bgcolor.vue']
+    },
+    {
+      demoId: 'button-text',
+      name: {
+        'zh-CN': '自定义按钮文本',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>rewriteButtonText</code> 和 <code>submitButtonText</code> 属性分别设置重写按钮和确认按钮的文案。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['button-text.vue']
+    },
+    {
+      demoId: 'events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '\n        <p>\n          <ul>\n            <li> <code>submit</code>: 点击确认按钮触发的事件。</li>\n            <li> <code>rewrite</code>: 点击重写按钮触发的事件。</li>\n            <li> <code>start</code>: 每一次书写开始时触发的事件。</li>\n            <li> <code>signing</code>: 正在进行书写触发的事件。</li>\n            <li> <code>end</code>: 每一次书写完成写触发的事件。</li>\n          </ul>\n        </p>\n        ',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['events.vue']
+    },
+    {
+      demoId: 'get-image',
+      name: {
+        'zh-CN': '获取签名后的图片',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过组件实例的 <code>getSignatureImage</code> 方法可以获取签名预览图片。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['get-image.vue']
+    },
+    {
+      demoId: 'in-dialogbox',
+      name: {
+        'zh-CN': '弹窗中使用签名组件',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>弹窗中使用签名组件。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['in-dialogbox.vue']
+    },
+    {
+      demoId: 'line-style',
+      name: {
+        'zh-CN': '签名线条样式',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '\n        <p>通过 <code>penColor</code> 属性设置签名线条颜色。</p>\n        <p>通过 <code>lineWidth</code> 属性设置签名线条宽度。</p>\n        ',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['line-style.vue']
+    },
+    {
+      demoId: 'placeholder',
+      name: {
+        'zh-CN': '定制占位符',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': ' <p>通过 <code>placeholder</code> 属性设置默认占位符。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['placeholder.vue']
+    },
+    {
+      demoId: 'preview',
+      name: {
+        'zh-CN': '签名预览',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '\n        <p>当点击确认按钮时，组件会触发 <code>submit</code> 事件，事件的第一个参数为 <code>data</code>，包含以下字段：\n        <code>image</code>：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。\n        <code>canvas</code>：Canvas 元素。</p>\n        ',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['preview.vue']
+    },
+    {
+      demoId: 'value',
+      name: {
+        'zh-CN': '签名回显',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': ' <p>通过 <code>value</code> 属性可以回显手写签名图片。</p>',
+        'en-US': '<p>Set the canvas height through the <code>height</code> attribute. </p>'
+      },
+      codeFiles: ['value.vue']
+    }
+  ]
+}

package/demos/mobile-first/app/slider/webdoc/slider.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'max-min',
       name: {
@@ -187,6 +186,5 @@ export default {
       },
       codeFiles: ['left-right-slot.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/slider-button/webdoc/slider-button.cn.md

@@ -1,9 +1,5 @@
 ---
-title: Radio 单选框
+title: SliderButton 滑动按钮组
 ---
 
-# Radio 单选框
-
-<div>
-用于配置不同场景的选项，在一组备选项中进行单选
-</div>
+# SliderButton 滑动按钮组

package/demos/mobile-first/app/slider-button/webdoc/slider-button.en.md

@@ -1,9 +1,5 @@
 ---
-title: Radio 单选框
+title: SliderButton 滑动按钮组
 ---
 
-# Radio 单选框
-
-<div>
-用于配置不同场景的选项，在一组备选项中进行单选
-</div>
+# SliderButton 滑动按钮组

package/demos/mobile-first/app/slider-button/webdoc/slider-button.js

@@ -9,14 +9,12 @@ export default {
         'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN': `<p>通过 <code>v-model</code> 绑定变量，设置的变量值为默认选中的 <code>Button</code>，变量值对应 </code>label<code> 属性的值。<br>
-          通过 <code>text</code> 也可以配置显示文本，与默认插槽配置纯文本的结果一致<br>
-          <code>label</code> 可以是 <code>String、Number 或 Boolean</code>。</p>`,
+        'zh-CN':
+          '<p>通过 <code>v-model</code> 绑定变量，设置的变量值为默认选中的 <code>Button</code>，变量值对应 <code>label</code> 属性的值。<br>\n          通过 <code>text</code> 也可以配置显示文本，与默认插槽配置纯文本的结果一致<br>\n          <code>label</code> 可以是 <code>String、Number 或 Boolean</code>。</p>',
         'en-US': '<p>button type</p>'
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'slider-button-type',
       name: {
@@ -24,11 +22,11 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': `<p>通过<code>type</code>属性设置按钮展示类型，可选值为<code>text(默认)、icon</code>。<br>
-          可在 SliderButton、SliderButtonGroup 组件上设置 <code>change</code> 事件，当绑定值变化时触发，回调函数为选中的 <code>SliderButton label</code> 值。<p>`,
+        'zh-CN':
+          '<p>通过<code>type</code>属性设置按钮展示类型，可选值为<code>text(默认)、icon</code>。<br>\n          可在 SliderButton、SliderButtonGroup 组件上设置 <code>change</code> 事件，当绑定值变化时触发，回调函数为选中的 <code>SliderButton label</code> 值。<p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['gslider-button-type.vue']
+      codeFiles: ['slider-button-type.vue']
     },
     {
       demoId: 'slider-button-size',
@@ -38,7 +36,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可对按钮形式的 <code>SliderButton</code> 或带有边框的<code>SliderButton</code> 设置 <code>size</code> 属性，以改变其尺寸，包括 <code>small(默认)、large</code> 两个尺寸选项。当插入的是图标类型时，还可配置`medium`尺寸。<p>',
+          '<p>可对按钮形式的 <code>SliderButton</code> 或带有边框的<code>SliderButton</code> 设置 <code>size</code> 属性，以改变其尺寸，包括 <code>small(默认)、large</code> 两个尺寸选项。当插入的是图标类型时，还可配置 <code>medium</code>尺寸。<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['slider-button-size.vue']
@@ -50,7 +48,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>label</code>或者<code>text</code> 属性可以设置 Radio 的内容<p>',
+        'zh-CN': '<p>通过 <code>label</code>或者<code>text</code> 属性可以设置 <code>Button</code> 的内容<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['custom-content.vue']
@@ -92,6 +90,5 @@ export default {
       },
       codeFiles: ['slider-disabled.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/standard-list-item/basic-usage.vue

@@ -40,7 +40,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: '/static/images/1.jpg',
+        value: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
         round: true
       },
       iconOptions: [

package/demos/mobile-first/app/standard-list-item/content-slot.vue

@@ -24,7 +24,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: '/static/images/1.jpg',
+        value: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
         round: true
       },
       iconOptions: [

package/demos/mobile-first/app/standard-list-item/custom-class.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="h-64 w-full p-5 bg-color-bg-5">
+    <tiny-standard-list-item
+      :show-image="true"
+      :user-head="userHeadOption"
+      :options="iconOptions"
+      :tag="tagOption"
+      :data="data"
+      custom-class="bg-color-bg-2"
+    >
+    </tiny-standard-list-item>
+  </div>
+</template>
+
+<script>
+import { StandardListItem } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyStandardListItem: StandardListItem
+  },
+  data() {
+    return {
+      data: {
+        title: '关晓雨',
+        subTitle: '080907086',
+        desc: '这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本这是一段描述文本'
+      },
+      tagOption: {
+        size: 'mini',
+        data: [{ type: 'success', name: '进行中' }]
+      },
+      userHeadOption: {
+        type: 'image',
+        size: 40,
+        value: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
+        round: true
+      },
+      iconOptions: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting()
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare()
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/standard-list-item/type.vue

@@ -41,7 +41,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: '/static/images/1.jpg',
+        value: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
         round: true
       },
       iconOptions: [