@opentiny/vue-docs 3.27.2 → 3.28.0

package/demos/mobile-first/app/base-select/manual-focus-blur.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="demo1">
+      <div>场景 1：默认 focus() 后仅聚焦，不下拉</div>
+      <br />
+      <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur1"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-base-select v-model="value" ref="drop1">
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-base-select>
+    </div>
+    <br />
+    <div class="demo2">
+      <div>场景 2：配置 filterable，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur2"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-base-select v-model="value" ref="drop2" filterable>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-base-select>
+    </div>
+    <br />
+    <div class="demo3">
+      <div>场景 3：配置 automaticDropdown，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus3"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur3"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-base-select v-model="value" ref="drop3" automatic-dropdown>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-base-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    handleFocus1() {
+      this.$refs.drop1.focus()
+    },
+    handleBlur1() {
+      this.$refs.drop1.blur()
+    },
+    handleFocus2() {
+      this.$refs.drop2.focus()
+    },
+    handleBlur2() {
+      this.$refs.drop2.blur()
+    },
+    handleFocus3() {
+      this.$refs.drop3.focus()
+    },
+    handleBlur3() {
+      this.$refs.drop3.blur()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+.tiny-button {
+  max-width: unset;
+  margin-bottom: 10px;
+}
+</style>

package/demos/mobile-first/app/base-select/map-field.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <p>场景 1：配置式配置映射字段</p>
+    <tiny-base-select v-model="value1" multiple :options="options" value-field="val" text-field="text">
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect
+  },
+  data() {
+    return {
+      value1: ['选项 1', '选项 2'],
+      options: [
+        { val: '选项 1', text: '北京' },
+        { val: '选项 2', text: '上海' },
+        { val: '选项 3', text: '天津' },
+        { val: '选项 4', text: '重庆' },
+        { val: '选项 5', text: '深圳' },
+        { val: '选项 6', text: '南京' },
+        { val: '选项 7', text: '成都' }
+      ]
+    }
+  }
+}
+</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/memoize-usage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tiny-base-select v-model="value">
+      <tiny-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        @click.native="clickItem(item.value)"
+        :highlight-class="item._highlightClass"
+      ></tiny-option>
+    </tiny-base-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+import { Memorize } from '@opentiny/utils'
+
+const MemorizeInstance = new Memorize({ key: 'test456' })
+
+const options = MemorizeInstance.assemble([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options,
+      value: '选项 3',
+      cacheValue: []
+    }
+  },
+  methods: {
+    clickItem(value) {
+      MemorizeInstance.updateByKey(value)
+      this.cacheValue = window.localStorage.getItem('tiny_memorize_test456')
+    }
+  },
+  mounted() {
+    window.localStorage.setItem('tiny_memorize_test456', '')
+  }
+}
+</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/multiple-mix.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="demo-box">
+    <tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
+    <br />
+    <br />
+    <p>边框为表单范围</p>
+    <br />
+    <br />
+    <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
+      <tiny-form-item label="label 垂直布局">
+        <div>
+          <tiny-base-select v-model="formData.select1" multiple hover-expand>
+            <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="formData.select1" multiple hover-expand>
+            <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </tiny-option>
+          </tiny-base-select>
+        </div>
+      </tiny-form-item>
+      <p>&nbsp;</p>
+    </tiny-form>
+    <br />
+    <br />
+    <tiny-form class="custom-form" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="form 超出隐藏">
+        <tiny-base-select v-model="formData.select1" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+    </tiny-form>
+    <br />
+    <tiny-form class="custom-form visible-form" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="自定义-超出显示">
+        <tiny-base-select v-model="formData.select1" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+    </tiny-form>
+    <br />
+    <tiny-form class="custom-form" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="默认尺寸">
+        <tiny-base-select v-model="formData.select1" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+      <p>&nbsp;</p>
+    </tiny-form>
+    <br />
+    <br />
+
+    <tiny-form class="custom-form" size="mini" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="mini" size="mini">
+        <tiny-base-select v-model="formData.select1" size="mini" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+      <p>&nbsp;</p>
+    </tiny-form>
+    <br />
+    <br />
+
+    <tiny-form class="custom-form" size="small" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="small" size="small">
+        <tiny-base-select v-model="formData.select1" size="small" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+      <p>&nbsp;</p>
+    </tiny-form>
+    <br />
+    <br />
+
+    <tiny-form class="custom-form" size="medium" :inline="inline" :display-only="displayOnly">
+      <tiny-form-item label="medium" size="medium">
+        <tiny-base-select v-model="formData.select1" size="medium" multiple hover-expand>
+          <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+        </tiny-base-select>
+      </tiny-form-item>
+      <p>&nbsp;</p>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { TinyForm, TinyFormItem, TinyOption, TinyButton, TinyBaseSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      displayOnly: true,
+      top: false,
+      inline: false,
+      size: '',
+      options: [
+        {
+          value: '选项 1',
+          label: '北京'
+        },
+        {
+          value: '选项 2',
+          label: '上海'
+        },
+        {
+          value: '选项 3',
+          label: '天津'
+        },
+        {
+          value: '选项 4',
+          label: '重庆'
+        },
+        {
+          value: '选项 5',
+          label: '深圳'
+        },
+        {
+          value: '选项 6',
+          label: '杭州'
+        },
+        {
+          value: '选项 7',
+          label: '宇宙无敌老面小馒头'
+        }
+      ],
+      formData: {
+        select1: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-box {
+  width: 350px;
+
+  .custom-form {
+    border: 1px solid #fdf4f4;
+    padding: 10px;
+  }
+
+  .visible-form {
+    overflow: visible;
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <br />
+    <div>场景 1：多选</div>
+    <br />
+    <tiny-base-select v-model="value1" multiple searchable>
+      <tiny-option v-for="item in options1" :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="value2" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :required="item.required"
+      >
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <br />
+    <div>场景 3：配置式必选</div>
+    <br />
+    <tiny-base-select v-model="value3" multiple :options="options2"> </tiny-base-select>
+    <br />
+    <br />
+    <br />
+    <div>场景 4：多选个数限制</div>
+    <br />
+    <tiny-base-select v-model="value4" multiple :multiple-limit="2" show-limit-text>
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <br />
+    <div>场景 5：自定义图标 + 自定义样式</div>
+    <br />
+    <tiny-base-select
+      v-model="value4"
+      multiple
+      :dropdown-icon="iconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+      <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'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' },
+        { value: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      options2: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳', required: true },
+        { value: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2'],
+      value3: ['选项 1', '选项 2'],
+      value4: [],
+      iconPopup: iconPopup()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/base-select/native-properties.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-base-select v-model="value" placeholder="自定义 placeholder" name="inputName" autocomplete>
+    <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/no-data-text.vue

@@ -0,0 +1,40 @@
+<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" no-data-text="暂无数据">
+      <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: ''
+    }
+  }
+}
+</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/optimization.vue

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

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div>场景 1：分组 + 多选 + 面板可搜索</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 2：单选分组</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 3：分组 + 多选</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景 4：分组 + 多选 + 可搜索</div>
+    <br />
+    <tiny-base-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-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    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>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>