@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/mobile/app/alert/basic-usage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="demo-alert-base">
+    <tiny-alert description="type 为默认值 info"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success"></tiny-alert>
+    <tiny-alert type="warning">
+      <span>type 为 warning，且使用内容插槽</span>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
+
+<style scoped>
+.demo-alert-base .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/alert/center.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-alert center description="文字居中"></tiny-alert>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/demos/mobile/app/alert/custom-close.vue

@@ -1,18 +1,36 @@
 <template>
   <div class="alert-wrap">
-    <tiny-alert>默认关闭按钮</tiny-alert>
-    <tiny-alert :closable="false"> 不可关闭 </tiny-alert>
-    <tiny-alert close-text="关闭"> 自定义关闭按钮为文本 </tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <p>1. 当 <code>closable</code> 属性设成 false 时, 提示不可关闭。</p>
+    <tiny-alert :closable="false"> 这个提示不可关闭 </tiny-alert>
+    <br />
+
+    <p>2. 当 <code>auto-hide</code> 属性设成 true 时, 提示将在2秒后自动关闭。</p>
+    自动关闭: <tiny-switch v-model="autoHide"></tiny-switch>
+    <tiny-alert :auto-hide="autoHide"> {{ autoHide ? '2秒后将自动关闭' : '点击开关查看自动关闭功能' }} </tiny-alert>
+    <br />
+
+    <p>3. 通过 <code>close-text</code> 属性自定义关闭按钮文本。</p>
+    <tiny-alert :close-text="closeText"> close-text属性使用示例 </tiny-alert>
+    <br />
+
+    <p>4. 提示关闭时触发 <code>close</code> 事件：</p>
+    <tiny-alert @close="close"> close-text属性使用示例 </tiny-alert>
   </div>
 </template>
 
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
+<script>
+import { Alert, Switch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert: Alert,
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      autoHide: false,
+      closeText: '自定义关闭',
+    }
   },
   methods: {
     close() {

package/demos/mobile/app/alert/target.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="alert-target-demo">
+    <div class="alert-wrap" ref="target">
+      <tiny-tabs activeName="first" activeColor="blue">
+        <tiny-tab-item title="标签1" name="first"> 内容1 </tiny-tab-item>
+        <tiny-tab-item title="标签2" name="second"> 内容2 </tiny-tab-item>
+        <tiny-tab-item title="标签3" name="third"> 内容3 </tiny-tab-item>
+      </tiny-tabs>
+    </div>
+    <tiny-alert target="target">展示在标签栏上</tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  }
+}
+</script>
+
+<style>
+.alert-wrap .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/alert/webdoc/alert.js

