Vue-mselect 是一款基于 Vue.js 的下拉选框组件。它提供了多选和单选两种模式，支持搜索和动态加载，使用方便灵活。在本文中，将会详细介绍 vue-mselect 的使用方法，包括组件属性、事件和插槽等。同时，我们还会提供实际的代码示例，助你更好应用 vue-mselect。
组件安装
vue-mselect 是基于 npm 的包管理工具发布的，因此安装时需要使用 npm 命令，可在控制台中执行以下命令：
npm install vue-mselect
安装完成之后，即可在项目中引入 vue-mselect 组件。
组件使用
在引入 vue-mselect 之后，我们需要在组件页面中进行以下注册和声明：
全局注册
在入口文件（例如 main.js）中进行全局注册：
import Vue from 'vue'
import MSelect from 'vue-mselect'
Vue.component('MSelect', MSelect)这样，在任意页面中，就可以直接引用 MSelect 组件了：
-- -------------------- ---- -------
----------
---------
------------------
-----------------
---------------
------------------
-
-----------
-----------局部注册
在组件页面中进行局部注册：
-- -------------------- ---- -------
------ ------- ---- -------------
------ ------- -
----------- -
-------
--
---- -- -
------ -
-------- -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
--
--------- --
-
--
-这种方式只能在该组件页面内使用 MSelect 组件，对其他组件不可用。
组件属性
MSelect 组件提供了以下属性，可根据需求进行调整和使用。
属性：options
配置 MSelect 的选项数据。options 是一个数组。每一个对象的属性应该包含：
- label-name：显示在 MSelect 中的文本的属性名称
- value-name：用于 v-model 的值的属性名称
示例代码：
-- -------------------- ---- -------
---- -- -
------ -
-------- -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
-
-
-属性：search
标记 MSelect 是否应提供搜索选择功能。值应该是 true 或 false。
示例代码：
<m-select :options="options" :search="true" ></m-select>
属性：remote
标记 MSelect 是否应提供动态加载功能。值应该是 true 或 false。
示例代码：
<m-select :options="options" :remote="true" :load-data="loadData" ></m-select>
属性：multiple
标记 MSelect 是否应提供多选功能。值应该是 true 或 false。
示例代码：
<m-select :options="options" :multiple="true" v-model="selected" ></m-select>
属性：label-name
指定选项数据中用于显示文本的属性名称。
示例代码：
<m-select :options="options" label-name="name" ></m-select>
属性：value-name
指定选项数据中用于 v-model 绑定的值的属性名称。
示例代码：
<m-select :options="options" value-name="id" v-model="selected" ></m-select>
属性：load-data
此属性只有在 remote 为 true 时才会生效。当用户滚动到底部时，MSelect 会调用此方法以获取更多的数据。load-data 方法应返回一个 Promise 对象。
示例代码：
loadData: function (page) {
return axios.get('/api/options/' + page)
.then(function (res) {
return res.data
})
},属性：loading-text
指定在数据加载时显示的文本。
示例代码：
<m-select :options="options" :remote="true" :load-data="loadData" loading-text="Loading ..." ></m-select>
组件事件
MSelect 组件提供了以下事件，以便在不同情况下执行处理操作。
事件：select
选定选项时触发。
示例代码：
<m-select :options="options" @select="handleSelect" ></m-select>
methods: {
handleSelect: function (selectedValue) {
console.log('Selected value:', selectedValue)
}
}事件：cancel
取消选中选项时触发。
示例代码：
<m-select :options="options" @cancel="handleCancel" ></m-select>
methods: {
handleCancel: function () {
console.log('Cancel selection!')
}
}事件：open
打开下拉选框时触发。
示例代码：
<m-select :options="options" @open="handleOpen" ></m-select>
methods: {
handleOpen: function () {
console.log('Open select list.')
}
}事件：close
关闭下拉选框时触发。
示例代码：
<m-select :options="options" @close="handleClose" ></m-select>
methods: {
handleClose: function () {
console.log('Close select list.')
}
}事件：remove
从已选中列表中移除选项时触发。
示例代码：
<m-select :options="options" :multiple="true" v-model="selected" @remove="handleRemove" ></m-select>
methods: {
handleRemove: function (removedValue) {
console.log('Selected value removed:', removedValue)
}
}事件：search
在搜索框中进行文本输入时触发。
示例代码：
<m-select :options="options" :search="true" @search="handleSearch" ></m-select>
methods: {
handleSearch: function (inputText) {
console.log('Search text:', inputText)
}
}事件：search-change
当搜索框文本发生变化时触发。
示例代码：
<m-select :options="options" :search="true" @search-change="handleSearchChange" ></m-select>
methods: {
handleSearchChange: function (inputText) {
console.log('Search text change:', inputText)
}
}组件插槽
在 MSelect 中，我们可以使用 slot 插槽自定义选项的外观。
插槽：option
一个自定义选项的样板，用于传递任何非默认行为和外观，如图标和额外的文本。
示例代码：
-- -------------------- ---- -------
---------
------------------
-
--------- ----------------------
----
-------- ----------------- ---------
----- --------------------------- ----------------- ---------
-----
-----------
-----------插槽：selection
用于自定义显示已选的选项的样板。
示例代码：
-- -------------------- ---- -------
---------
------------------
----------------
------------------
-
--------- ------------------- ---- ---
---- --------------------------
-------- --------- ---------
----- ---------------------- --------------------------------- ----------------------
-------
-------
------
-----------
-----------结语
本文介绍了 npm 包 vue-mselect 的安装和详细使用方法，包括组件属性、事件和插槽等。通过阅读本文，你应该可以熟练使用 vue-mselect，完成自己的实际工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8eb6