vue-select-panel v1.0.5

vue-select-panel

这是一个 vue 的多选面板组件

安装

npm i vue-select-panel -S

使用

VueJS single file (ECMAScript 2015)

在入口文件中全局安装

可以在入口文件 main.js 中全局引入依赖，也可以当做单文件组件使用

import VueSelectPanel from 'vue-select-panel'
import 'vue-select-panel/lib/vue-select-panel.css'

Vue.use(VueSelectPanel)

在组件中使用

<template>
  <div id="app">
    <vue-select-panel
      v-model="checkedList"
      :data-list="dataList"
      title="文章分类"
      questionText="投稿的文章会按照选择的分类，在文章分类列表中展示。"
    ></vue-select-panel>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dataList: [
        { key: 'front-end', text: '前端' },
        { key: 'back-end', text: '后端' },
        { key: 'algorithm', text: '算法' },
        { key: 'philosophy', text: '哲学' },
        { key: 'operating-system', text: '操作系统' },
        { key: 'computer-organization', text: '计算机组成原理' }
      ],
      checkedList: []
    }
  }
}
</script>

Browser (ES5)

<link rel="stylesheet" href="vue-select-panel/lib/vue-select-panel.css">
<script type="text/javascript" src="vue-select-panel.umd.min.js"></script>

<div id="app">
  <vue-select-panel
    v-model="checkedList"
    :data-list="dataList"
    title="文章分类"
    questionText="投稿的文章会按照选择的分类，在文章分类列表中展示。"
  ></vue-select-panel>
</div>

<script type="text/javascript">
new Vue({
  el: '#app',
  components: {
    VueSelectPanel
  }
})

Props

dataList props

Events

License

MIT 一起来扣细节吧~