@opentinyvue/vue-docs 3.27.6 → 3.28.1

package/demos/apis/base-select.js

@@ -598,9 +598,9 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN':
-              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性，同时设置只',
+              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<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'

package/demos/apis/drawer.js

@@ -207,6 +207,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'tips-props',
           hideSaas: true
+        },
+        {
+          name: 'close-on-press-escape',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'ESC 键关闭抽屉',
+            'en-US': 'ESC key to close drawer'
+          },
+          mode: ['pc'],
+          pcDemo: 'closeOnPressEscape',
+          meta: {
+            stable: '3.28.0'
+          }
         }
       ],
       events: [

package/demos/apis/dropdown.js

@@ -195,7 +195,7 @@ export default {
         },
         {
           name: 'trigger',
-          type: "'hover' | 'click'",
+          type: "'hover' | 'click' | 'contextmenu'",
           defaultValue: "'hover'",
           desc: {
             'zh-CN': '触发下拉的方式',
@@ -203,8 +203,12 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'trigger',
-          mfDemo: ''
+          mfDemo: '',
+          meta: {
+            stable: '3.28.0'
+          }
         },
+
         {
           name: 'type',
           typeAnchorName: 'IButtonType',

package/demos/apis/grid.js

@@ -2784,7 +2784,7 @@ export default {
               "Set the rendering type for table columns; takes precedence over the column's type attribute; cell rendering configuration item, takes precedence over formatText attribute"
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'grid-renderer#renderer-custom-renderer'
+          pcDemo: 'grid-editor#editor-custom-editor-select'
         },
         {
           name: 'required',

package/demos/apis/modal.js

@@ -115,7 +115,7 @@ export default {
         {
           name: 'footer-dragable',
           type: 'boolean',
-          defaultValue: 'true',
+          defaultValue: 'false',
           desc: {
             'zh-CN': '控制底部可拖拽',
             'en-US': 'Control bottom dragable'
@@ -123,6 +123,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'modal-footer'
         },
+        {
+          name: 'header-dragable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '控制标题可拖拽',
+            'en-US': 'Control header dragable'
+          },
+          mode: ['pc'],
+          pcDemo: 'modal-header',
+          meta: {
+            stable: '3.28.0'
+          }
+        },
         {
           name: 'fullscreen',
           type: 'boolean',

package/demos/apis/select-wrapper.js

@@ -680,7 +680,7 @@ 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'

package/demos/apis/select.js

@@ -690,7 +690,7 @@ 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',

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/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/webdoc/base-select.js

@@ -28,14 +28,14 @@ export default {
         'zh-CN': `
             通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。<br>
             通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
-            通过 <code>show-limit-text</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
+            设置 <code>show-limit-text</code> 可展示选中条数和限制总条数的占比，默认为 false 不展示。<br>
             多选时，通过给 option 标签配置 <code>required</code> 或者在 options 配置项中添加 <code>required</code> 属性，来设置必选选项。<br>
             通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式。<br>
         `,
         'en-US': `
             Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag (Tag component).<br>
-            The <code>multiple-limit</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0.
-            The <code>show-limit-text</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.<br>
+            The <code>multiple-limit</code> attribute is used to limit the maximum number of options available. The default value is 0.
+            Set <code>show-limit-text</code> to display the proportion of the number of selected items and the maximum number of options available. The default value is false.
             When multiple options are selected, you can set <code>required</code> for the option tag or add the <code>required</code> attribute to the options configuration item to set mandatory options.<br>
             You can use the <code>dropdown-icon</code> attribute to customize the drop-down icon, and the <code>drop-style</code> attribute to customize the style of the drop-down options.<br>
         `

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div style="margin: 16px 0">全选后，显示多个 tag</div>
+    <tiny-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-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
+    <tiny-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-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div>场景 1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-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-select>
+    <br />
+    <br />
+    <div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-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-select>
+  </div>
+</template>
+
+<script>
+import {
+  TinySelectWrapper as TinySelect,
+  TinyOption,
+  TinyInput,
+  TinyButton,
+  TinyDialogBox,
+  TinyModal
+} from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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: ''
+    }
+  },
+  methods: {
+    handleAddOption() {
+      this.optionValue = ''
+      this.optionLabel = ''
+      this.boxVisibility = true
+    },
+    handleConfirm() {
+      if (!this.optionLabel || !this.optionValue) {
+        TinyModal.message({ message: '选项不能为空！', status: 'warning' })
+        return
+      }
+      this.boxVisibility = false
+      this.options.unshift({
+        value: this.optionValue,
+        label: this.optionLabel
+      })
+      this.$refs.selectDom.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <p>场景 1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-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-select>
+    <br /><br />
+    <p>场景 2：设置不可搜索时，获取焦点并自动下拉</p>
+    <br />
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-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-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景 1：标签式</div>
+    <br />
+    <tiny-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-select>
+    <br />
+    <br />
+    <div>场景 2：配置式</div>
+    <br />
+    <tiny-select v-model="value" :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-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-select>
+    <br /><br />
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p>
+      场景 1：单选，val 找不到匹配值，val 为： ,<span class="val">{{ val }}</span>
+    </p>
+    <br />
+    <tiny-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-select>
+    <br /><br />
+
+    <p>
+      场景 2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
+    <br />
+    <tiny-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-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" clearable>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+</style>