123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- <template>
- <view class="cl-select" :class="[classList]">
- <picker
- :mode="mode"
- :value="index"
- :range="options"
- :range-key="rangeKey"
- :disabled="isDisabled"
- :end="end"
- :start="start"
- :fields="fields"
- @change="onChange"
- @columnchange="onColumnChange"
- @cancel="onCancel"
- >
- <view class="cl-select__inner">
- <text class="cl-select__value"
- >{{ text
- }}<text class="cl-select__placeholder" v-if="showPlaceholder">{{
- placeholder
- }}</text></text
- >
- </view>
- </picker>
- <text class="cl-select__icon cl-icon-arrow-bottom"></text>
- </view>
- </template>
- <script>
- import { isArray, isEmpty, compareValue } from "../../utils";
- import Form from "../../mixins/form";
- /**
- * select 下拉选择
- * @description 下拉选择,基于 picker 组件的封装
- * @tutorial https://docs.cool-js.com/uni/components/form/select.html
- * @property {null} value 绑定值
- * @property {String, Number} mode 选择器模式,selector | multiSelector
- * @property {String} placeholder 占位内容
- * @property {Array<Object>} options 数据列表
- * @property {String} labelKey 内容关键字,默认label
- * @property {String} valueKey 值关键字,默认value
- * @property {String} separator 分隔符,默认 /
- * @property {Boolean} disabled 是否禁用
- * @property {Boolean} border 是否带有边框
- * @property {Boolean} fields 日期字段,有效值 year | month | day
- * @property {Boolean} start 有效日期的开始
- * @property {Boolean} end 有效日期的结束
- * @event {Function} change 绑定值改变时触发
- * @event {Function} confirm 绑定值改变时触发,返回完整数据
- * @event {Function} cancel 取消时触发
- * @event {Function} column-change 列发生改变时触发
- * @example <cl-select :options="[{label: '内容1', value: 1},{label: '内容2', value: 2}]" />
- */
- export default {
- name: "cl-select",
- props: {
- // 绑定值
- value: null,
- // 选择器模式
- mode: {
- type: String,
- default: "selector",
- },
- // 占位内容
- placeholder: {
- type: String,
- default: "请选择",
- },
- // 数据列表
- options: {
- type: Array,
- default: () => [],
- },
- // 内容关键字
- labelKey: {
- type: String,
- default: "label",
- },
- // 值关键字
- valueKey: {
- type: String,
- default: "value",
- },
- // 分隔符
- separator: {
- type: String,
- default: "/",
- },
- // 是否禁用
- disabled: Boolean,
- // 是否带有边框
- border: Boolean,
- // 日期字段,有效值 year | month | day
- fields: {
- type: String,
- default: "day",
- },
- // 有效日期的开始
- start: String,
- // 有效日期的结束
- end: String,
- // 是否默认返回第一个
- defaultFirstOption: {
- type: Boolean,
- default: true,
- },
- // 设置 options 时是否重新解析 value
- setOptionsIsParseValue: Boolean,
- },
- mixins: [Form],
- data() {
- return {
- index: "",
- text: "",
- };
- },
- watch: {
- value: {
- immediate: true,
- handler(val) {
- this.parse(val);
- },
- },
- options: {
- immediate: true,
- handler(arr) {
- // 避免重复设置 options 异常问题
- if (!this.setOptionsIsParseValue) {
- this.parse(this.value);
- }
- // 为空时,默认返回列表第一个
- if (arr && arr.length > 0 && this.defaultFirstOption) {
- if (this.value === undefined) {
- this.$emit("input", arr[0][this.valueKey]);
- }
- }
- },
- },
- },
- computed: {
- rangeKey() {
- return this.mode == "region" ? "" : this.labelKey;
- },
- showPlaceholder() {
- return isEmpty(this.text);
- },
- classList() {
- let list = [];
- if (this.isDisabled) {
- list.push("is-disabled");
- }
- if (this.border) {
- list.push("is-border");
- }
- return list.join(" ");
- },
- },
- methods: {
- parse(val) {
- // 取下标
- this.index = (() => {
- switch (this.mode) {
- case "selector":
- return this.options.findIndex((e) => compareValue(e[this.valueKey], val));
- case "multiSelector":
- return (isArray(val) ? val : [val]).map((v, i) => {
- return this.options[i].findIndex((e) =>
- compareValue(e[this.valueKey], v)
- );
- });
- default:
- return val;
- }
- })();
- // 取文本值
- this.text = (() => {
- switch (this.mode) {
- case "selector":
- return this.options[this.index]
- ? this.options[this.index][this.labelKey]
- : "";
- case "multiSelector":
- return this.index
- .filter((v) => v >= 0)
- .map((v, i) => this.options[i][v][this.labelKey])
- .join(this.separator);
- case "region":
- console.warn("请使用 cl-select-region 代替");
- default:
- return this.index;
- }
- })();
- },
- onChange({ detail }) {
- if (detail.value < 0 || detail.value === undefined) {
- return false;
- }
- // 返回的完整数据
- let data = null;
- // 返回的唯一数据
- let value = null;
- switch (this.mode) {
- case "selector":
- data = this.options[detail.value];
- value = data ? data[this.valueKey] : null;
- break;
- case "multiSelector":
- data = detail.value
- .map((v) => (v < 0 ? 0 : v))
- .map((v, i) => this.options[i][v]);
- value = data.map((e) => e[this.valueKey]);
- break;
- default:
- value = detail.value;
- }
- this.$emit("confirm", data);
- this.$emit("change", value);
- this.$emit("input", value);
- },
- onColumnChange({ detail }) {
- this.index = this.index.map((v, i) =>
- i < detail.column ? v : i === detail.column ? detail.value : 0
- );
- this.$emit("column-change", { ...detail, selects: this.index });
- },
- onCancel() {
- this.$emit("cancel");
- },
- },
- };
- </script>
|