├── .editorconfig
├── .gitignore
├── README.md
├── dev
    ├── App.vue
    └── index.js
├── package.json
├── poi.config.js
├── src
    ├── VueCheckList.vue
    ├── index.js
    └── styles
    │   ├── check-list.scss
    │   └── common.scss
└── test
    ├── index.js
    └── test.vue


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Using Vue2.0 CheckList component
  2 | 
  3 | ## Install
  4 | 
  5 | <i>You can use Yarn or NPM</i>
  6 | ```bash
  7 | npm install -S vue2-checklist
  8 | ```
  9 | OR
 10 | ```bash
 11 | yarn add vue2-checklist
 12 | ```
 13 | 
 14 | ## Usage
 15 | 
 16 | ```js
 17 | // In components
 18 | import Vue2Checklist from 'vue2-checklist'
 19 | 
 20 | // In main You can add this
 21 | Vue.use(Vue2Checklist)
 22 | ```
 23 | 
 24 | ## Props
 25 | |Name|Type|Default|Description|
 26 | |:----- |:------|:------|:------|
 27 | |visible |Boolean |false |visibility of dialog |
 28 | |data |Array |- |Table data |
 29 | |maxlength |Number |2 |same as maxlength in native select |
 30 | 
 31 | 
 32 | ## Methods  
 33 | |Method Name|Description|Parameters|
 34 | |:----- |:------|:------|
 35 | |on-cancel |hook function when dialog cancel |dialog state |
 36 | |on-change |triggers when the selected value changes |current selected value |
 37 | 
 38 | ## Example
 39 | 
 40 | ```vue
 41 | <template>
 42 |   <div id="app">
 43 |     <input type="text" @click="selectAddress">
 44 |     <vue2-checklist
 45 |       :data="data"
 46 |       :visible="dialogVisible"
 47 |       :maxlength="maxlength"
 48 |       @on-cancel="dialogVisible=false"
 49 |       @on-change="handleChange"
 50 |     ></vue2-checklist>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | 
 56 | import Vue2Checklist from 'vue2-checklist'
 57 | export default {
 58 |   data() {
 59 |     data: [
 60 |       {id: 1, address: '厦门软件园1期' },
 61 |       {id: 2, address: '厦门软件园2期' },
 62 |       {id: 3, address: '厦门软件园3期' }
 63 |     ],
 64 |     dialogVisible: false,
 65 |     maxlength: 3
 66 |   },
 67 | 
 68 |   methods: {
 69 |     selectAddress() {
 70 |       // Prevent keyboard popup
 71 |       document.activeElement.blur()
 72 |       this.dialogVisible = true
 73 |     },
 74 |     handleChange(scope) {
 75 |       console.log(scope, 'val')
 76 |       this.dialogVisible = false
 77 |     }
 78 |   }
 79 | }
 80 | </script>
 81 | 
 82 | <style scoped>
 83 | input {
 84 |   border: 1px solid #000;
 85 | }
 86 | </style>
 87 | ```
 88 | 
 89 | ## Development
 90 | 
 91 | Vue2Checklist now uses Poi for development
 92 | 
 93 | * yarn dev: Run example in development mode
 94 | * yarn build: Build component in both format
 95 | * yearn test: Run test component
 96 | 
 97 | ## License
 98 | 
 99 | MIT
100 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <input class="check-input" type="text" placeholder="请选择地址" @click="selectAddress">
 4 |     <p v-for="item in content" :key="item.id">{{ item.address }}</p>
 5 |     <vue-check-list
 6 |       :visible="dialogVisible"
 7 |       :data="lineData"
 8 |       :maxlength="maxlength"
 9 |       @on-cancel="hanldeCancel"
