@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/apis/select.js

@@ -16,7 +16,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'all-text',
-          mfDemo: 'all-text'
+          mfDemo: 'all-text',
+          hideSaas: true
         },
         {
           name: 'show-all-text-tag',
@@ -29,7 +30,8 @@ export default {
               'Specifies whether only the tag specified by all-text is displayed in the text box after the multi-select mode is specified. The default value is <code>false</code>. All options are displayed in the text box cyclically.'
           },
           mode: ['pc'],
-          pcDemo: 'all-text'
+          pcDemo: 'all-text',
+          hideSaas: true
         },
         {
           name: 'allow-copy',
@@ -93,7 +95,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'clear-no-match-value',
-          mfDemo: 'clear-no-match-value'
+          mfDemo: 'clear-no-match-value',
+          hideSaas: true
         },
         {
           name: 'clearable',
@@ -236,7 +239,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'input-box-type',
-          mfDemo: 'input-box-type'
+          mfDemo: 'input-box-type',
+          hideSaas: true
         },
         {
           name: 'is-drop-inherit-width',
@@ -285,7 +289,8 @@ export default {
               'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
           },
           mode: ['pc'],
-          pcDemo: 'collapse-tags'
+          pcDemo: 'collapse-tags',
+          hideSaas: true
         },
         {
           name: 'modelValue / v-model',
@@ -507,7 +512,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'searchable',
-          mfDemo: 'searchable'
+          mfDemo: 'searchable',
+          hideSaas: true
         },
         {
           name: 'show-alloption',
@@ -531,7 +537,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'no-data-text',
-          mfDemo: 'no-data-text'
+          mfDemo: 'no-data-text',
+          hideSaas: true
         },
         {
           name: 'size',
@@ -568,7 +575,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'tag-type',
-          mfDemo: 'tag-type'
+          mfDemo: 'tag-type',
+          hideSaas: true
         },
         {
           name: 'max-tag-width',
@@ -582,7 +590,8 @@ export default {
           pcDemo: '',
           meta: {
             stable: '3.22.0'
-          }
+          },
+          hideSaas: true
         },
         {
           name: 'text-field',
@@ -670,7 +679,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'collapse-tags',
-          mfDemo: 'collapse-tags'
+          mfDemo: 'collapse-tags',
+          hideSaas: true
         },
         {
           name: 'show-limit-text',
@@ -680,10 +690,11 @@ export default {
             'zh-CN':
               '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性。',
             'en-US':
-              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+              'Display the proportion of the number of selected items and the maximum number of options available in the multiple-choice box. This attribute has a higher priority than the <code>show-proportion</code> attribute.'
           },
           mode: ['pc'],
-          pcDemo: 'multiple'
+          pcDemo: 'multiple',
+          hideSaas: true
         },
         {
           name: 'init-label',
@@ -905,7 +916,8 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-reference',
-          mfDemo: 'slot-reference'
+          mfDemo: 'slot-reference',
+          hideSaas: true
         }
       ]
     },

package/demos/apis/switch.js

@@ -111,6 +111,21 @@ export default {
           pcDemo: 'custom-true-false-value',
           mfDemo: ''
         },
+        {
+          name: 'width',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义开关的宽度',
+            'en-US': 'Define the width of the switch'
+          },
+          mode: ['pc'],
+          mfDemo: '',
+          pcDemo: 'width',
+          meta: {
+            stable: '3.28.0'
+          }
+        },
         {
           name: 'types',
           type: 'string',

package/demos/apis/time-line.js

@@ -244,6 +244,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'vertical-timeline',
           mfDemo: ''
+        },
+        {
+          name: 'description',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '时间线描述',
+            'en-US': 'Timeline description'
+          },
+          mode: ['pc', 'mobile-first'],
+          mfDemo: '',
+          meta: {
+            stable: '3.28.0'
+          }
         }
       ],
       events: [

package/demos/apis/tree-menu.js

@@ -660,6 +660,9 @@ interface ITreeNodeData {
   "number"?: number | string
   // 自定义每个节点的图标
   "customIcon": Component 
+  // 节点是否可以点击
+  "disabled"?: string
+ 
 }        
 `
     },
@@ -668,10 +671,10 @@ interface ITreeNodeData {
       type: 'interface',
       code: `
 interface IProps {
-  "label"?: string
-  "children"?: string
-  "disabled": string
-  "isLeaf": string
+  "label": string
+  "children": string
+  "disabled"?: string
+  "isLeaf"?: string
 }        
 `
     },

package/demos/apis/tree-select.js

@@ -264,6 +264,44 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'map-field'
+        },
+        {
+          name: 'lazy',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否懒加载子节点，配合 load 属性使用',
+            'en-US': 'Whether to lazily load child nodes and use them in conjunction with the load attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
+        },
+        {
+          name: 'load',
+          type: '(node, resolve) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '加载子树数据的方法。点击节点后，组件开始调用load方法，只有在load函数内调用resolve(data)，才表示返回下级的数据成功。',
+            'en-US':
+              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
+        },
+        {
+          name: 'after-load',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '节点懒加载完成后的回调函数',
+            'en-US': 'Callback function after node lazy loading is completed'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy',
+          mfDemo: 'lazy'
         }
       ]
     }
@@ -281,6 +319,9 @@ interface ITreeNode {
 
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
+  lazy?: boolean // 是否懒加载子节点
+  load?: (node: ITreeNodeVm, resolve: IResolveType) => void // 加载子树数据的方法
+  afterLoad?: (data: any) => void // 节点懒加载完成后的回调函数
 }
 `
     },

