Using Vue2.0 CheckList component
Install
You can use Yarn or NPM
npm install -S vue2-checklist
OR
yarn add vue2-checklist
Usage
// In components // In main You can add thisVue
Props
Name | Type | Default | Description |
---|---|---|---|
visible | Boolean | false | visibility of dialog |
data | Array | - | Table data |
maxlength | Number | 2 | same as maxlength in native select |
Methods
Method Name | Description | Parameters |
---|---|---|
on-cancel | hook function when dialog cancel | dialog state |
on-change | triggers when the selected value changes | current selected value |
Example
<template> <div id="app"> <input type="text" @click="selectAddress"> <vue2-checklist :data="data" :visible="dialogVisible" :maxlength="maxlength" @on-cancel="dialogVisible=false" @on-change="handleChange" ></vue2-checklist> </div></template> <script> import Vue2Checklist from 'vue2-checklist'export default { data() { data: [ {id: 1, address: '厦门软件园1期' }, {id: 2, address: '厦门软件园2期' }, {id: 3, address: '厦门软件园3期' } ], dialogVisible: false, maxlength: 3 }, methods: { selectAddress() { // Prevent keyboard popup document.activeElement.blur() this.dialogVisible = true }, handleChange(scope) { console.log(scope, 'val') this.dialogVisible = false } }}</script> <style scoped>input { border: 1px solid #000;}</style>
Development
Vue2Checklist now uses Poi for development
- yarn dev: Run example in development mode
- yarn build: Build component in both format
- yearn test: Run test component
License
MIT