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
import Vue2Checklist from 'vue2-checklist'
// In main You can add this
Vue.use(Vue2Checklist)
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