0.4.4 • Published 2 years ago
vue-treeselect-click v0.4.4
vue-treeselect
A multi-select component with nested options support for Vue.js
Change the focus trigger to click
Getting Started
Requires Vue 2.2+
npm install --save vue-treeselect-clickThis example shows how to integrate vue-treeselect with your Vue SFCs.
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
import Treeselect from 'vue-treeselect-click'
import 'vue-treeselect-click/dist/vue-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>If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-treeselect-click@0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-treeselect-click@0.4.0/dist/vue-treeselect.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
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',
} ],
},
})
</script>
</html>Browser Compatibility
- Chrome
- Edge
- Firefox
- IE ≥ 9
- Safari
It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as transition and animation. Nevertheless it should look 90% same as on modern browsers.
License
Copyright (c) 2017-present Riophae Lee.
Released under the MIT License.