@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/select-wrapper/init-label.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value"
+      :multiple="false"
+      :grid-op="gridOp"
+      :update-delay="500"
+      :remote-method="remoteMethodInGrid"
+      :remote-config="{
+        autoSearch: true,
+        clearData: true,
+        showIcon: true
+      }"
+      text-field="area"
+      value-field="id"
+      remote
+      render-type="grid"
+      is-drop-inherit-width
+      filterable
+      clearable
+      height="300px"
+      collapse-tags
+      init-label="华南区"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      value: '001',
+      gridOp: {
+        data: [],
+        columns: [
+          { type: 'radio', title: '', width: 60 },
+          { field: 'id', title: 'id', width: 60 },
+          { field: 'area', title: '区域', width: 120 },
+          { field: 'province', title: '省份', width: 120 },
+          { field: 'city', title: '城市', width: 120 }
+        ]
+      },
+      options: [
+        { id: '001', area: '华南区', province: '广东省', city: '深圳 1' },
+        { id: '002', area: '华东区', province: '广东省', city: '深圳市' },
+        { id: '003', area: '华北区', province: '广东省', city: '珠海市' },
+        { id: '004', area: '华北区', province: '广东省', city: '佛山市' },
+        { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+      ]
+    }
+  },
+  methods: {
+    remoteMethodInGrid() {
+      return new Promise((resolve) => {
+        resolve(this.options)
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tiny-select {
+  width: 480px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/is-drop-inherit-width.vue

@@ -0,0 +1,51 @@
+<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" is-drop-inherit-width>
+      <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: '选项 1',
+          label: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京'
+        },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      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/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-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-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-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-select>
+    </div>
+    <br />
+    <div class="demo3">
+      <div>场景 2：配置 automaticDropdown，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus3"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur3"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-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-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+.tiny-button {
+  max-width: unset;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <p>场景 1：配置式配置映射字段</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <br /><br />
+    <p>场景 2：嵌套表格配置映射字段</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      multiple
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      value1: ['选项 1', '选项 2'],
+      value2: ['001', '002'],
+      gridOp: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/memoize-usage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tiny-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-select>
+    <br /><br />
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, 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: {
+    TinySelect,
+    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>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/multiple-mix.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="demo-box">
+    <tiny-button @click="displayOnly = !displayOnly">{{ displayOnly ? '解除' : '设置' }} 只读</tiny-button>
+    <br />
+    <br />
+    <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
+      <tiny-form-item label="单选只读">
+        <tiny-select v-model="formData.value" :options="options"> </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="多选只读">
+        <tiny-select v-model="formData.select1" multiple :options="options" hover-expand> </tiny-select>
+      </tiny-form-item>
+      <br />
+      <br />
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { TinyForm, TinyFormItem, TinySelectWrapper as TinySelect, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinySelect
+  },
+  data() {
+    return {
+      displayOnly: true,
+      options: [
+        {
+          value: '选项 1',
+          label: '北京'
+        },
+        {
+          value: '选项 2',
+          label: '上海'
+        },
+        {
+          value: '选项 3',
+          label: '天津'
+        },
+        {
+          value: '选项 4',
+          label: '重庆'
+        },
+        {
+          value: '选项 5',
+          label: '深圳'
+        },
+        {
+          value: '选项 6',
+          label: '杭州'
+        },
+        {
+          value: '选项 7',
+          label: '宇宙无敌老面小馒头'
+        }
+      ],
+      formData: {
+        value: '选项 1',
+        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/select-wrapper/multiple.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div>场景 1：多选</div>
+    <br />
+    <tiny-select v-model="value1" multiple searchable>
+      <tiny-option
+        v-for="item in options1"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+        :required="item.required"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：必选</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+        :required="item.required"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：配置式必选</div>
+    <br />
+    <tiny-select v-model="value3" multiple :options="options2"> </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：多选个数限制</div>
+    <br />
+    <tiny-select v-model="value4" :options="options1" multiple :multiple-limit="2" show-limit-text> </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：自定义图标 + 自定义样式</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      multiple
+      :options="options1"
+      :dropdown-icon="iconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 6：禁用</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" disabled> </tiny-select>
+    <br />
+    <br />
+    <div>场景 7：只展示</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" display-only> </tiny-select>
+    <br />
+    <br />
+    <div>场景 8：显示全选文本</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" show-all-text-tag> </tiny-select>
+    <br />
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" show-all-text-tag disabled> </tiny-select>
+    <br />
+    <br />
+    <div>场景 9：折叠 tag + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" collapse-tags> </tiny-select>
+    <br />
+    <br />
+    <div>场景 10：悬浮展开 + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" hover-expand> </tiny-select>
+    <br />
+    <br />
+    <div>场景 11：点击展开 + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" click-expand> </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京 (禁用)', disabled: true }, // 禁用项
+        { value: '选项 2', label: '上海 (必选)', required: true }, // 必选项
+        { 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: [],
+      value5: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7'],
+      iconPopup: iconPopup()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <tiny-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-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>