10 |       @on-change="handleChange">
11 |     </vue-check-list>
12 |   </div>
13 | </template>
14 | 
15 | 
16 | <script>
17 | import {VueCheckList} from '../src/index'
18 | 
19 | export default {
20 |   components: {
21 |     VueCheckList
22 |   },
23 |   props: {
24 |   },
25 |   data() {
26 |     return {
27 |       content: [],
28 |       dialogVisible: false,
29 |       lineData: [
30 |         {id: 1, address: '厦门软件园二期' },
31 |         {id: 2, address: '厦门软件园三期' },
32 |         {id: 3, address: '厦门软件园四期' },
33 |         {id: 4, address: '厦门软件园五期' },
34 |         {id: 5, address: '厦门软件园六期' },
35 |         {id: 6, address: '厦门软件园七期' },
36 |         {id: 7, address: '厦门软件园八期' },
37 |         {id: 8, address: '厦门软件园九期' }
38 |       ],
39 |       maxlength: 5
40 |     }
41 |   },
42 | 
43 |   methods: {
44 |     selectAddress() {
45 |       document.activeElement.blur()
46 |       this.dialogVisible = true
47 |     },
48 |     hanldeCancel(scope) { if (scope) { this.dialogVisible = false } },
49 |     handleChange(scope) {
50 |       this.content = []
51 |       for (let i = 0; i < scope.length; i++) {
52 |         this.content.push(scope[i])
53 |       }
54 |       this.dialogVisible = false
55 |     }
56 |   },
57 | 
58 |   mounted() {
59 | 
60 |   }
61 | }
62 | </script>
63 | 
64 | <style lang="scss" src="../src/styles/common.scss"></style>
65 | <style scoped>
66 | .check-input {
67 |   border: 1px solid #000;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/dev/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-checklist",
 3 |   "version": "1.2.9",
 4 |   "description": "checklist using vue2.0",
 5 |   "keywords": [
 6 |     "vue2-checklist",
 7 |     "checklist"
 8 |   ],
 9 |   "author": "angelasubi",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/angelasubi/vue2-checklist.git"
13 |   },
14 |   "main": "dist/vue2-checklist.js",
15 |   "files": [
16 |     "dist"
17 |   ],
18 |   "scripts": {
19 |     "dev": "poi dev/index.js",
20 |     "build": "poi build ./src/index.js --library Vue2CheckList",
21 |     "test": "poi test/index.js"
22 |   },
23 |   "devDependencies": {
24 |     "node-sass": "^4.7.2",
25 |     "sass-loader": "^6.0.6"
26 |   },
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/angelasubi/vue2-checklist/issues"
30 |   },
31 |   "homepage": "https://github.com/angelasubi/vue2-checklist#readme"
32 | }
33 | 


