vue 自定义单项选择组件
Vue-多选 (vue-multi-select)
This component gives you a multi/single select with the power of Vuejs components.
该组件利用Vuejs组件的功能为您提供多/单选择。
依存关系 (Dependencies)
required: Vuejs >= 2.x
必需：Vuejs> = 2.x
安装 (Install)
Clone the repo or
npm install vue-multi-select --save克隆仓库或
npm install vue-multi-select --saveInclude the file in your app
在您的应用程序中包含文件
import vueMultiSelect from 'vue-multi-select';import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vueMultiSelect.css'import 'vue-multi-select/dist/lib/vueMultiSelect.css'
贡献 (Contributing)
Issues and PR's are much appreciated. When you create a new PR please make it against the develop branch when adding new features and to the fix branch when fixing small issues instead of master.
问题和公关非常感激。 当您创建新的PR时，添加新功能时，请使其与develop分支相对应；在解决小问题而不是master时，请使其与fix分支相对应。
用法和文件 (Usage and Documentation)
| Params | Type |
|---|---|
| options | Object |
| filters | Array |
| selectOptions | Array |
| value | Array |
| 参数 | 类型 |
|---|---|
| 选项 | 目的 |
| 过滤器 | 数组 |
| selectOptions | 数组 |
| 值 | 数组 |
1.选项(包含用于设置多选的选项) (1. options (Contains options to set the multi-select))
| Params | Type | Default | Description |
|---|---|---|---|
| btnLabel | String | 'multi-select' | Label on the button |
| cssSelected | Function | (option) => option['selected'] ? { 'font-weight': 'bold',color: '#5755d9',} : '' | Css passed to value |
| groups | Boolean | false | Display or not groups selection |
| multi | Boolean | false | Set single or multiple selection |
| labelList | String | 'list' | Name Attributes for list |
| labelName | String | 'name' | Name Attributes for value to display |
| labelSelected | String | 'selected' | Name attributes for value selected |
| groupName | String | 'name' | Name Attributes for groups to display |
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| btnLabel | 串 | '多选' | 按钮上的标签 |
| cssSelected | 功能 | (选项)=>选项['已选择']？ {'font-weight'：'bold'，color：'＃5755d9'，}：'' | CSS传递给价值 |
| 团体 | 布尔型 | 假 | 显示或不显示组选择 |
| 多 | 布尔型 | 假 | 设置单选或多选 |
| labelList | 串 | “清单” | 列表的名称属性 |
| labelName | 串 | '名称' | 显示值的名称属性 |
| labelSelected | 串 | “选定” | 所选值的名称属性 |
| 团队名字 | 串 | '名称' | 要显示的组的名称属性 |
2.筛选器适用于选择许多选项 (2. filters to apply to select many options)
// Exemple with Select/Deselect all
const filters = [];
filters.push({
nameAll: 'Select all', // label when want to select all elements who answer yes to the function
nameNotAll: 'Deselect all', //label when want to deselect all elements who answer yes to the function
func: (elem) => true
});
// Second exemple to select all elements who contain 2
filters.push({
nameAll: 'Select all elements with 2',
nameNotAll: 'Deselect all elements with 2',
func: (elem) => {
if (elem.name.indexOf('2') !== -1) {
return true;
}
return false;
}
});
3.要选择/取消选择的元素 (3. elements to select/deselect)
// when groups not set or false
data = [
{name: 'choice 1'}, // Name can be changed with labelName in options
{name: 'choice 2'},
{name: 'choice 3'},
{name: 'choice 4'},
{name: 'choice 5'},
]
// or just an array
// it's also possible when to have an array of strings
// in list when groups is set to true.
data = [
'choice 1',
'choice 2',
'choice 3',
'choice 4',
'choice 5',
]
// when groups set to true
data = [{
name: 'choice 1', // Can be changed with tabName in options
list: [
{name: 'choice 1'}, // Name can be changed with labelName in options
{name: 'choice 2'},
{name: 'choice 3'},
{name: 'choice 4'},
{name: 'choice 5'},
]
}, {
name: 'choice 10', // Can be changed with tabName in options
list: [
{name: 'choice 11'}, // Name can be changed with labelName in options
{name: 'choice 12'},
{name: 'choice 13'},
{name: 'choice 14'},
{name: 'choice 15'},
]
}]
4.选择值 (4. values selected)
[ {name: 'choice 1'}, {name: 'choice 11'}] // In the case we selected choice 1 and choice 11
5.例子 (5. Examples)
<template>
<div>
<vueMultiSelect
@selectionChanged="updateValues"
:options="options"
:filters="filters"
:selectOptions="data" />
</div>
</template>
<script>
import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.min.css';
export default {
data() {
return {
name: 'first group',
values: [],
data: [{
name: 'first group',
list: [
{ name: '0' },
{ name: '2' },
{ name: '3' },
{ name: '8' },
{ name: '9' },
{ name: '11' },
{ name: '13' },
{ name: '14' },
{ name: '15' },
{ name: '18' },
],
}, {
name: 'second group',
list: [
{ name: '21' },
{ name: '22' },
{ name: '24' },
{ name: '27' },
{ name: '28' },
{ name: '29' },
{ name: '31' },
{ name: '33' },
{ name: '35' },
{ name: '39' },
],
}],
filters: [{
nameAll: 'select <= 10',
nameNotAll: 'Deselect <= 10',
func: (elem) => {
if (elem.name <= 10) {
return true;
}
return false;
},
}, {
nameAll: 'Select contains 2',
nameNotAll: 'Deselect contains 2',
func: (elem) => {
if (elem.name.indexOf('2') !== -1) {
return true;
}
return false;
},
}],
options: {
multi: true,
groups: true,
btnLabel: 'A simple vue multi select',
},
};
},
methods: {
updateValues(values) {
this.values = values;
},
},
components: {
vueMultiSelect,
},
};
</script>
构建设置 (Build Setup)
- `npm run dev`: Shortcut to run both dev:lib and dev:docs in parallel using.
- `npm run dev:lib`: Runs webpack watch mode on your library so file changes are built and re-written to disk automatically.
- `npm run dev:docs`: Runs both the development server for your docs/demo site.
- `npm run build`: Shortcut to run both build:lib and build:docs.
- `npm run build:lib`: Production ready build of your library as an ES6 module (via UMD), ready to import into another project via npm.
- `npm run build:docs`: Production ready build of your docs site for your library. Put this build online so you can demo your library to the world and provide documentation.
翻译自: https://vuejsexamples.com/a-custom-component-to-make-select-multiselect-for-vue2/
vue 自定义单项选择组件