@@ -2,6 +2,17 @@ export default {
   column: '2',
   owner: '',
   demos: [
+    {
+      'demoId': 'base',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>type</code> 设置不同的类型 可选值：success | warning | info | error ，默认值：success。<br> 同时可通过 <code>default</code> 默认插槽自定义提示内容。',
+        'en-US':
+          'Set different types through <code>type</code>. The options are success | warning | info | error. The default value is success. <br/> You can customize the prompt content through the <code>default</code> slot. '
+      },
+      'codeFiles': ['basic-usage.vue']
+    },
     {
       demoId: 'custom-close',
       name: {
@@ -26,6 +37,15 @@ export default {
       },
       codeFiles: ['icon.vue']
     },
+    {
+      'demoId': 'center',
+      'name': { 'zh-CN': '文字居中', 'en-US': 'Center text' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>center</code> 属性可使文字显示居中。</p>\n',
+        'en-US': '<p>You can use the <code>center</code> property to center the text. </p>\n'
+      },
+      'codeFiles': ['center.vue']
+    },
     {
       demoId: 'size',
       name: {
@@ -38,6 +58,18 @@ export default {
       },
       codeFiles: ['size.vue']
     },
+    {
+      demoId: 'target',
+      name: {
+        'zh-CN': '指定挂载节点',
+        'en-US': 'Specify display node'
+      },
+      desc: {
+        'zh-CN': '通过<code> target </code>属性绑定要挂载的容器ref值，实现自定义展示位置',
+        'en-US': 'Specify display position'
+      },
+      codeFiles: ['target.vue']
+    },
     {
       demoId: 'slot-default',
       name: {
@@ -56,6 +88,13 @@ export default {
       name: 'alert', // 组件名称展示使用
       type: 'component', // API 类型
       properties: [
+        {
+          'name': 'center',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '文字是否居中', 'en-US': 'Whether the text is centered' },
+          'demoId': 'center'
+        },
         {
           name: 'closable',
           type: 'Boolean',
@@ -106,6 +145,17 @@ export default {
           },
           demoId: 'size'
         },
+        {
+          name: 'target',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
+            'en-US':
+              'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
+          },
+          demoId: 'target'
+        },
         {
           name: 'type',
           type: 'String',

package/demos/mobile/app/checkbox/basic-usage.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="checkbox-wrap">
+    <p>当前选中的值为：{{ checked1 }}</p>
+    <tiny-checkbox v-model="checked1" label="复选框1"></tiny-checkbox>
+
+    <p>使用插槽：</p>
+    <tiny-checkbox v-model="checked2">
+      <span style="color: red">当前选中的值为：{{ checked2 }}</span>
+    </tiny-checkbox>
+  </div>
+</template>
+
+<script>
+import { Checkbox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox
+  },
+  data() {
+    return {
+      checked1: true,
+      checked2: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-wrap {
+  padding: 20px;
+}
+</style>

package/demos/mobile/app/checkbox/{default.vue → checkbox-group.vue}

@@ -1,19 +1,14 @@
 <template>
   <div class="checkbox-wrap">
     <tiny-checkbox-group v-model="checked">
-      <tiny-checkbox label="复选框1">
-        <span style="color: blue">复选框1</span>
-      </tiny-checkbox>
-      <tiny-checkbox label="复选框2">
-        <span style="color: red">复选框2</span>
-      </tiny-checkbox>
+      <tiny-checkbox label="复选框1"></tiny-checkbox>
+      <tiny-checkbox label="复选框2"></tiny-checkbox>
     </tiny-checkbox-group>
-    <br />
-    当前选中的值为：{{ checked }}
+    <p>当前选中的值为：{{ checked }}</p>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Checkbox, CheckboxGroup } from '@opentiny/vue'
 
 export default {
@@ -29,7 +24,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .checkbox-wrap {
   padding: 20px;
 }

package/demos/mobile/app/checkbox/{label.vue → disabled.vue}

@@ -3,13 +3,14 @@
     <tiny-checkbox-group v-model="checked">
       <tiny-checkbox label="复选框1" name="name"></tiny-checkbox>
       <tiny-checkbox label="复选框2" disabled></tiny-checkbox>
+      <tiny-checkbox label="复选框3" disabled></tiny-checkbox>
     </tiny-checkbox-group>
     <br />
     当前选中的值为：{{ checked }}
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Checkbox, CheckboxGroup } from '@opentiny/vue'
 
 export default {
@@ -19,13 +20,13 @@ export default {
   },
   data() {
     return {
-      checked: ['复选框1']
+      checked: ['复选框1', '复选框2']
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
 .checkbox-wrap {
   padding: 20px;
 }

package/demos/mobile/app/checkbox/event-change.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Checkbox } from '@opentiny/vue'
 
 export default {
@@ -24,7 +24,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .checkbox-wrap {
   padding: 20px;
 }

package/demos/mobile/app/checkbox/icon-position.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="checkbox-wrap">
+    <p>
+      1. 给 <code>checkbox-group</code> 设置 <code>icon-position</code>属性，指定其中所有
+      <code>checkbox</code> 子选项的同名属性。
+    </p>
+    <tiny-checkbox-group v-model="checked1" icon-position="top">
+      <tiny-checkbox label="复选框1">
+        <span style="display: block;margin-bottom: 10px;"
+          >第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。</span
+        >
+      </tiny-checkbox>
+      <tiny-checkbox label="复选框2">
+          <span
+            >第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。</span
+          >
+      </tiny-checkbox>
+    </tiny-checkbox-group>
+    <br />
+
+    <p>2. 也可以给单个 <code>checkbox</code> 复选框设置 <code>icon-position</code>属性。</p>
+    <tiny-checkbox v-model="checked2" icon-position="top">
+      <span>很长的label。。。很长的label。。。很长的label。。。很长的label。。。很长的label。。。</span>
+    </tiny-checkbox>
+  </div>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checked1: ['复选框1'],
+      checked2: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-wrap {
+  padding: 20px;
+}
+</style>

package/demos/mobile/app/checkbox/indeterminate.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Checkbox, CheckboxGroup } from '@opentiny/vue'
 
 export default {
@@ -48,7 +48,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .checkbox-wrap {
   padding: 20px;
 }

package/demos/mobile/app/checkbox/true-false-label.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Checkbox } from '@opentiny/vue'
 
 export default {
@@ -21,7 +21,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .checkbox-wrap {
   padding: 20px;
 }

package/demos/mobile/app/checkbox/webdoc/checkbox.js

@@ -3,63 +3,93 @@ export default {
   owner: '',
   demos: [
     {
-      demoId: 'default',
+      demoId: 'basic-usage',
       name: {
-        'zh-CN': '插槽',
-        'en-US': 'button type'
+        'zh-CN': '基本使用',
+        'en-US': 'basic-usage'
       },
       desc: {
-        'zh-CN': '<p>默认插槽</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN':
+          '<p>通过 <code>v-model/modelValue</code> 属性绑定勾选值，<code>label</code> 或 <code>default</code> 插槽绑定标签文本。</p>',
+        'en-US':
+          '<p>Bind the checked value through the <code>v-model/modelValue/code> attribute and the <code>label/code> props or <code>default/code> slot to bind the label text.</p>'
       },
-      codeFiles: ['default.vue']
+      codeFiles: ['basic-usage.vue']
     },
     {
-      demoId: 'event-change',
+      demoId: 'checkbox-group',
       name: {
-        'zh-CN': '事件',
-        'en-US': 'button round'
+        'zh-CN': '复选框组',
+        'en-US': 'checkbox group'
       },
       desc: {
-        'zh-CN': '<p>事件</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN':
+          '<p>通过 <code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 <code>checkbox</code> 的描述文本。 <code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>',
+        'en-US':
+          '<p>Manages multiple <code>checkbox</code> elements into a group through the <code>checkbox-group</code> element. In <code>checkbox-group</code> , use <code>v-model</code> to bind variables of the Array type to implement bidirectional binding. The <code>label</code> attribute of the <code>checkbox</code> is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. <code>label</code> corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected. </p>'
       },
-      codeFiles: ['event-change.vue']
+      codeFiles: ['checkbox-group.vue']
     },
     {
       demoId: 'indeterminate',
       name: {
         'zh-CN': '全选与半选',
-        'en-US': 'events'
+        'en-US': 'Set the all-selected and indeterminate state'
       },
       desc: {
         'zh-CN': '<p>全选与半选</p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p></p>'
       },
       codeFiles: ['indeterminate.vue']
     },
     {
-      demoId: 'label',
+      demoId: 'disabled',
       name: {
-        'zh-CN': '选中值设置',
-        'en-US': 'events'
+        'zh-CN': '禁用',
+        'en-US': 'disabled'
       },
       desc: {
-        'zh-CN': '<p>复选框组选中的值设置</p>'
+        'zh-CN': '<p>通过 <code>disabled</code> 设置禁用。</p>',
+        'en-US': '<p>The demo of <code>disabled<code> attribute.</p>'
       },
-      codeFiles: ['label.vue']
+      codeFiles: ['disabled.vue']
     },
     {
-      demoId: 'true-false-label',
+      demoId: 'custom-value',
       name: {
-        'zh-CN': '选中值设置',
-        'en-US': 'events'
+        'zh-CN': '自定义取值',
+        'en-US': 'custom value'
       },
       desc: {
-        'zh-CN': '<p>选中与未选中的值设置</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 <code>true-label</code> 自定义选中值，<code>false-label</code> 自定义未选中值。</p>',
+        'en-US':
+          '<p>Customize the selected value with <code>true-label</code> and the unselected value with <code>false-label</code>.</p>'
       },
       codeFiles: ['true-false-label.vue']
+    },
+    {
+      demoId: 'icon-position',
+      name: {
+        'zh-CN': 'icon对齐方式',
+        'en-US': 'Icon Alignment'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>icon-position</code> 属性设置图标与文本的对齐方式。</p>',
+        'en-US': '<p>Set the alignment of icons and text using the <code>icon-position</code> property.k</p>'
+      },
+      codeFiles: ['icon-position.vue']
+    },
+    {
+      demoId: 'event-change',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>',
+        'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>'
+      },
+      codeFiles: ['event-change.vue']
     }
   ],
   apis: [
@@ -72,8 +102,8 @@ export default {
           type: 'Boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '<p>当前是否勾选,该属性默认为false</p>',
-            'en-US': 'display different button'
+            'zh-CN': '<p>是否选中</p>',
+            'en-US': '<p>whether checked</p>'
           },
           demoId: ''
         },
@@ -82,20 +112,30 @@ export default {
           type: 'Boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '<p>当前是否勾选,该属性默认为false</p>',
-            'en-US': 'display different button'
+            'zh-CN': '<p>是否禁用</p>',
+            'en-US': '<p>whether disabled</p>'
           },
-          demoId: 'label'
+          demoId: 'disabled'
         },
         {
           name: 'false-label',
           type: 'String',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>没有选中时的值</p>',
-            'en-US': 'display different button'
+            'zh-CN': '<p>未选中的值</p>',
+            'en-US': '<p>alue when no option is selected</p>'
           },
-          demoId: 'true-false-label'
+          demoId: 'custom-value'
+        },
+        {
+          name: 'icon-position',
+          type: 'String',
+          defaultValue: 'center',
+          desc: {
+            'zh-CN': "<p>图标与文本的对齐方式，可选值：'center' | 'top'</p>",
+            'en-US': "<p>Alignment of icon and text, optional value: 'center' | 'top'</p>"
+          },
+          demoId: 'icon-position'
         },
         {
           name: 'true-label',
@@ -103,17 +143,18 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '<p>选中时的值</p>',
-            'en-US': 'display different button'
+            'en-US': '<p>selected value</p>'
           },
-          demoId: 'true-false-label'
+          demoId: 'custom-value'
         },
         {
           name: 'indeterminate',
           type: 'Boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '<p>设置 indeterminate 状态，只负责样式控制,该属性默认为false</p>',
-            'en-US': 'display different button'
+            'zh-CN': '<p>设置 indeterminate 状态，只负责样式控制,该属性默认为 false</p>',
+            'en-US':
+              '<p>Setting an indeterminate state, which only controls the style, and this property by default is false.</p>'
           },
           demoId: 'indeterminate'
         },
@@ -123,9 +164,10 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '<p>选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）</p>',
-            'en-US': 'display different button'
+            'en-US':
+              '<p>The value of the selected state (only valid for checkbox-group or when the bound object is of type array)</p>'
           },
-          demoId: 'label'
+          demoId: 'basic-usage'
         },
         {
           name: 'name',
@@ -133,19 +175,19 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '<p>原生 name 属性</p>',
-            'en-US': 'display different button'
+            'en-US': '<p>native name attribute.</p>'
           },
-          demoId: 'label'
+          demoId: ''
         },
         {
-          name: 'value / v-model',
+          name: 'v-model / modelValue',
           type: 'String',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>绑定值</p>',
-            'en-US': 'display different button'
+            'en-US': '<p>value</p>'
           },
-          demoId: 'default'
+          demoId: 'basic-usage'
         }
       ],
       events: [
@@ -155,7 +197,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '<p>当绑定值变化时触发的事件,该事件可获取更新后的值</p>',
-            'en-US': 'Click'
+            'en-US': '<p>This event is triggered when the binding value changes</p>'
           },
           demoId: 'event-change'
         }
@@ -166,8 +208,8 @@ export default {
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>组件默认插槽</p>',
-            'en-US': 'Click'
+            'zh-CN': '<p>标签文本内容</p>',
+            'en-US': '<p>label content</p>'
           },
           demoId: ''
         }