@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,40 @@
+<template>
+  <tiny-base-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-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: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>
+
+<style>
+.drop {
+  background-color: var(--tv-color-bg-3);
+}
+</style>

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

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div>场景 1：远程搜索 (单选)</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 2：远程搜索多选 + 保留搜索关键字</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 3：获焦时触发远程搜索</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 4：失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 5：聚焦时触发搜索，失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-base-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-base-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-base-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-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    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>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <tiny-base-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-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: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <tiny-base-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-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: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
+    <p>默认</p>
+    <tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
+    <p>small</p>
+    <tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
+    <p>mini</p>
+    <tiny-base-select v-model="value4" size="mini" multiple :options="options"> </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect
+  },
+  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>
+[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-default.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <p>场景 1：带标签和提示信息</p>
+    <br />
+    <tiny-base-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1">
+        <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </tiny-tooltip>
+        <tiny-option v-if="!item.tip" :key="item.value" :label="item.label" :value="item.value">
+          <span class="left">{{ item.label }}</span>
+          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+        </tiny-option>
+      </template>
+    </tiny-base-select>
+    <br /><br />
+
+    <p>场景 2：选项双行</p>
+    <br />
+    <tiny-base-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyTag,
+    TinyTooltip
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京', tag: 'New', tip: '自定义提示' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [
+        { value: '选项 1', label: '子网 1（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 2', label: '子网 2（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 3', label: '子网 3（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 4', label: '子网 4（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 5', label: '子网 5（192.168.0.1/24）', desc: '可用 IP 数 250' }
+      ],
+      value1: '选项 1',
+      value2: '选项 1'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+.tiny-option {
+  .left {
+    margin-right: 8px;
+  }
+
+  p {
+    height: 18px;
+    line-height: 18px;
+    margin: 6px;
+  }
+}
+</style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <tiny-base-select v-model="value">
+    <template #empty>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyButton
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+
+.custom-empty {
+  text-align: center;
+  padding: 20px;
+
+  .tiny-button {
+    margin-top: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <tiny-base-select v-model="value">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #footer>
+      <div class="select-footer">
+        <tiny-button type="success" round> 底部插槽 </tiny-button>
+      </div>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+.select-footer {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+</style>