@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/base-select/slot-label.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="demo-select-slot-label">
+    <tiny-base-select v-model="value1" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <tiny-base-select v-model="value2" :options="options" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: '选项 1',
+          label: '北京超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+        },
+        {
+          value: '选项 2',
+          label: '上海',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
+        },
+        {
+          value: '选项 3',
+          label: '天津',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/2.jpg`
+        },
+        {
+          value: '选项 4',
+          label: '重庆',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/3.jpg`
+        },
+        {
+          value: '选项 5',
+          label: '深圳',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/4.jpg`
+        }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 3']
+    }
+  },
+  methods: {
+    imgSrc(value) {
+      const option = this.options.find((option) => option.value === value)
+
+      return option && option.src
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+
+.demo-select-slot-label.label-user-head,
+.tiny-tooltip .label-user-head {
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+</style>

package/demos/mobile-first/app/base-select/slot-panel.vue

@@ -0,0 +1,155 @@
+<template>
+  <p>场景 1：下拉树单选</p>
+  <tiny-base-select v-model="value">
+    <template #panel="{ methods: { updateSelectedData, hidePanel } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        @node-click="
+          (data) => {
+            updateSelectedData({
+              ...data,
+              currentLabel: data.label,
+              value: data.id,
+              state: {
+                currentLabel: data.label
+              }
+            })
+
+            hidePanel()
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <p>场景 2：下拉树多选</p>
+  <tiny-base-select v-model="value2" multiple>
+    <template #panel="{ methods: { updateSelectedData } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedNodes }) => {
+            updateSelectedData(
+              checkedNodes.map((node) => {
+                return {
+                  ...node,
+                  currentLabel: node.label,
+                  value: node.id,
+                  isTree: true
+                }
+              })
+            )
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <p>场景 3：下拉树可搜索</p>
+  <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
+    <template #panel="{ methods: { updateSelectedData, hidePanel } }">
+      <tiny-tree
+        ref="treeRef"
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :filter-node-method="filter"
+        @node-click="
+          (data) => {
+            updateSelectedData({
+              ...data,
+              currentLabel: data.label,
+              value: data.id,
+              state: {
+                currentLabel: data.label
+              }
+            })
+
+            hidePanel()
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyTree } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyTree
+  },
+  data() {
+    return {
+      value: '',
+      value2: '',
+      value3: '',
+      treeData: [
+        {
+          id: 1,
+          label: '一级 1',
+          children: [
+            {
+              id: 4,
+              label: '二级 1-1',
+              children: [
+                {
+                  id: 9,
+                  label: '三级 1-1-1'
+                },
+                {
+                  id: 10,
+                  label: '三级 1-1-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '一级 2',
+          children: [
+            {
+              id: 5,
+              label: '二级 2-1'
+            },
+            {
+              id: 6,
+              label: '二级 2-2'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    filterMethod(value) {
+      this.$refs.treeRef.filter(value)
+    },
+    filter(value, data) {
+      if (!value) return true
+
+      return data.label.includes(value)
+    }
+  }
+}
+</script>
+
+<style 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/slot-prefix.vue

@@ -0,0 +1,39 @@
+<template>
+  <tiny-base-select v-model="value" multiple collapse-tags>
+    <template #prefix>
+      <tiny-icon-location></tiny-icon-location>
+    </template>
+    <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'
+import { iconLocation } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyIconLocation: iconLocation()
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/slot-reference.vue

@@ -0,0 +1,41 @@
+<template>
+  <tiny-base-select v-model="value">
+    <template #reference>
+      <tiny-icon-setting class="custom-reference"></tiny-icon-setting>
+    </template>
+    <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'
+import { iconSetting } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyIconSetting: iconSetting()
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-reference {
+  font-size: 24px;
+  fill: #8b949e;
+  cursor: pointer;
+}
+</style>

package/demos/mobile-first/app/base-select/tag-type.vue

@@ -0,0 +1,36 @@
+<template>
+  <tiny-base-select v-model="value" multiple tag-type="success">
+    <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: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      value: ['选项 1', '选项 2']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/webdoc/base-select.cn.md

@@ -0,0 +1,7 @@
+---
+title: BaseSelect 基础选择器
+---
+
+# BaseSelect 基础选择器
+
+BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小，如果你不需要下拉树和下拉表格功能，推荐使用 BaseSelect 组件，而不是 Select 组件。

package/demos/mobile-first/app/base-select/webdoc/base-select.en.md

@@ -0,0 +1,7 @@
+---
+title: BaseSelect
+---
+
+# BaseSelect
+
+BaseSelect is a UI component that displays and selects data from a drop-down list box.