test

├── .babelrc ├── .gitignore ├── index.html ├── src ├── index.js └── lib │ ├── util │ └── index.js │ └── components │ ├── al-cascader.vue │ └── al-selector.vue ├── LICENSE ├── package.json ├── webpack.config.js ├── README.md └── READEME_EN.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-3"], 3 | "comments": false 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import alSelector from './lib/components/al-selector.vue'; 2 | import alCascader from './lib/components/al-cascader.vue'; 3 | 4 | const iviewArea = { 5 | alSelector, 6 | alCascader 7 | }; 8 | 9 | const install = function(Vue, opts = {}) { 10 | Vue.component(alSelector.name, alSelector); 11 | Vue.component(alCascader.name, alCascader); 12 | }; 13 | 14 | if (typeof window !== 'undefined' && window.Vue) { 15 | install(window.Vue); 16 | } 17 | 18 | export default Object.assign(iviewArea, {install}); -------------------------------------------------------------------------------- /src/lib/util/index.js: -------------------------------------------------------------------------------- 1 | let util = {}; 2 | 3 | util.levelArr = [0, 1, 2, 3]; 4 | 5 | util.oneOf = (item, arr) => { 6 | return arr.some(i => { 7 | return i === item; 8 | }); 9 | }; 10 | util.getIndex = (list, name) => { 11 | for (const i in list) { 12 | if (list[i] === name) { 13 | return i; 14 | } 15 | } 16 | }; 17 | 18 | util.dataType = ['all', 'code', 'name']; 19 | 20 | util.checkLevel = val => { 21 | return util.oneOf(val, util.levelArr); 22 | }; 23 | 24 | export default util; 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Lison 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iview-area", 3 | "version": "1.6.0", 4 | "description": "An area-linkage-component bases on Vue and iView-UI components", 5 | "author": "Lison", 6 | "license": "MIT", 7 | "private": false, 8 | "main": "./dist/iview-area.js", 9 | "scripts": { 10 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 11 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/iview/iview-area.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/iview/iview-area/issues" 19 | }, 20 | "homepage": "https://github.com/iview/iview-area#readme", 21 | "dependencies": { 22 | "area-data": "^1.0.0", 23 | "iview": "^3.0.0", 24 | "vue": "^2.5.17" 25 | }, 26 | "keywords": [ 27 | "vue", 28 | "iview", 29 | "area-linkage", 30 | "linkage", 31 | "area" 32 | ], 33 | "devDependencies": { 34 | "babel-core": "^6.26.0", 35 | "babel-loader": "^7.1.2", 36 | "babel-preset-env": "^1.6.0", 37 | "babel-preset-stage-3": "^6.24.1", 38 | "cross-env": "^5.0.5", 39 | "css-loader": "^0.28.7", 40 | "file-loader": "^1.1.4", 41 | "vue-loader": "^13.0.5", 42 | "vue-template-compiler": "^2.5.17", 43 | "webpack": "^3.6.0", 44 | "webpack-dev-server": "^2.9.1" 45 | }, 46 | "engines": { 47 | "node": ">= 4.0.0", 48 | "npm": ">= 3.0.0" 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions", 53 | "not ie <= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'iview-area.js', 10 | library: 'iviewArea', 11 | libraryTarget: 'umd', 12 | umdNamedDefine: true 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.css$/, 18 | use: [ 19 | 'vue-style-loader', 20 | 'css-loader' 21 | ], 22 | }, { 23 | test: /\.vue$/, 24 | loader: 'vue-loader', 25 | options: { 26 | loaders: { 27 | } 28 | // other vue-loader options go here 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | loader: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|svg)$/, 38 | loader: 'file-loader', 39 | options: { 40 | name: '[name].[ext]?[hash]' 41 | } 42 | } 43 | ] 44 | }, 45 | resolve: { 46 | alias: { 47 | 'vue$': 'vue/dist/vue.esm.js' 48 | }, 49 | extensions: ['*', '.js', '.vue', '.json'] 50 | }, 51 | devServer: { 52 | historyApiFallback: true, 53 | noInfo: true, 54 | overlay: true 55 | }, 56 | performance: { 57 | hints: false 58 | }, 59 | devtool: '#eval-source-map' 60 | } 61 | 62 | if (process.env.NODE_ENV === 'production') { 63 | module.exports.devtool = '#source-map' 64 | // http://vue-loader.vuejs.org/en/workflow/production.html 65 | module.exports.plugins = (module.exports.plugins || []).concat([ 66 | new webpack.DefinePlugin({ 67 | 'process.env': { 68 | NODE_ENV: '"production"' 69 | } 70 | }), 71 | new webpack.optimize.UglifyJsPlugin({ 72 | sourceMap: true, 73 | compress: { 74 | warnings: false 75 | } 76 | }), 77 | new webpack.LoaderOptionsPlugin({ 78 | minimize: true 79 | }) 80 | ]) 81 | } 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iview-area 2 | [![npm](https://img.shields.io/npm/v/iview-area.svg)]() 3 | 4 | > 一款基于Vue框架和iView-UI组件库开发的城市级联组件，数据包含中国的省(直辖市)、市、县区和乡镇街，数据来源[area-data](https://github.com/dwqs/area-data) 5 | 6 | **[English Document](https://github.com/iview/iview-area/blob/dev/READEME_EN.md)** 7 | **[线上DEMO](https://iview.github.io/iview-area/)** 8 | 9 | iview-area有两种形式的级联: 10 | - 下拉菜单(基于iview的Select组件) 11 | - 级联选择(基于iview的Cascader组件) 12 | 13 | # install 安装 14 | ``` 15 | npm install iview-area --save 16 | ``` 17 | # use 使用 18 | 在main.js中写入下面的代码 19 | ```javascript 20 | import iviewArea from 'iview-area'; 21 | import Vue from 'vue'; 22 | Vue.use(iviewArea); 23 | ``` 24 | 接下来，你就可以在页面中使用iview-area了 25 | ```vue 26 | 30 | 40 | ``` 41 | # config 配置 42 | 43 | ### al-selector: 44 | 45 | 属性 | 说明 | 类型 | 默认值 46 | :-------: | ------- | :-------: | :-------: 47 | value|用于存放结果的数组，建议使用v-model来做双向绑定|Array|无 48 | v-model|用于存放结果的数组，选择了数据后会自动更新，可传入默认显示的数据，详见表格下补充|Array|无 49 | gutter|设置各级别选择器之间的距离，单位px|String | Number|10 50 | level|要显示的级别，如设为2则显示省、市和县，即3级，级别可设为0、1、2、3四级|String | Number|3 51 | data-type|返回数据的类型，'all':城市编码和名称，'code':只返回编码，'name':只返回名称，数据格式请看表格下面的补充说明|String|all 52 | searchable|是否可搜索，添加该属性则点击选择器后可输入名称搜索|Boolean|false 53 | size|选择器尺寸，该属性同iview组件select的size属性，可选值为small，large，default|String|default 54 | auto|是否在选择一级之后自动选择之后所有等级的选择器（自动选中为列表第一项）|Boolean|false 55 | placeholder|选择器未选择时显示的占位字符,若为字符串，则各级别选择器均使用该作为占位字符，若为数组，根据数组对应位置的字符串设置选择器占位字符，若数组元素少于级别数，缺省的则设为默认数组中对应的占位字符|Array | String|['请选择省', '请选择市', '请选择县区', '请选择街道'] 56 | not-found-text|无数据时显示的文字提示，规则同placeholder属性|Array | String|['无匹配市', '无匹配县区', '无匹配街道'] 57 | disabled|设置禁用整个级联选择器或某个级别的选择器，可只写``disabled``，也可写``:disabled="true"``或``"false"``，或传入一个数组，如禁用二级和四级选择器则为``[1, 3]``，也可传入数值指定从指定级别开始禁用|Boolean | Array | Number|false 58 | 59 | 事件 | 说明 | 返回值 60 | :-------: | ------- | :-------: 61 | on-change|选择完成后的回调，返回值此时已选的数据数组|data 62 | 63 | ##### 补充说明： 64 | 65 | > **data-type数据格式补充说明:** 66 | > 67 | > - data-type="all"时，返回数据格式如下： 68 | > ``` 69 | > [ 70 | > { 71 | > code: '130000', 72 | > name: '河北省' 73 | > }, 74 | > { 75 | > code: '130100', 76 | > name: '石家庄市' 77 | > } 78 | > ] 79 | > ``` 80 | > - data-type="name"时，返回数据格式如下： 81 | > ``` 82 | > ['河北省', '石家庄市'] 83 | > ``` 84 | > - data-type="code"时，返回数据格式如下： 85 | > ``` 86 | > ['130000', '130100'] 87 | > ``` 88 | > **v-model属性补充说明:** 89 | > 90 | > - 传入名称数组，若所设地方名称未找到或地方所属关系不对，则显示该等级列表中第一个地方，若数组地方个数少于城市及联选择器的等级数目，则后面缺省的地方名默认已列表中第一个地方显示；且如果设置了数组且不为空，则每次选择一个等级的地方后下面级别的选择器的列表都会更新，且默认选中的为对应列表中第一个地方 91 | > ``` 92 | > ex: ['河北省', '长春市'] 93 | > ``` 94 | > - 传入编号数组，若所设编号未找到对应地方或地方所属关系不对，则显示该等级列表中第一个地方，规则同上 95 | > ``` 96 | > ex: ['130000', '120100'] 97 | > ``` 98 | > - 传入空数组 [] 99 | 100 | ### al-cascader: 101 | 102 | 属性 | 说明 | 类型 | 默认值 103 | :-------: | ------- | :-------: | :-------: 104 | value|用于存放结果的数组，建议使用v-model来做双向绑定|无|无 105 | v-model|用于存放结果的数组，选择了数据后会自动更新|无|无 106 | level|要显示的级别，如设为2则显示省、市和县，即3级，级别可设为0、1、2、3四级|String | Number|3 107 | data-type|返回数据的类型，'all':城市编码和名称，'code':只返回编码，'name':只返回名称，数据格式同al-selector补充说明|String|all 108 | size|选择器尺寸，该属性同iview组件cascader的size属性，可选值为small，large|String|无 109 | placeholder|选择器未选择时显示的占位字符|String|'请选择'] 110 | disabled|是否禁用选择器|Boolean|false 111 | render-format|选择后展示的函数，用于自定义显示格式|Function|``label => label.join(' / ')`` 112 | 113 | 事件 | 说明 | 返回值 114 | :-------: | ------- | :-------: 115 | on-change|选择完成后的回调，返回值此时已选的数据数组|data 116 | -------------------------------------------------------------------------------- /READEME_EN.md: -------------------------------------------------------------------------------- 1 | 2 | # iview-area 3 | 4 | > An area-linkage-component bases on Vue and iView-UI components, data include China's provinces (municipalities), cities, counties and streets. Data sources: [area-data](https://github.com/dwqs/area-data) 5 | 6 | iview-area has two forms: 7 | - select(bases on the select component of iview) 8 | - cascader(bases on the cascader component of iview) 9 | 10 | # install 11 | ``` 12 | npm install iview-area --save 13 | ``` 14 | # use 15 | write follow code in main.js 16 | ```javascript 17 | import iviewArea from 'iview-area'; 18 | import Vue from 'vue'; 19 | Vue.use(iviewArea); 20 | ``` 21 | and then, you can use iview-area anywhere 22 | ```vue 23 | 27 | 37 | ``` 38 | # config 39 | 40 | ### al-selector: 41 | 42 | props | note | type | default 43 | :-------: | ------- | :-------: | :-------: 44 | value|Array for storing results, it is recommended to use the v-model|none|none 45 | v-model|Array used to store the results, the data will update after selected|none|none 46 | gutter|Set the distance between deferent level selectors, in px|String | Number|10 47 | level|To show the level, if set to 2 shows the province, city and county, the level can be set to 0,1,2,3|String | Number|3 48 | data-type|The type of the return value, 'all': city code and name, 'code': return only the code, 'name': only return the name|String|all 49 | searchable|If it an search, add the attribute click the selector can enter the name search|Boolean|false 50 | size|Selector size, the property with iview component select size attribute, optional small, large, default|String|default 51 | default|The default display of data,please view the supplementary explanation under the table。|Array | null | undefined|none 52 | placeholder|The text displayed when selector is not selected. if placeholder is a string, each selectors will use this placeholder text, if it is an array, set the selector placeholder according to the string of the corresponding position of the array. If the array element Less than the number of levels, it will use default array to set it.|Array | String|['请选择省', '请选择市', '请选择县区', '请选择街道'] 53 | not-found-text|The text displayed when there is no data, the rules is same as placeholder attributes|Array | String|['无匹配市', '无匹配县区', '无匹配街道'] 54 | disabled|Set to disable the entire cascade selector or a specific level，it can be``disabled``，also be``:disabled="true"``or``"false"``，maybe an array just like``[1, 3]``，can also be a number about level|Boolean | Array | Number|false 55 | 56 | event | note | return value 57 | :-------: | ------- | :-------: 58 | on-change|Callback function after selection. value is the selected place array.|data 59 | 60 | ##### tips： 61 | 62 | > **The data format of data-type:** 63 | > 64 | > - data-type="all"： 65 | > ``` 66 | > [ 67 | > { 68 | > code: '130000', 69 | > name: '河北省' 70 | > }, 71 | > { 72 | > code: '130100', 73 | > name: '石家庄市' 74 | > } 75 | > ] 76 | > ``` 77 | > - data-type="name"： 78 | > ``` 79 | > ['河北省', '石家庄市'] 80 | > ``` 81 | > - data-type="code"： 82 | > ``` 83 | > ['130000', '130100'] 84 | > ``` 85 | > **default:** 86 | > 87 | > - Incoming name array, if the name of the place is not found or the local affiliation is wrong, then the first place in the level list is displayed. If the number of places in the array is less than the number of the level, it will display the first place in the list; and if the array is setted and it is not empty, it will always update the list of next level selector, and display the first place in the list. 88 | > ``` 89 | > ex: ['河北省', '长春市'] will show as ['河北省', '石家庄市'] 90 | > ``` 91 | > - Incoming code array, if the code was not find the corresponding place, or the place belongs to the wrong relationship, it will display the first place in the list, the same rules as name array. 92 | > ``` 93 | > ex: ['130000', '120100'] will show as ['河北省', '石家庄市'] 94 | > ``` 95 | > - If incom an empty array``[]``, or``undefined``, or``null``，or no ``default``，or setted ``default`` but there has no value, it will not show default value, and it will not update the list of next level after select a place, and will not set a default value. 96 | > ``` 97 | > ex: :default="null" :default="undefined" :default="[]" 98 | > ``` 99 | 100 | ### al-cascader: 101 | 102 | props | note | type | default 103 | :-------: | ------- | :-------: | :-------: 104 | value|Array for storing results, it is recommended to use the v-model|none|none 105 | v-model|Array used to store the results, the data will update after selected|none|none 106 | level|To show the level, if set to 2 shows the province, city and county, the level can be set to 0,1,2,3|String | Number|3 107 | data-type|The type of the return value, 'all': city code and name, 'code': return only the code, 'name': only return the name|String|all 108 | size|Selector size, the property with iview component select size attribute, optional small, large|String|none 109 | placeholder|The text displayed when selector is not selected.|String|'请选择'] 110 | disabled|Set to disable the entire cascader|Boolean|false 111 | render-format|Customize display format by sending a function to this property. It will be called after selection.|Function|``label => label.join(' / ')`` 112 | trigger|The way subset spreading. Optional value: ``click`` or ``hover``|String|click 113 | 114 | event | note | return value 115 | :-------: | ------- | :-------: 116 | on-change|Callback function after selection. value is the selected place array.|data 117 | -------------------------------------------------------------------------------- /src/lib/components/al-cascader.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 190 | -------------------------------------------------------------------------------- /src/lib/components/al-selector.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 378 | --------------------------------------------------------------------------------