vue-multiselect 教程

vue-multiselect是一款基于vue.js的下拉框组件支持单选、多选、ajax、标签等特征,用来替换原生html select组件的优秀选择,功能强大且简洁美观。

方法一,npm方式安装

npm install vue-multiselect --save

方法二,浏览器方式引用

下载vue-multiselect文件

<script src="http://www.itxst.com/package/vue-multiselect/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="http://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="http://www.itxst.com/package/vue-multiselect/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="http://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>

例子