package/demos/mobile-first/app/base-select/all-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div style="margin: 16px 0">全选后，显示多个 tag</div>
+    <tiny-base-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
+    <tiny-base-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      value: [],
+      value1: [],
+      options: [
+        { value: '选项 1', label: '黄金糕' },
+        { value: '选项 2', label: '双皮奶' },
+        { value: '选项 3', label: '蚵仔煎' },
+        { value: '选项 4', label: '龙须面' },
+        { value: '选项 6', label: '螺蛳粉' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/allow-create.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div>场景 1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '',
+      boxVisibility: false,
+      optionLabel: '',
+      optionValue: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/automatic-dropdown.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <p>场景 1：默认不可搜索时，获取焦点不下拉</p>
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectOnlyFocusRef">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景 2：设置不可搜索时，获取焦点并自动下拉</p>
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    handleFocus1() {
+      this.$refs.selectOnlyFocusRef.focus()
+    },
+    handleFocus2() {
+      this.$refs.selectAutoDropRef.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

package/demos/mobile-first/app/base-select/basic-usage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景 1：标签式</div>
+    <br />
+    <tiny-base-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 2：配置式</div>
+    <br />
+    <tiny-base-select v-model="value" :options="options"> </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京', icon: iconFile() },
+        { value: '选项 2', label: '上海', icon: iconFile() },
+        { value: '选项 3', label: '天津', icon: iconFile() },
+        { value: '选项 4', label: '重庆', icon: iconFile() },
+        { value: '选项 5', label: '深圳', icon: iconFile() }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/binding-obj.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-base-select v-model="value" value-key="val">
+      <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
+    </tiny-base-select>
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { obj: { val: '选项 1', id: 1 }, text: '北京' },
+        { obj: { val: '选项 2', id: 2 }, text: '上海' },
+        { obj: { val: '选项 3', id: 3 }, text: '天津' },
+        { obj: { val: '选项 4', id: 4 }, text: '重庆' },
+        { obj: { val: '选项 5', id: 5 }, text: '深圳' }
+      ],
+      value: { val: '选项 3', id: 3 }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/mobile-first/app/base-select/cache-usage.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <tiny-base-select
+      v-model="value"
+      clearable
+      :options="options"
+      :cache-op="cacheOp"
+      @change="cacheChange"
+    ></tiny-base-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect
+  },
+  data() {
+    return {
+      cacheOp: {
+        key: 'test'
+      },
+      cacheValue: '',
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '选项 3'
+    }
+  },
+  methods: {
+    cacheChange() {
+      this.cacheValue = window.localStorage.getItem(`tiny_memorize_${this.cacheOp.key}`)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/mobile-first/app/base-select/clear-no-match-value.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <p>
+      场景 1：单选，val 找不到匹配值，val 为： ,<span class="val">{{ val }}</span>
+    </p>
+    <tiny-base-select v-model="val" :clear-no-match-value="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+
+    <p>
+      场景 2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
+    <tiny-base-select v-model="multiVal" :clear-no-match-value="true" multiple>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      val: '11',
+      multiVal: ['选项 2', '11']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/mobile-first/app/base-select/clearable.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-base-select v-model="value" clearable>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-base-select>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '选项 3'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/collapse-tags.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <br />
+    <div>场景 1：collapse-tags 折叠</div>
+    <br />
+    <tiny-base-select v-model="value1" :show-proportion="true" multiple collapse-tags>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 2：hover-expand 折叠</div>
+    <br />
+    <tiny-base-select v-model="value2" multiple hover-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆超长超长超长超长超长超长超长超长超长' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2', '选项 3', '选项 4']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>