@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/base-select/copy-multi.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <p>场景 1：多选复制单个标签</p>
+    <tiny-base-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景 2：多选一键复制所有标签</p>
+    <tiny-base-select ref="selectCopyable" v-model="value2" multiple copyable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景 3：多选设置复制文本分隔符</p>
+    <tiny-base-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>复制到此处：</p>
+    <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: ['选项 1'],
+      value2: ['选项 1', '选项 2'],
+      copyValue: ''
+    }
+  }
+}
+</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/copy-single.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <p>场景 1：单选无需配置可复制</p>
+    <tiny-base-select v-model="value1" :options="options1"> </tiny-base-select>
+    <p>场景 2：单选可搜索配置 allow-copy 可复制</p>
+    <tiny-base-select
+      ref="selectRef"
+      v-model="value1"
+      :options="options1"
+      filterable
+      :filter-method="filter"
+      allow-copy
+    >
+    </tiny-base-select>
+
+    <p>场景 3：单选远程搜索配置 allow-copy 可复制</p>
+    <tiny-base-select
+      v-model="value2"
+      filterable
+      remote
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod"
+      :loading="loading"
+      loading-text="Loading..."
+      allow-copy
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p class="font-style">粘贴至此处：</p>
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [],
+      value1: '选项 1',
+      value2: 'Alabama',
+      inputVal: '',
+      loading: false,
+      list: []
+    }
+  },
+  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: {
+    filter(value) {
+      const select = this.$refs.selectRef
+
+      if (value) {
+        select.state.cachedOptions.forEach((item) => {
+          item.state.visible = item.label.includes(value)
+        })
+      } else {
+        select.state.cachedOptions.forEach((item) => {
+          item.state.visible = true
+        })
+      }
+    },
+    remoteMethod(query) {
+      if (query !== undefined) {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+          this.options2 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options2 = []
+      }
+    }
+  }
+}
+</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/disabled.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <br />
+    <div>场景 1：下拉禁用</div>
+    <br />
+    <tiny-base-select v-model="value1" disabled autocomplete>
+      <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" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 3：单选 + 下拉某项禁用</div>
+    <br />
+    <tiny-base-select v-model="value3">
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 4：多选 + 禁用项默认选中</div>
+    <br />
+    <tiny-base-select v-model="value4" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 5：多选 hover-expand 模式下禁用</div>
+    <br />
+    <tiny-base-select
+      v-model="value5"
+      placeholder="请选择"
+      multiple
+      disabled
+      hover-expand
+      disabled-tooltip-content="我是自定义内容"
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆重庆超长超长超长超长超长超长超长超长超长' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海', disabled: true },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆', disabled: true },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: '',
+      value2: ['选项 2'],
+      value3: '',
+      value4: ['选项 2', '选项 3'],
+      value5: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div>单选</div>
+    <br />
+    <tiny-base-select
+      v-model="value1"
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @clear="clear"
+      @dropdown-click="dropdownClick"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>多选</div>
+    <br />
+    <tiny-base-select
+      v-model="value2"
+      multiple
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag"
+      @dropdown-click="dropdownClick"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyModal } 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: '深圳' }
+      ],
+      value1: '',
+      value2: []
+    }
+  },
+  methods: {
+    change() {
+      TinyModal.message({
+        message: '触发 change 事件',
+        status: 'info'
+      })
+    },
+    clear() {
+      TinyModal.message({
+        message: '触发 clear 事件',
+        status: 'info'
+      })
+    },
+    focus() {
+      TinyModal.message({
+        message: '触发 focus 事件'
+      })
+    },
+    blur() {
+      TinyModal.message({
+        message: '触发 blur 事件',
+        status: 'info'
+      })
+    },
+    removeTag() {
+      TinyModal.message({
+        message: '触发 remove-tag 事件',
+        status: 'info'
+      })
+    },
+    visibleChange() {
+      TinyModal.message({
+        message: '触发 visible-change 事件',
+        status: 'info'
+      })
+    },
+    dropdownClick() {
+      TinyModal.message({
+        message: '触发 dropdown-click 事件',
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <p>场景 1：组件默认过滤</p>
+    <tiny-base-select v-model="value1" ref="selectRef" filterable no-match-text="No Match">
+      <tiny-option
+        v-for="item in options"
+        v-show="!item.filter"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </tiny-option>
+    </tiny-base-select>
+    <p>场景 2：自定义过滤</p>
+    <tiny-base-select
+      v-model="value2"
+      ref="customFilterRef"
+      filterable
+      :filter-method="customFilterMethod"
+      clearable
+      no-match-text="No Match"
+    >
+      <tiny-option
+        v-for="item in options"
+        v-show="!item.filter"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </tiny-option>
+    </tiny-base-select>
+  </div>
+</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: '深圳' }
+      ],
+      value1: '',
+      value2: ''
+    }
+  },
+  methods: {
+    customFilterMethod(searchValue) {
+      const customFilterRef = this.$refs.customFilterRef
+
+      if (searchValue) {
+        customFilterRef.state.cachedOptions.forEach((item) => {
+          item.state.visible = item.label.includes(searchValue)
+        })
+      } else {
+        customFilterRef.state.cachedOptions.forEach((item) => {
+          item.state.visible = true
+        })
+      }
+    }
+  }
+}
+</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/filter-mode.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div>场景 1：过滤器模式 (默认)</div>
+    <br />
+    <tiny-base-select
+      v-model="value"
+      label="地区名称"
+      shape="filter"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <br />
+    <div>场景 2：过滤器模式 (透明)</div>
+    <br />
+    <tiny-base-select
+      v-model="value"
+      label="地区名称"
+      shape="filter"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+      blank
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</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/hide-drop.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-base-select v-model="value" :hide-drop="true">
+    <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/is-drop-inherit-width.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <p>场景 1：默认下拉弹框宽度由内容撑开：</p>
+    <tiny-base-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景 2：下拉弹框宽度与输入框一致：</p>
+    <tiny-base-select v-model="value" is-drop-inherit-width>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</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;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>