Vue2-checklist NPM

Using Vue2.0 CheckList component

Install

You can use Yarn or NPM

npm install -S vue2-checklist

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>