multiple-select 多选选择器（齐思博）

基础用法

当labelName不传或为空时，内容左对齐，否则右对齐

自定义选项

文案

<template>
  <div>
		<h-multiple-select 
			v-model="multipleBase" 
			labelName="多选选择器1" 
			:width="'260px'"
			:options="multipleOptionsBase">
		</h-multiple-select>
		<p>自定义选项</p>
    <h-multiple-select 
			v-model="multipleSelect" 
			labelName="多选选择器2" 
			:width="'360px'" 
			:showNum="999"
			:showClose="true" 
			:showAll="true" 
			:options="multipleSelectOptions" 
			:optionLabel="'name'" 
			:optionValue="'id'" 
			placeholder="请选择">
		</h-multiple-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	multipleBase: ['1', '2'],
    	multipleSelect: ['1', '2'],
			multipleOptionsBase: [{
				label: '标签1',
				value: '1'
			},{
				label: '标签2',
				value: '2'
			},{
				label: '标签3',
				value: '3'
			},{
				label: '标签4',
				value: '4'
			},{
				label: '标签5',
				value: '5'
			},{
				label: '标签6',
				value: '6'
			}],
			multipleSelectOptions: [{
				name: '标签1',
				id: '1'
			},{
				name: '标签2',
				id: '2'
			},{
				name: '标签3',
				id: '3'
			},{
				name: '标签4',
				id: '4'
			},{
				name: '标签5',
				id: '5'
			},{
				name: '标签6',
				id: '6'
			}]
		}
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	选中项绑定值	array	—	—
options	可选项数据源	array	—	—
disabled	是否禁用	boolean	—	false
labelName	输入框关联的label文字	string	—	—
showAll	是否展示全选	boolean	—	false
showClose	是否展示清空选项	boolean	—	false
showNum	选项展示的标签数量，多出的收起	number	—	1
showNumTabs	隐藏标签是否悬浮展示	boolean	true/false	false
width	选择框宽度	string	—	100%
placeholder	占位符	string	—	—
optionLabel	选项label参数	string	—	label
optionValue	选项value参数	string	—	value

Events

方法名	说明	参数
input	确认选择时触发	当前选中值