@opentiny/vue-docs 3.17.2 → 3.17.4

package/demos/pc/app/tree-select/map-field-composition-api.vue

@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/map-field.vue

@@ -0,0 +1,62 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/multiple-composition-api.vue

@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/multiple.vue

@@ -0,0 +1,62 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/native-properties-composition-api.vue

@@ -0,0 +1,61 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    placeholder="请选择一个选项"
+    name="inputName"
+    autocomplete
+  ></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/native-properties.vue

@@ -0,0 +1,68 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    placeholder="请选择一个选项"
+    name="inputName"
+    autocomplete
+  ></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/panel-style-composition-api.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <p>场景1：不挂载在 body 元素上</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
+    <p>场景2：自定义类名，修改阴影样式</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
+    <p>场景3：从上方弹出面板</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
+
+<style>
+.drop {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</style>

package/demos/pc/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>
+    <p>场景2：自定义类名，修改阴影样式</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
+    <p>场景3：从上方弹出面板</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
+
+<style>
+.drop {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</style>

package/demos/pc/app/tree-select/reference-style-composition-api.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>场景1：自定义图标 + 自定义样式</p>
+    <tiny-tree-select
+      v-model="value"
+      :tree-op="treeOp"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-tree-select>
+    <p>场景2：标签类型</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
+    <p>场景3：下划线类型</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+const tinyIconPopup = iconPopup()
+const value = ref('')
+const value2 = ref([])
+
+const treeOp = ref({
+  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>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/reference-style.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <p>场景1：自定义图标 + 自定义样式</p>
+    <tiny-tree-select
+      v-model="value"
+      :tree-op="treeOp"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-tree-select>
+    <p>场景2：标签类型</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
+    <p>场景3：下划线类型</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      tinyIconPopup: iconPopup(),
+      value: '',
+      value2: [],
+      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>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>