vue-multiselect 教程
vue-multiselect 教程
vue-multiselect是一款基于vue.js的下拉框组件支持单选、多选、ajax、标签等特征，用来替换原生html select组件的优秀选择，功能强大且简洁美观。
方法一，npm方式安装
npm install vue-multiselect --save方法二，浏览器方式引用
<script src="https://www.itxst.com/package/vue-multiselect/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://www.itxst.com/package/vue-multiselect/vue-multiselect.min.css">webpack方式用法
以下代码是按需加载，如果需要在全部网页使用，可以在main.js文件中注册
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
<template>
<div style="padding:0px 0px 0px 20px">
<multiselect v-model="value"
@select="select"
placeholder="请选择网站"
:options="options"
style="width:200px"
selectLabel="回车选择"
selectGroupLabel="回车选择整个分组"
selectedLabel="已选择"
deselectLabel="回车取消选择"
deselectGroupLabel="回车取消选择"
>
</multiselect>
</div>
</template>
<script>
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
export default {
data() {
return {
value: '',
options: ['itxst.com','qq.com'], //下拉框选项
};
},
methods: {
//选中后的事件，获取选中值
select(selectedOption, id) {
console.log(selectedOption);
},
},
};
</script>Html & JS方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ant Design Vue Select vue multiselect例子</title>
<script src="//www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/vue-multiselect/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://www.itxst.com/package/vue-multiselect/vue-multiselect.min.css">
<style>
body {
padding: 10px
}
</style>
</head>
<body>
<div id="app">
<multiselect v-model="value"
@select="select"
placeholder="请选择网站"
:options="options"
style="width:200px"
selectLabel="回车选择"
selectGroupLabel="回车选择整个分组"
selectedLabel="已选择"
deselectLabel="回车取消选择"
deselectGroupLabel="回车取消选择"
>
</multiselect>
</div>
<script>
//注册multiselect组件
Vue.component('multiselect', window.VueMultiselect.default)
var app = new Vue({
el: '#app',
data() {
return {
value: '',
options: ['itxst.com','baidu.com'],
};
},
methods: {
//选中事件
select(selectedOption, id) {
console.log(selectedOption);
},
},
});
</script>
</body>
</html>例子