z-base-ui

Appearance

ZTagPick ​

多条件标签查询。

WARNING

相较于上一个组件库而言，默认值不在通过 options 进行设置，您应该使用 v-model:select 进行设置，同时您还需搭配 change 事件进行使用，从而实现状态的更新，具体使用请参考下方的代码演示

代码演示 ​

当您没有指定 width 属性时，它的宽度默认为是100%，跟随父级宽度。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    options: new Array(5).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

多选 ​

在 options 中添加属性 check 用于开启多选。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    options: new Array(5).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

默认值 ​

通过绑定 select 用于设置或更新状态。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({
  xz: 10,
  age: [20, 40]
});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    options: new Array(5).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

多级联动 ​

在 options 中添加关键词 parentId 用于设置关联关系，关联关系可以是一个或多个。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
70岁
80岁
90岁
100岁
110岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({
  age: [20, 40],
  love: ["a", "c"]
});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    parentId: "xz",
    check: true,
    options: new Array(10).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    parentId: ["xz", "age"],
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

无限属性 ​

添加 infinite 属性即可设置唯一状态，在使用时你需要注意以下几点。

  • 当属性 infinite 存在时，且未设置 默认值 的行，会被默认选中与 infinite 相等的项。
  • 若条件项为多选时，您选中 infinite 时，当前行的其它选中项会被移除选中，同理，你选中其它项时，infinite 会被移除，您可在下方Demo中选中第二行的 不限 体验该效果。
  • 当 infinite 存在时，若存在关联关系即多级联动关系时，重置子级数据时会优先选中与 infinite 匹配的项，不存在则完全清除选中，这点您可在下方的Demo中选中第一行体验该效果。
期望薪资：
不限
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
不限
20岁
30岁
40岁
50岁
60岁
70岁
80岁
90岁
100岁
110岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange" infinite="clear"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({
  age: [20, 40],
  love: ["a", "c"]
});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: [
      {label: "不限", value: "clear"},
      ...new Array(25).fill("").map((_, i) => ({
        label: `${i * 10}K`,
        value: i * 10,
      }))
    ],
  },
  {
    label: "年龄",
    value: "age",
    parentId: "xz",
    check: true,
    options: [
      {label: "不限", value: "clear"},
      ...new Array(10).fill("").map((_, i) => ({
        label: `${(i + 2) * 10}岁`,
        value: (i + 2) * 10
      })),
    ]
  },
  {
    label: "爱好",
    value: "love",
    parentId: ["xz", "age"],
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

不可用 ​

在 options 中添加属性 disabled 即可禁用当前行或某些条件。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    disabled: true,
    options: new Array(5).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a", disabled: true},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c", disabled: true},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

默认展开 ​

添加 open 属性即可让展开所有条件或显示某行的所有条件。

两种设置方式，第一种在 options 中设置，第二种在根属性上绑定。

TIP

有关展开按钮的出现时机，该按钮是通过容器宽度和当前行的高度自动计算，它根据标签的容器高度从而决定按钮的出现与否。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
2岁
3岁
4岁
5岁
6岁
7岁
8岁
9岁
10岁
11岁
12岁
13岁
14岁
15岁
16岁
17岁
18岁
19岁
20岁
21岁
22岁
23岁
24岁
25岁
26岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    open: true,
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    options: new Array(25).fill("").map((_, i) => ({
      label: `${(i + 2)}岁`,
      value: (i + 2)
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>
期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
2岁
3岁
4岁
5岁
6岁
7岁
8岁
9岁
10岁
11岁
12岁
13岁
14岁
15岁
16岁
17岁
18岁
19岁
20岁
21岁
22岁
23岁
24岁
25岁
26岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick :options="options" v-model:select="selectValue" @change="selectChange" open></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    options: new Array(25).fill("").map((_, i) => ({
      label: `${(i + 2)}岁`,
      value: (i + 2)
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

自定义色彩 ​

添加 color 属性即可修改选中颜色，通过 color 属性定义的颜色只会影响当前组件，不会影响到其它z-tag-pick组件，若您想全局修改，请参考自定义主题。

期望薪资：
0K
10K
20K
30K
40K
50K
60K
70K
80K
90K
100K
110K
120K
130K
140K
150K
160K
170K
180K
190K
200K
210K
220K
230K
240K
年龄：
20岁
30岁
40岁
50岁
60岁
爱好：
篮球
羽毛球
书法
攀岩
徒步
<template>
  <z-tag-pick color="red" :options="options" v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
import { TagPickOption, TagPickSelect } from "@d7ee/z-base-ui/dist/types/components/ZTagPick";
import { ref } from "vue";

// 结果
const selectValue = ref<TagPickSelect>({
  xz: 10,
  age: [20, 40]
});

// 条件项
const options: TagPickOption[] = [
  {
    label: "期望薪资",
    value: "xz",
    options: new Array(25).fill("").map((_, i) => ({
      label: `${i * 10}K`,
      value: i * 10,
    })),
  },
  {
    label: "年龄",
    value: "age",
    check: true,
    options: new Array(5).fill("").map((_, i) => ({
      label: `${(i + 2) * 10}岁`,
      value: (i + 2) * 10
    })),
  },
  {
    label: "爱好",
    value: "love",
    check: true,
    options: [
      {label: "篮球", value: "a"},
      {label: "羽毛球", value: "b"},
      {label: "书法", value: "c"},
      {label: "攀岩", value: "d"},
      {label: "徒步", value: "e"},
    ],
  }
];

// 回调函数，在选中时回调，用于更新选中项
const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>

<style scoped>

</style>

TagPick 属性 ​

属性名说明类型默认值
options 必填条件内容Array，详见options—
select 必填用于更新或设置选中项，通过 v-model:select 绑定，请配合 change 事件使用Object{}
width容器宽度string100%
infinite无限属性string—
open默认展开全部条件boolean—
unfold隐藏展开按钮boolean—
lwopions 中的 label 宽度string120px
color被选中时的背景色string—

options ​

通过引入 TagPickOption 获取提示和约束类型。

typescript
const options: TagPickOption[] = [
  {label: "年龄", value: "age", options: [{label: "20岁", value: 20}, ...args]},
  ...args
]
字段说明类型
label 必填标题string
value 必填唯一值string | number
options 必填配置项，详见childrenArray
check多选boolean
disabled禁止选中当前行boolean
open默认显示所有条件boolean
parentId关联Id，id来源于 value 当关联的数据发生改变时，本行被重置string | number | Array<string | number>

children ​

options 的选项条件

字段说明类型
label 必填名称string
value 必填值string | number
disabled禁止选中当前项boolean

TagPick 事件 ​

配合 select 使用，用于更新选中状态，当此事件不存在时，您将无法选中或取消选中任意内容。

事件名称说明回调参数
change状态发生改变时时回调(event: TagPickSelect) => void

代码演示 ​

vue
<template>
	<z-tag-pick v-model:select="selectValue" @change="selectChange"></z-tag-pick>
</template>

<script setup lang="ts">
const selectValue = ref<TagPickSelect>({});

const selectChange = (e: TagPickSelect) => {
  selectValue.value = e;
};
</script>