@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <p>场景 1：默认</p>
+    <br />
+    <tiny-select v-model="value">
+      <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-select v-model="value" no-data-text="暂无数据">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 3：显示空数据图片</p>
+    <br />
+    <tiny-select v-model="value" no-data-text="None" :show-empty-image="true">
+      <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: ''
+    }
+  }
+}
+</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/optimization.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <p>单选：</p>
+    <br />
+    <tiny-select v-model="value1" :options="options" filterable optimization @change="onChange"></tiny-select>
+    <br /><br />
+    <p>多选：</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      optimization
+      filterable
+      multiple
+      collapse-tags
+      :multiple-limit="5"
+      :options="options"
+      @change="onChange"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyModal } from '@opentiny/vue'
+
+const buildOptions = () =>
+  Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项 ${i}","label":"北京 ${i}"}`))
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      options: buildOptions()
+    }
+  },
+  methods: {
+    onChange(value) {
+      TinyModal.message({
+        message: JSON.stringify(value),
+        status: 'info'
+      })
+    }
+  }
+}
+</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/option-group.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div>场景 1：分组 + 多选 + 面板可搜索</div>
+    <br />
+    <tiny-select v-model="value2" multiple filterable :searchable="true">
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：单选分组</div>
+    <br />
+    <tiny-select v-model="value1" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：分组 + 多选</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：分组 + 多选 + 可搜索</div>
+    <br />
+    <tiny-select v-model="value2" filterable multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyOptionGroup
+  },
+  data() {
+    return {
+      value1: [],
+      value2: '',
+      options3: [
+        {
+          label: '热门城市',
+          disabled: true,
+          options: [
+            { value: 'Shanghai', label: '上海' },
+            { value: 'Beijing', label: '北京' }
+          ]
+        },
+        {
+          label: '城市名',
+          options: [
+            { value: 'Chengdu', label: '成都' },
+            { value: 'Shenzhen', label: '深圳' },
+            { value: 'Guangzhou', label: '广州' },
+            { value: 'Dalian', label: '大连' },
+            { value: 'Chongqing', label: '重庆' },
+            { value: 'Xianggang', label: '香港' },
+            { value: 'Aomen', label: '澳门' },
+            { value: 'Wulumuqi', label: '乌鲁木齐' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/popup-style-position.vue

@@ -0,0 +1,40 @@
+<template>
+  <tiny-select v-model="value" popper-class="drop" :popper-append-to-body="false" placement="top">
+    <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: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+  margin-top: 30px;
+}
+</style>
+
+<style>
+.drop {
+  background-color: var(--tv-color-bg-3);
+}
+</style>

package/demos/mobile-first/app/select-wrapper/remote-method.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div>场景 1：远程搜索 (单选)</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      filterable
+      remote
+      :remote-method="remoteMethod1"
+      :loading="loading1"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：远程搜索多选 + 保留搜索关键字</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      filterable
+      multiple
+      remote
+      reserve-keyword
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod2"
+      :loading="loading2"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：获焦时触发远程搜索</div>
+    <br />
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      multiple
+      filterable
+      remote
+      :remote-config="{ clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod4"
+    >
+      <tiny-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：聚焦时触发搜索，失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value5"
+      multiple
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod5"
+      :loading="loading5"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+
+    <br />
+    <br />
+    <div>场景 6：远程搜索配置 trim 属性去除绑定值空格</div>
+    <br />
+    <tiny-button @click="trim = !trim">trim 为：{{ trim }}</tiny-button>
+    <tiny-button @click="changeVal">改变成有空格的值</tiny-button>
+    <tiny-button @click="resetVal">重置绑定值</tiny-button>
+    <br />
+    <br />
+    <tiny-select
+      v-model="value6"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod6"
+      :loading="loading5"
+      loading-text="Loading..."
+      :trim="trim"
+    >
+      <tiny-option v-for="item in options6" :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 {
+      loading1: false,
+      loading2: false,
+      loading3: false,
+      loading4: false,
+      loading5: false,
+      value1: '',
+      value2: [],
+      value3: '',
+      value4: [],
+      value5: [],
+      value6: '',
+      options1: [],
+      options2: [],
+      options3: [],
+      options4: [],
+      options5: [],
+      options6: [],
+      list: [],
+      trim: false
+    }
+  },
+  mounted() {
+    const states = [
+      'Alabama',
+      'Alaska',
+      'Arizona',
+      'Arkansas',
+      'California',
+      'Colorado',
+      'Connecticut',
+      'Delaware',
+      'Florida',
+      'Georgia',
+      'Hawaii',
+      'Idaho',
+      'Illinois',
+      'Indiana',
+      'Iowa',
+      'Kansas',
+      'Kentucky',
+      'Louisiana',
+      'Maine',
+      'Maryland',
+      'Massachusetts',
+      'Michigan',
+      'Minnesota',
+      'Mississippi',
+      'Missouri',
+      'Montana',
+      'Nebraska',
+      'Nevada',
+      'New Hampshire',
+      'New Jersey',
+      'New Mexico',
+      'New York',
+      'North Carolina',
+      'North Dakota',
+      'Ohio',
+      'Oklahoma',
+      'Oregon',
+      'Pennsylvania',
+      'Rhode Island',
+      'South Carolina',
+      'South Dakota',
+      'Tennessee',
+      'Texas',
+      'Utah',
+      'Vermont',
+      'Virginia',
+      'Washington',
+      'West Virginia',
+      'Wisconsin',
+      'Wyoming'
+    ]
+
+    this.list = states.map((item) => {
+      return { value: item, label: item }
+    })
+  },
+  methods: {
+    remoteMethod1(query) {
+      if (query !== undefined) {
+        this.loading1 = true
+        setTimeout(() => {
+          this.loading1 = false
+          this.options1 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options1 = []
+      }
+    },
+    remoteMethod2(query) {
+      if (query !== undefined) {
+        this.loading2 = true
+        setTimeout(() => {
+          this.loading2 = false
+          this.options2 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options2 = []
+      }
+    },
+    remoteMethod3(query) {
+      if (query !== undefined) {
+        this.loading3 = true
+        setTimeout(() => {
+          this.loading3 = false
+          this.options3 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 300)
+      } else {
+        this.options3 = []
+      }
+    },
+    remoteMethod4(query) {
+      if (query !== undefined) {
+        this.loading4 = true
+        setTimeout(() => {
+          this.loading4 = false
+          this.options4 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options4 = []
+      }
+    },
+    remoteMethod5(query) {
+      if (query !== undefined) {
+        this.loading5 = true
+        setTimeout(() => {
+          this.loading5 = false
+          this.options5 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options5 = []
+      }
+    },
+    remoteMethod6(query) {
+      if (query !== undefined) {
+        setTimeout(() => {
+          this.options6 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options6 = []
+      }
+    },
+    changeVal() {
+      this.value6 = '        Wyoming'
+    },
+    resetVal() {
+      this.value6 = ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/show-alloption.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" multiple :show-alloption="false">
+    <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: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/show-tip.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-select v-model="value" multiple show-overflow-tooltip style="width: 200px">
+    <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: ''
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <p>medium</p>
+    <br />
+    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>small</p>
+    <br />
+    <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
+    <p>mini</p>
+    <br />
+    <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2'],
+      value3: ['选项 1', '选项 2'],
+      value4: ['选项 1', '选项 2']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>