@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/select-wrapper/nest-grid-disable.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div>场景 1：嵌套表格禁用某项（单选）</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+      :radio-config="radioConfig"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：嵌套表格禁用某项（多选）</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      value-field="id"
+      multiple
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+      :select-config="selectConfig"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 3：嵌套表格行选中（单选）</div>
+    <br />
+    <tiny-select
+      v-model="value3"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+      :radio-config="{ trigger: 'row' }"
+      placeholder="请选择"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 4：嵌套表格行选中（多选）</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      value-field="id"
+      multiple
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+      :select-config="{ trigger: 'row' }"
+      placeholder="请选择"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      selectConfig: {
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 0
+        }
+      },
+      radioConfig: {
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 1
+        }
+      },
+      value1: '',
+      value2: [],
+      value3: '',
+      value4: [],
+      gridOpRadio: {
+        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: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 100 },
+          { field: 'province', title: '省份', width: 50 },
+          { field: 'city', title: '城市' }
+        ]
+      },
+      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: 100 },
+          { field: 'province', title: '省份', width: 50 },
+          { field: 'city', title: '城市' }
+        ]
+      }
+    }
+  }
+}
+</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/nest-grid-init-query.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="demo-select">
+    <div>场景 1：下拉表格远程搜索初始化查询（单选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue1"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="false"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：下拉表格远程搜索初始化查询（多选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue2"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="true"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio2"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  created() {
+    this.allData = Array.from({ length: 10000 }, (item, index) => {
+      return {
+        id: '00' + index,
+        area: '华南区' + index,
+        province: '广东省' + index,
+        city: '广州市' + index
+      }
+    })
+  },
+  data() {
+    return {
+      allData: [],
+      radioValue1: '001',
+      radioValue2: ['001', '002'],
+      gridOpRadio: {
+        data: [],
+        height: 300,
+        optimization: {
+          animat: true,
+          delayHover: 250,
+          scrollX: { gt: 20 },
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域' },
+          { field: 'province', title: '省份' },
+          { field: 'city', title: '城市' }
+        ]
+      },
+      gridOpRadio2: {
+        data: [],
+        height: 300,
+        optimization: {
+          animat: true,
+          delayHover: 250,
+          scrollX: { gt: 20 },
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域' },
+          { field: 'province', title: '省份' },
+          { field: 'city', title: '城市' }
+        ]
+      }
+    }
+  },
+  methods: {
+    initQuery(value) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(this.allData)
+        }, 500)
+      })
+    },
+    remoteMethod(value) {
+      let filterData = this.allData.filter((item) => {
+        return item.city.includes(value)
+      })
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-select {
+  .tiny-select {
+    width: 280px;
+  }
+}
+</style>

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

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <p>场景 1：单选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 3：多选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value3"
+      placeholder="请输入关键词"
+      multiple
+      render-type="grid"
+      reserve-keyword
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value4"
+      placeholder="请输入关键词"
+      multiple
+      reserve-keyword
+      filterable
+      remote
+      render-type="grid"
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  created() {
+    this.allData = Array.from({ length: 1000 }, (a, i) => {
+      return {
+        value: '00' + i,
+        province: '省份 ' + i,
+        city: '城市 ' + i,
+        area: '区域 ' + i,
+        label: `省 ${i}-市 ${i}`
+      }
+    })
+  },
+  data() {
+    const baseGridOp = {
+      data: [],
+      height: 300,
+      optimization: {
+        animat: true,
+        delayHover: 250,
+        scrollX: { gt: 20 },
+        scrollY: { gt: 20 }
+      }
+    }
+    const baseCols = [
+      {
+        field: 'province',
+        title: '省份'
+      },
+      { field: 'city', title: '城市' },
+      {
+        field: 'area',
+        title: '区域'
+      }
+    ]
+
+    return {
+      allData: [],
+      value1: '',
+      value2: '',
+      value3: [],
+      value4: [],
+      gridOpRadio: {
+        ...baseGridOp,
+        columns: [{ type: 'radio', title: '' }, ...baseCols]
+      },
+      gridOpMultiple: {
+        ...baseGridOp,
+        columns: [{ type: 'selection', title: '' }, ...baseCols]
+      }
+    }
+  },
+  methods: {
+    remoteMethod(value) {
+      const filterData = this.filter(value)
+      console.log(filterData, value)
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    },
+    filter(value) {
+      return this.allData.filter((item) => item.city.includes(value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/nest-grid.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="demo-select">
+    <p>场景 1：嵌套表格（单选）</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></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="gridOpMulti"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 3：嵌套表格 + 可搜索 + 可清除</p>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="value3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  methods: {
+    filter(value) {
+      if (!value) {
+        return this.gridOpSingle.data
+      }
+
+      return this.gridOpSingle.data.filter((item) => {
+        return item.city.includes(value)
+      })
+    }
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      value3: '',
+      gridOpSingle: {
+        data: [
+          { 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: '中山市' }
+        ],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      gridOpMulti: {
+        data: [
+          { 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: '中山市' }
+        ],
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  }
+}
+</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/nest-radio-grid-much-data.vue

@@ -0,0 +1,50 @@
+<template>
+  <tiny-select v-model="radioValue" value-field="id" text-field="city" render-type="grid" :grid-op="gridOpRadio">
+  </tiny-select>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      radioValue: '',
+      gridOpRadio: {
+        height: 200,
+        data: [],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  },
+  mounted() {
+    const arr = []
+
+    for (let i = 0; i <= 800; i++) {
+      const obj = {
+        id: i,
+        area: '华南区 ' + i,
+        province: '广东省',
+        city: '广州市'
+      }
+      arr.push(obj)
+    }
+
+    this.gridOpRadio.data = arr
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/select-wrapper/nest-tree.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div>场景 1：下拉树（单选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue1"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：下拉树（多选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue2"
+      multiple
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 3：下拉树可搜索</div>
+    <br />
+    <tiny-select
+      v-model="treeValue3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 4：下拉树懒加载（单选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue4"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOpLazy"
+      placeholder="请选择"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 5：下拉树懒加载（多选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue5"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOpLazy"
+      multiple
+      placeholder="请选择"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      treeValue1: 10,
+      treeValue2: [1, 9],
+      treeValue3: '',
+      treeValue4: 3,
+      treeValue5: [1],
+      treeOp: {
+        data: [
+          {
+            id: 1,
+            label: '一级 1',
+            children: [
+              {
+                id: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    id: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    id: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: 2,
+            label: '一级 2',
+            children: [
+              {
+                id: 5,
+                label: '二级 2-1'
+              },
+              {
+                id: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      },
+      treeOpLazy: {
+        lazy: true,
+        load(node, resolve) {
+          if (node.level === 0) {
+            return resolve([
+              {
+                id: 3,
+                label: '一级 3'
+              }
+            ])
+          }
+          if (node.level > 1) return resolve([])
+
+          setTimeout(() => {
+            const data = [
+              {
+                id: 1,
+                label: '一级 1'
+              },
+              {
+                id: 2,
+                label: '一级 2',
+                isLeaf: true
+              }
+            ]
+
+            resolve(data)
+          }, 500)
+        }
+      }
+    }
+  },
+  methods: {
+    filter(value, data) {
+      if (!value) return true
+
+      return data.label.includes(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 270px;
+}
+</style>