--------------------------------------------------------------------------------
/poi.config.js:
--------------------------------------------------------------------------------
 1 | const path = require(`path`)
 2 | 
 3 | module.exports = {
 4 |   extractCSS: false,
 5 |   entry: path.resolve(__dirname, './dev/index.js'),
 6 |   vendor: false,
 7 |   filename: {
 8 |     js: 'vue2-checklist.js'
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/VueCheckList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue2-checklist">
  3 |     <div class="content" v-show="getShow">
  4 |       <div class="topbar">
  5 |         <span class="cancel" @click="handleCancel">取消</span>
  6 |         <span class="address">选择地址</span>
  7 |         <span class="success" @click="handleSuccess">完成</span>
  8 |       </div>
  9 |       <div class="desc">
 10 |         已经选择{{ addressLen }}个地址，最多可选{{ maxlength }}个
 11 |       </div>
 12 |       <div class="list">
 13 |         <div class="line"
 14 |           v-for="item in lineData"
 15 |           :key="item.address">
 16 |           <div class="p">
 17 |             <div class="cont">{{ item.address }}</div>
 18 |             <div :class="classState(item.classShow)"
 19 |                  @click="changeClass(item, $event)" ref="check">
 20 |               ✓</div>
 21 |           </div>
 22 |         </div>
 23 |       </div>
 24 |     </div>
 25 |     <div class="mask" v-show="getShow" @click="handleMask"></div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | export default {
 31 |   name: 'vue2-checklist',
 32 |   props: {
 33 |     data: {
 34 |       type: Array,
 35 |       default: []
 36 |     },
 37 |     visible: {
 38 |       type: Boolean,
 39 |       default: false
 40 |     },
 41 |     maxlength: {
 42 |       type: Number,
 43 |       default: 2
 44 |     }
 45 |   },
 46 |   data() {
 47 |     return {
 48 |       resData: []
 49 |     }
 50 |   },
 51 | 
 52 |   computed: {
 53 |     addressLen () {
 54 |       return this.lineData.filter(v => v.classShow).length
 55 |     },
 56 |     getShow() { return this.visible },
 57 |     lineData() {
 58 |       for (let i = 0; i < this.data.length; i++) {
 59 |         this.$set(this.data[i], 'classShow', false)
 60 |       }
 61 |       return this.data
 62 |     }
 63 |   },
 64 | 
 65 |   methods: {
 66 |     changeClass(item, $event) {
 67 |       if ($event.target.className == 'check-disabled') { return false }
 68 |       item.classShow = !item.classShow
 69 |     },
 70 |     classState(state) {
 71 |       if (state) {
 72 |         if (this.addressLen == this.maxlength) {
 73 |           let dom = document.querySelectorAll('.dis-rad')
 74 |           for (let i = 0; i < dom.length; i++) {
 75 |             dom[i].setAttribute('class', 'check-disabled')
 76 |           }
 77 |         } else if (this.addressLen < this.maxlength + 1) {
 78 |           let dom = document.querySelectorAll('.check-disabled')
 79 |           for (let i = 0; i < dom.length; i++) {
 80 |             dom[i].setAttribute('class', 'dis-rad')
 81 |           }
 82 |         }
 83 |         return 'rad'
 84 |       } else {
 85 |         return 'dis-rad'
 86 |       }
 87 |     },
 88 |     handleCancel() { this.$emit('on-cancel', true) },
 89 |     handleSuccess() {
 90 |       this.resData = []
 91 |       this.lineData.forEach(v => {
 92 |         if (v.classShow) {
 93 |           this.resData.push(v)
 94 |         }
 95 |       })
 96 |       this.$emit('on-change', this.resData)
 97 |     },
 98 |     handleMask() { this.handleCancel() }
 99 |   },
100 | 
101 |   created() {
102 |   }
103 | }
104 | </script>
105 | 
106 | <style lang="scss" src="./styles/common.scss"></style>
107 | <style lang="scss" src="./styles/check-list.scss"></style>
108 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Vue2-CheckList
 3 |  */
 4 | import VueCheckList from './VueCheckList.vue'
 5 | 
 6 | const Vue2CheckList = {
 7 |   install: function(Vue) {
 8 |     Vue.component(VueCheckList.name, VueCheckList)
 9 |   }
10 | }
11 | 
12 | if (typeof window !== 'undefined' && window.Vue) {
13 |   window.Vue.use(Vue2CheckList)
14 | }
15 | 
16 | export default Vue2CheckList
17 | export { VueCheckList }
18 | 


--------------------------------------------------------------------------------
/src/styles/check-list.scss:
--------------------------------------------------------------------------------
 1 | .vue2-checklist {
 2 |   .content {
 3 |     width: 100%;
 4 |     position: fixed;
 5 |     bottom: 0;
 6 |     z-index: 199;
 7 |     background-color: #fff;
 8 |     .topbar {
 9 |       display: -webkit-flex;
10 |       display: flex;
11 |       justify-content: space-between;
12 |       align-items: center;
13 |       height: 44px;
14 |       font-size: 16px;
15 |       padding: 6px 15px;
16 |       border-bottom: 1px solid #E5E5E5;
17 |       .cancel {
18 |         color: #888;
19 |       }
20 |       .success {
21 |         color: #1AAD19
22 |       }
23 |     }
24 |     .desc {
25 |       font-size: 14px;
26 |       text-align: right;
27 |       color: #c1bebe;
28 |       padding: 4px 10px 2px 0;
29 |     }
30 |     .list {
31 |       height: 200px;
32 |       padding: 10px 15px;
33 |       overflow-y: auto;
34 |       -webkit-overflow-scrolling: touch;
35 |       overflow-scrolling: touch;
36 |       .line {
37 |         border-bottom: 1px solid #f5f5f5;
38 |         .p {
39 |           display: -webkit-flex;
40 |           display: flex;
41 |           justify-content: center;
42 |           align-items: center;
43 |           height: 40px;
44 |           .cont {
45 |             display: -webkit-flex;
46 |             display: flex;
47 |             flex-direction: column;
48 |             justify-content: center;
49 |             align-items: flex-start;
50 |             width: 90%;
51 |           }
52 |           .rad {
53 |             width: 22px;
54 |             height: 22px;
55 |             border-radius: 50%;
56 |             background-color: #09BB07;
57 |             color: #fff;
58 |             text-align: center;
59 |             line-height: 22px;
60 |           }
61 |           .dis-rad {
62 |             width: 20px;
63 |             height: 20px;
64 |             border-radius: 50%;
65 |             border: 1px solid #C9C9C9;
66 |             background-color: #fff;
67 |             color: #fff;
68 |             text-align: center;
69 |             line-height: 20px;
70 |           }
71 |           .check-disabled {
72 |             width: 20px;
73 |             height: 20px;
74 |             border-radius: 50%;
75 |             border: 1px solid #C9C9C9;
76 |             background-color: #C9C9C9;
77 |             color: #C9C9C9;
78 |             text-align: center;
79 |             line-height: 20px;
80 |           }
81 |         }
82 |       }
83 |     }
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/styles/common.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   .mask {
 5 |     position: fixed;
 6 |     top: 0;
 7 |     left: 0;
 8 |     right: 0;
 9 |     bottom: 0;
10 |     z-index: 188;
11 |     background: rgba(0, 0, 0, .5);
12 |     transition: all .5s;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Test from './test.vue'
 3 | 
 4 | import Vue2Checklist from '../dist/vue2-checklist.js'
 5 | 
 6 | Vue.use(Vue2Checklist)
 7 | 
 8 | new Vue({
 9 |   el: '#app',
10 |   render: h => h(Test)
11 | })
12 | 


--------------------------------------------------------------------------------
/test/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <input type="text" @click="selectAddress">
 4 |     <vue2-checklist
 5 |       :data="testData"
 6 |       :visible="dialogVisible"
 7 |       :maxlength="maxlength"
 8 |       @on-cancel="dialogVisible=false"
 9 |       @on-change="handleChange"
10 |     ></vue2-checklist>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | 
16 | export default {
17 |   data() {
18 |     return {
19 |       testData: [
20 |         {id: 1, address: '厦门软件园1期' },
21 |         {id: 2, address: '厦门软件园2期' },
22 |         {id: 3, address: '厦门软件园3期' },
23 |         {id: 4, address: '厦门软件园4期' },
24 |         {id: 5, address: '厦门软件园5期' },
25 |         {id: 6, address: '厦门软件园6期' },
26 |         {id: 7, address: '厦门软件园7期' }
27 |       ],
28 |       dialogVisible: false,
29 |       maxlength: 3
30 |     }
31 |   },
32 | 
33 |   methods: {
34 |     selectAddress() {
35 |       document.activeElement.blur()
36 |       this.dialogVisible = true
37 |     },
38 |     handleChange(scope) {
39 |       console.log(scope, 'val')
40 |       this.dialogVisible = false
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | input {
48 |   border: 1px solid #000;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------