插件名称 | multi-select-list-picker |
---|---|
发布时间 | 2020年4月24日 |
插件作者 | guastallaigor |
Vue.js的双列表选择器组件,使用户能够在两个面板之间移动列表项。
v0.2.0(09/24/2020)
1.安装并导入列表选择器组件。
import Vue from 'vue'
import VueListPicker from 'vue-list-picker'
2.注册组件。
Vue.use(VueListPicker)
// 或
export default {
components: {
VueListPicker
}
}
3.将组件插入模板。
<template>
<vue-list-picker
:left-items="leftItems"
:right-items="rightItems"
/>
</template>
4.定义左/右项目。
export default {
data() {
const example1 = {
key: 1,
content: 'Item 1'
}
const example2 = {
key: 2,
content: 'Item 2'
}
const example3 = {
key: 3,
content: 'Item 3'
}
const example4 = {
key: 4,
content: 'Item 4'
}
const leftItems = [example1, example2]
const rightItems = [example3, example4]
return { leftItems, rightItems }
}
}
5.所有可能的props。
leftItems: {
type: Array,
required: true
},
rightItems: {
type: Array,
required: true
},
movedItemLocation: {
type: String,
default: 'top' // 或 'bottom'
},
titleLeft: {
type: String,
default: 'Items available'
},
titleRight: {
type: String,
default: 'Items selected'
},
titleCentered: {
type: Boolean,
default: true
},
titleClass: {
type: String,
default: ''
},
titleSubstr: {
type: Number,
default: 20
},
buttonClass: {
type: String,
default: ''
},
contentKey: {
type: String,
default: 'key'
},
contentAttr: {
type: String,
default: 'content'
},
contentCentered: {
type: Boolean,
default: false
},
contentClass: {
type: String,
default: ''
},
contentSubstr: {
type: Number,
default: 23
},
minHeight: {
type: String,
default: '450px'
},
height: {
type: String,
default: ''
},
minWidth: {
type: String,
default: '220px'
},
width: {
type: String,
default: ''
}