/vue2-checklist

实现一个Vue的CheckList组件🐼

Primary LanguageVue

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