vue2-checklist
v1.2.9
Published
checklist using vue2.0
Downloads
47
Readme
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