m-select

介绍

该组件是对 el-select 进行封装，简化传入参数，将选项数据传入 select，无需再写 el-option 模板。 为本项目特定资源搜索增加了 RemoteSelect 组件，使用 el-select 的 remote-method 方法实现。

目录结构

└─ src
   └─ components
      └─ Select              # 选择器
         ├─ MSelect          # 普通选择器
         └─ RemoteSelect     # 远程搜索选择器

源码解析

m-select

对 el-select 的封装，增加 options 参数，用于对 <el-option></el-option> 进行遍历，而不需要在模板中写 el-option

<!-- 遍历 el-option -->
<el-option
   v-for="item in list"
   :key="item.value"
   :value="item.value"
   :label="item.label"
>
   <!-- 可通过传入 useSlot 值，使用以下模板，否则使用自定义内容 -->
   <template v-if="useSlot">
      <span class="label">{{ item.label }}</span>
      <span class="count">{{ item.count }}</span>
   </template>

   <span v-else-if="$slots.default"><slot></slot></span>
</el-option>

通过计算属性设置自定义传入 option 值

props: {
	props: {
		type: Object,
		// 默认传入结构值
		default: () => {
			return {
				value: "value",
				label: "label",
				count: "count",
			};
		},
	},
},
computed: {
	list() {
   	let list = [];
		// 根据 props 属性设置对应传入值
   	this.options.map((item) => {
		list.push({
			value: [this.props.value] === undefined ? item : item[this.props.value],
			label: item[this.props.label] === undefined ? item : item[this.props.label],
			count: item[this.props.count] === undefined ? "" : item[this.props.count],
		});
   });

   return list;
	},
},

remote-select

由于项目中有些选项内容非常多，如影视条目有几十万条，不可能一次全部加载，所以其值需要通过关键字调用接口模糊查询后获取，本项目中需要远程获取的选项包括 影视、影人、角色、国家/地区、类型 等。可传入对应的 type 值，自动设置对应的选项样式。

el-select 远程搜索

<!-- 主要参数 remote-method，当用户输入内容时触发 -->
<el-select
    class="remote-select"
    :loading="loading"
    :popper-append-to-body="false"
    :value="value"
    :size="size"
    :disabled="disabled"
    filterable
    clearable
    remote
    :multiple="multiple"
    :remote-method="remoteSearch"
    @input="$emit('input', $event)"
    @change="onChange"
    :placeholder="placeholder"
  >
</el-select>

props 传入值校验

props: {
	// 搜索类型
	type: {
		required: true,
		type: String,
		// 校验传入值是否在可选范围
		validator(val) {
			return ['movie', 'actor', 'role', 'country', 'company', 'language'].includes(val)
		}
	}
}