@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/space/space-size.vue

@@ -15,7 +15,7 @@
 
     <!-- 使用 dynamic direction 值 -->
     <tiny-space class="tiny-space" :size="[rowValue, columnValue]" :wrap="true">
-      <tiny-button style="margin: 0" v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
+      <tiny-button v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
     </tiny-space>
   </div>
 </template>

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

@@ -0,0 +1,63 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp"></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: 10,
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <p>场景 1：collapse-tags 折叠</p>
+    <br />
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 2：hover-expand 折叠</p>
+    <br />
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 3：click-expand 折叠</p>
+    <br />
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: [9, 6],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/copy.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <p>场景 1：一键复制所有标签</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 2：设置复制文本分隔符</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <br />
+    <br />
+    <p>粘贴至此处：</p>
+    <tiny-input v-model="inputVal" class="copy-value" type="text"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect,
+    TinyInput
+  },
+  data() {
+    return {
+      value: [9, 6],
+      inputVal: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'],
+.tiny-input {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/disabled.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>场景 1：未选择</p>
+    <tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 2：单选</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 3：多选</p>
+    <tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value1: '',
+      value2: 1,
+      value3: [9, 6],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/lazy.vue

@@ -0,0 +1,59 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" lazy :load="load" :after-load="afterLoad"></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {}
+    }
+  },
+  methods: {
+    // node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+    load(node, resolve) {
+      console.log('即将加载节点下级数据：', node)
+
+      // 通过 level =0 来识别第一次加载
+      if (node.level === 0) {
+        resolve([
+          { value: '1', label: '一级 1' },
+          { value: '2', label: '一级 2' },
+          { value: '3', label: '一级 3' }
+        ])
+      }
+      // 通过 data 有值，识别是用户点击后的加载
+      else if (node.data) {
+        const parentId = node.data.value
+        const parentLabel = node.data.label
+
+        const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+          value: `${parentId}-${num}`,
+          label: `${parentLabel}-${num}`,
+          disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+          isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+        }))
+
+        // 模拟异步返回
+        setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+      }
+    },
+    afterLoad(data) {
+      console.log('afterLoad 属性触发：', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/map-field.vue

@@ -0,0 +1,63 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            val: 1,
+            text: '一级 1',
+            children: [
+              {
+                val: 4,
+                text: '二级 1-1',
+                children: [
+                  {
+                    val: 9,
+                    text: '三级 1-1-1'
+                  },
+                  {
+                    val: 10,
+                    text: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            val: 2,
+            text: '一级 2',
+            children: [
+              {
+                val: 5,
+                text: '二级 2-1'
+              },
+              {
+                val: 6,
+                text: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/multiple.vue

@@ -0,0 +1,63 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: [9, 6],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/native-properties.vue

@@ -0,0 +1,69 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    placeholder="请选择一个选项"
+    name="inputName"
+    autocomplete
+  ></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/panel-style.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <p>场景 1：不挂载在 body 元素上</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 2：自定义类名，修改阴影样式</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 3：从上方弹出面板</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>
+
+<style>
+.drop {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</style>