插件名称 | vue3-treeselect |
---|---|
发布时间 | 2021年4月16日 |
插件作者 | megafetis |
具有嵌套选项的多选组件支持Vue 3。
从他的资料库中取得重大变化:
value
=>modelValue
input
=>updated:modelValue
<template>
需要Vue 3.0+
建议通过npm安装vue3-treeselect,并使用webpack之类的捆绑器来构建您的应用程序。
npm install --save vue3-treeselect
本示例说明如何将vue3-treeselect与Vue SFC集成在一起。
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
// import the component
import Treeselect from 'vue3-treeselect'
// import the styles
import 'vue3-treeselect/dist/vue3-treeselect.css'
export default {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>
如果您只是不想使用webpack或任何其他捆绑程序,则只需在页面中包含独立的UMD构建即可。这样,请确保在vue3-treeselect之前包括Vue作为依赖项。
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
createApp({
data: {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
},
})
.component('treeselect', VueTreeselect.Treeselect)
.mount('#app')
</script>
</html>
它应该可以在IE9上正常运行,但是由于缺少对某些相对较新的CSS功能(例如transition
和)的支持,因此样式可能会略有破坏animation
。但是,它应该看起来与现代浏览器的90%相同。