├── .gitignore
├── LICENSE
├── README.md
├── config
    ├── index.js
    └── lib.config.js
├── dist
    ├── AddressData.js
    ├── CascadingPicker.css
    └── CascadingPicker.js
├── package.json
├── picker.gif
├── src
    ├── CascadingPicker
    │   └── CascadingPicker.vue
    └── index.js
└── webpack.config.js


/.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 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Alan Chen
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CascadingPicker
  2 | 
  3 | ![](https://img.shields.io/npm/v/cascading-picker.svg)
  4 | ![](https://img.shields.io/npm/dt/cascading-picker.svg)
  5 | ![](https://img.shields.io/github/license/alanchenchen/CascadingPicker.svg)
  6 | 
  7 | > Description: 基于vue2的三级联动选择器，支持自定义数据，默认提供地址三级联动数据
  8 | 
  9 | > Author: Alan Chen
 10 | 
 11 | > Contact: 739709491@qq.com
 12 | 
 13 | > Version: 0.2.2
 14 | 
 15 | > Date: 2018/10/15
 16 | 
 17 | > 插件只适配移动端，而且必须要用rem布局(设置html标签的font-size)
 18 | # Update Logs
 19 | * 新增data的prop，支持自定义三级联动数据，默认提供地址联动的数据`AddressData.js`
 20 | * 新增inital的prop，支持默认选中初始值
 21 | 
 22 | ![avatar](./picker.gif)
 23 | 
 24 | # Usage:
 25 | 1. 通过npm安装：`yarn add cascading-picker or npm install cascading-picker --save`
 26 | 2. 在SPA里模块引入或通过script标签引入, 然后直接使用组件
 27 | ```js
 28 |     // SPA模块引入. main.js
 29 |     import Vue from 'vue'
 30 |     import CascadingPicker from 'cascading-picker'
 31 |     import 'cascading-picker/dist/CascadingPicker.css'
 32 | 
 33 |     // 插件使用时提供一个name属性用于更改组件注册的名称，默认名称为CascadingPicker，主要是为了避免和其他ui库命名冲突
 34 |     Vue.use(CascadingPicker, {
 35 |         name: 'AlanCascadingPicker' // 此时组件注册后的名称为AlanCascadingPicker
 36 |     })
 37 | ```
 38 | ```html
 39 |     // html引入script标签
 40 |     <link rel="stylesheet" href="node_modules/cascading-picker/dist/CascadingPicker.css"></link >
 41 |     <script src="node_modules/cascading-picker/dist/CascadingPicker.js"></script>
 42 | ```
 43 | ```js
 44 |     // 必须先使用rem布局，App.vue
 45 |     export default {
 46 |         name: 'App',
 47 |         created() {
 48 |             // 手动实现的基于750像素设计图rem布局
 49 |             const doc = document.documentElement || document.body
 50 |             const docH = doc.getBoundingClientRect().width/7.5
 51 |             doc.style.fontSize = docH + 'px'
 52 |         }
 53 |     }
 54 | 
 55 |     // 在其他组件中直接使用CascadingPicker
 56 |     <template>
 57 |         <CascadingPicker 
 58 |             v-model="isPicker"
 59 |             :data="addressData"
 60 |             :initial="initial"
 61 |             closeOnClickModal
 62 |             @ok="selectAddress"
 63 |             @cancel="cancelAddress"
 64 |         />
 65 |     </template>
 66 | 
 67 |     <script>
 68 |         import addressData from 'cascading-picker/dist/AddressData'
 69 |         export default {
 70 |             name: 'example',
 71 |             data() {
 72 |                 return {
 73 |                     isPicker: false,
 74 |                     addressData: addressData,
 75 |                     initial: {
 76 |                         first: '湖北',
 77 |                         second: '武汉市',
 78 |                         third: '洪山区'
 79 |                     }
 80 |                 }
 81 |             },
 82 |             methods: {
 83 |                 selectAddress(res) {
 84 |                     console.log(`你选中的是：${res.first},${res.second},${res.third}`)
 85 |                 },
 86 |                 cancelAddress() {   
 87 |                     console.log('你取消了地址选择器')
 88 |                 }
 89 |             }
 90 |         }
 91 |     </script>
 92 | 
 93 | ```
 94 | # Component options
 95 | ## props
 96 | * data `[Array]` 必选，三级联动的数据，可以选择插件提供的`AddressData`，或手动书写，但格式和key必须与`AddressData`一致
 97 | * value `[Boolean]` 可选，控制地址选择器显示与否,可以使用v-model绑定变量，默认为false
 98 | * initial `[Object]` 可选，格式为{first:'', second: '', third: ''}，对应的value必须是data中的字符串，如果不是，则默认显示第一条 
 99 | * closeOnClickModal `[Boolean]` 可选，是否能够点击遮罩层来关闭，默认为false
100 | 
101 | ## emit events
102 | * ok，点击确定按钮触发。返回一个参数，格式为{first: '', second: '', third: ''}，为选中的值
103 | * cancel，点击取消按钮触发(如果closeOnClickModal为true，点击遮罩层也会触发)，如果开启closeOnClickModal也会触发，无参数返回值
104 | 
105 | ## slots
106 | * okText, 字符串，点击右侧确定按钮的文本
107 | * cancelText, 字符串，点击左侧取消按钮的文本
108 | 
109 | # Somethind to say
110 | * 这个插件原本只是我很早之前写的，所以就没提供npm包，但是后来看到越来越多人给我发邮件，或提issue，或找我qq聊天询问一些问题，意识到还是有很多人对这个组件有需求。再三思考后，决定对组件进行功能优化和轻量重构，现在提供自定义数据，提供v-model绑定，提供默认选中值，这些改变都是为了更好的开发体验。
111 | * 很多人遇到的组件无法滚动问题，其实是移动端布局问题。必须声明这个组件是基于rem布局，为什么我一定要用rem布局？首先rem布局比普通百分比布局(或栅格响应式)体验更好。主流布局基本是纯rem或类似于手淘`flexible.js`的rem和viewport动态缩放一起使用。我很早之前在做移动端页面开发(app内嵌),在非常老的webview内使用rem布局是完全没有兼容问题的。所以我推荐大家使用rem布局(或直接使用`flexible.js`)
112 | * 另外推荐大家可以使用我的另外两个开源插件[v-scoller](https://github.com/alanchenchen/v-scroller)和[vue2-dialog](https://github.com/alanchenchen/vue2-dialog)，后者本身是对常用弹窗和滚动组件的集合。Thanks！
113 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @module 调用npm命令的主要逻辑模块
  3 |  * @param {String} g 生成一个package.json缓存文件
  4 |  * @param {String} rm 删除已有的package.json缓存文件
  5 |  * @param {String} d 将缓存文件覆盖源package.json
  6 |  * @param {String} h 查看命令参数帮助
  7 |  */
  8 | const fs = require('fs')
  9 | const path = require('path')
 10 | const chalk = require('chalk')
 11 | const inquirer = require('inquirer')
 12 | 
 13 | 
 14 | const ROOTPATH = process.cwd()
 15 | const config = require('./lib.config')
 16 | const sourcePath = path.join(ROOTPATH, 'package.json')
 17 | const copyPath = path.join(__dirname, 'temporary.json')
 18 | 
 19 | const CommandParam = process.argv[2]
 20 | 
 21 | // 显示帮助log
 22 | const showHelper = () => {
 23 |     console.log(chalk`
 24 |     {blue Usage:} 
 25 | 
 26 |         {green g}  {yellow generate the temporary.json, if there is already one it will be overlapped}
 27 |         {green rm}  {yellow remove the temporary.json}
 28 |         {green d}  {yellow apply the temporary.json to root path}
 29 |         {green h}  {yellow show the config command help} 
 30 |     `)
 31 | }
 32 | 
 33 | // 读取源package.json，然后修改，写入新的json到一个缓存文件
 34 | const modifyAndWriteJSON = () => {
 35 |     const version = config.version || '0.0.1'
 36 |     const keywords = config.keywords || []
 37 |     const author = config.author || 'Alan Chen'
 38 |     
 39 |     fs.readFile(sourcePath, 'utf8', (err, data) => {
 40 |         if(err) {
 41 |             // console.log(chalk.red(err))
 42 |             console.log(chalk`{yellow package.json源文件读取失败}`)
 43 |         }
 44 |         let copyPackageJson = JSON.parse(data)
 45 |     
 46 |         copyPackageJson.name = config.libraryName
 47 |         copyPackageJson.version = version
 48 |         copyPackageJson.description = config.description
 49 |         copyPackageJson.main = `dist/${config.bundleName}.js`
 50 |         copyPackageJson.keywords = keywords
 51 |         copyPackageJson.author = author
 52 |         copyPackageJson.repository = config.repository
 53 |         copyPackageJson.homepage = config.repository.url
 54 |         
 55 |         const newJson = JSON.stringify(copyPackageJson, null, 2) //格式化输出json文件
 56 |         
 57 |         fs.writeFile(copyPath, newJson, err => {
 58 |             if(err) {
 59 |                 // console.log(chalk.red(err))
 60 |                 console.log(chalk`{yellow package.json缓存文件写入失败}`)
 61 |             }
 62 |             else {
 63 |                 console.log(chalk.green(`package.json缓存文件写入成功！`))
 64 |             }
 65 |         })
 66 |     })
 67 | }
 68 | 
 69 | // 调用unlink删除文件和remae改变路径之前必须先用access检测文件是否存在
 70 | const checkJSONExist = path => {
 71 |     return new Promise((resolve, reject) => {
 72 |         fs.access(path, fs.constants.F_OK, err => {
 73 |             if(err) {
 74 |                 // console.log(chalk.red(err))
 75 |                 console.log(chalk`{yellow 没有发现package.json缓存文件,请先yarn/npm run config g 生成缓存文件}`)
 76 |             }
 77 |             else {
 78 |                 resolve()
 79 |             }
 80 |         })
 81 |     })
 82 | }
 83 | 
 84 | // 删除缓存文件
 85 | const removeJSON = () => {
 86 |     checkJSONExist(copyPath)
 87 |         .then(() => {
 88 |             fs.unlink(copyPath, err => {
 89 |                 if(err) {
 90 |                     // console.log(chalk.red(err))
 91 |                     console.log(chalk`{yellow package.json缓存文件删除失败}`)
 92 |                 }
 93 |                 else {
 94 |                     console.log(chalk`{green package.json缓存文件删除成功！}`)
 95 |                 }
 96 |             })
 97 |         })
 98 | }
 99 | 
100 | // 覆盖源package.json
101 | const deposit = () => {
102 |     inquirer.prompt([{
103 |         type: 'list',
104 |         name: 'deposit',
105 |         message: chalk.green('此操作将会用缓存文件覆盖根目录下的package.json'),
106 |         choices: [
107 |             {name: '执行', value: true, short: chalk.green('覆盖源package.json')}, 
108 |             {name: '取消', value: false, short: chalk.red('取消')}
109 |         ]
110 |     }])
111 |     .then(answers => {
112 |         if(answers.deposit) {
113 |             checkJSONExist(copyPath)
114 |                 .then(() => {
115 |                     fs.rename(copyPath, sourcePath, err => {
116 |                         if(err) {
117 |                             // console.log(chalk.red(err))
118 |                             console.log(chalk`{yellow package.json文件覆盖失败}`)
119 |                         }
120 |                         else {
121 |                             console.log(chalk.bgBlue(`package.json文件覆盖成功！ 可以使用npm run buil打包，然后npm publish发布`))
122 |                         }
123 |                     })
124 |                 }) 
125 |         }
126 | 
127 |     })
128 | }
129 | 
130 | switch (CommandParam) {
131 |     case 'g':
132 |         modifyAndWriteJSON()
133 |         break
134 |     case 'rm': 
135 |         removeJSON()
136 |         break
137 |     case 'd': 
138 |         deposit()
139 |         break
140 |     case 'h':
141 |         showHelper()
142 |         break
143 |     default: 
144 |         showHelper()
145 |         break
146 | }


--------------------------------------------------------------------------------
/config/lib.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @module 配置package.json的参数和webpack.config的参数。
 3 |  * 
 4 |  */
 5 | module.exports = {
 6 |     libraryName: 'cascading-picker', // npm包名，首字母不允许大写，支持驼峰和短杆写法
 7 |     bundleName: 'CascadingPicker', // 打包后文件名，也是UMD script直接引入挂在windows对象的key名
 8 |     version: '0.2.2', // 版本号
 9 |     description: 'CascadingPicker for Vue 2', // 包描述
10 |     keywords: ['vue2', 'address-picker', 'address-picker-vue', 'CascadingPicker'], // 关键词
11 |     author: 'Alan Chen', // 作者
12 |     repository: { // 仓库地址和首页地址
13 |         type: 'git',
14 |         url: 'https://github.com/alanchenchen/vue-address-picker'
15 |     }
16 | }


--------------------------------------------------------------------------------
/dist/AddressData.js:
--------------------------------------------------------------------------------
  1 | //地址库
  2 | export default [
  3 |     {name:'北京市', list:[		   
  4 |         {secondList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区','密云县','延庆县']}   
  5 |     ]},
  6 |     {name:'天津市', list:[		   
  7 |         {secondList:['和平区','河东区','河西区','南开区','河北区','红桥区','塘沽区','汉沽区','大港区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','宁河县','静海县','蓟县']}		   
  8 |     ]},
  9 |     {name:'河北', list:[		   
 10 |         {name:'石家庄市', secondList:['长安区','桥东区','桥西区','新华区','井陉矿区','裕华区','井陉县','正定县','栾城县','行唐县','灵寿县','高邑县','深泽县','赞皇县','无极县','平山县','元氏县','赵县','辛集市','藁城市','晋州市','新乐市','鹿泉市']},		   
 11 |         {name:'唐山市', secondList:['路南区','路北区','古冶区','开平区','丰南区','丰润区','滦　县','滦南县','乐亭县','迁西县','玉田县','唐海县','遵化市','迁安市']},		   
 12 |         {name:'秦皇岛市', secondList:['海港区','山海关区','北戴河区','青龙满族自治县','昌黎县','抚宁县','卢龙县']},		   
 13 |         {name:'邯郸市', secondList:['邯山区','丛台区','复兴区','峰峰矿区','邯郸县','临漳县','成安县','大名县','涉县','磁县','肥乡县','永年县','邱县','鸡泽县','广平县','馆陶县','魏县','曲周县','武安市']},		   
 14 |         {name:'邢台市', secondList:['桥东区','桥西区','邢台县','临城县','内丘县','柏乡县','隆尧县','任　县','南和县','宁晋县','巨鹿县','新河县','广宗县','平乡县','威县','清河县','临西县','南宫市','沙河市']},		   
 15 |         {name:'保定市', secondList:['新市区','北市区','南市区','满城县','清苑县','涞水县','阜平县','徐水县','定兴县','唐　县','高阳县','容城县','涞源县','望都县','安新县','易县','曲阳县','蠡县','顺平县','博野县','雄县','涿州市','定州市','安国市','高碑店市']},		   
 16 |         {name:'张家口市', secondList:['桥东区','桥西区','宣化区','下花园区','宣化县','张北县','康保县','沽源县','尚义县','蔚　县','阳原县','怀安县','万全县','怀来县','涿鹿县','赤城县','崇礼县']},		   
 17 |         {name:'承德市', secondList:['双桥区','双滦区','鹰手营子矿区','承德县','兴隆县','平泉县','滦平县','隆化县','丰宁满族自治县','宽城满族自治县','围场满族蒙古族自治县']},		   
 18 |         {name:'沧州市', secondList:['新华区','运河区','沧　县','青县','东光县','海兴县','盐山县','肃宁县','南皮县','吴桥县','献县','孟村回族自治县','泊头市','任丘市','黄骅市','河间市']},		   
 19 |         {name:'廊坊市', secondList:['安次区','广阳区','固安县','永清县','香河县','大城县','文安县','大厂回族自治县','霸州市','三河市']},		   
 20 |         {name:'衡水市', secondList:['桃城区','枣强县','武邑县','武强县','饶阳县','安平县','故城县','景县','阜城县','冀州市','深州市']}
 21 |     ]},
 22 |     {name:'山西', list:[		   
 23 |         {name:'太原市', secondList:['小店区','迎泽区','杏花岭区','尖草坪区','万柏林区','晋源区','清徐县','阳曲县','娄烦县','古交市']},		   
 24 |         {name:'大同市', secondList:['城区','矿区','南郊区','新荣区','阳高县','天镇县','广灵县','灵丘县','浑源县','左云县','大同县']},		   
 25 |         {name:'阳泉市', secondList:['城区','矿区','郊区','平定县','盂县']},		   
 26 |         {name:'长治市', secondList:['城区','郊区','长治县','襄垣县','屯留县','平顺县','黎城县','壶关县','长子县','武乡县','沁县','沁源县','潞城市']},		   
 27 |         {name:'晋城市', secondList:['城区','沁水县','阳城县','陵川县','泽州县','高平市']},		   
 28 |         {name:'朔州市', secondList:['朔城区','平鲁区','山阴县','应县','右玉县','怀仁县']},		   
 29 |         {name:'晋中市', secondList:['榆次区','榆社县','左权县','和顺县','昔阳县','寿阳县','太谷县','祁县','平遥县','灵石县','介休市']},		   
 30 |         {name:'运城市', secondList:['盐湖区','临猗县','万荣县','闻喜县','稷山县','新绛县','绛　县','垣曲县','夏县','平陆县','芮城县','永济市','河津市']},		   
 31 |         {name:'忻州市', secondList:['忻府区','定襄县','五台县','代县','繁峙县','宁武县','静乐县','神池县','五寨县','岢岚县','河曲县','保德县','偏关县','原平市']},		   
 32 |         {name:'临汾市', secondList:['尧都区','曲沃县','翼城县','襄汾县','洪洞县','古县','安泽县','浮山县','吉县','乡宁县','大宁县','隰县','永和县','蒲县','汾西县','侯马市','霍州市']},		   
 33 |         {name:'吕梁市', secondList:['离石区','文水县','交城县','兴县','临县','柳林县','石楼县','岚县','方山县','中阳县','交口县','孝义市','汾阳市']}
 34 |     ]},
 35 |     {name:'内蒙古', list:[		   
 36 |         {name:'呼和浩特市', secondList:['新城区','回民区','玉泉区','赛罕区','土默特左旗','托克托县','和林格尔县','清水河县','武川县']},		   
 37 |         {name:'包头市', secondList:['东河区','昆都仑区','青山区','石拐区','白云矿区','九原区','土默特右旗','固阳县','达尔罕茂明安联合旗']},		   
 38 |         {name:'乌海市', secondList:['海勃湾区','海南区','乌达区']},		   
 39 |         {name:'赤峰市', secondList:['红山区','元宝山区','松山区','阿鲁科尔沁旗','巴林左旗','巴林右旗','林西县','克什克腾旗','翁牛特旗','喀喇沁旗','宁城县','敖汉旗']},		   
 40 |         {name:'通辽市', secondList:['科尔沁区','科尔沁左翼中旗','科尔沁左翼后旗','开鲁县','库伦旗','奈曼旗','扎鲁特旗','霍林郭勒市']},		   
 41 |         {name:'鄂尔多斯市', secondList:['东胜区','达拉特旗','准格尔旗','鄂托克前旗','鄂托克旗','杭锦旗','乌审旗','伊金霍洛旗']},		   
 42 |         {name:'呼伦贝尔市', secondList:['海拉尔区','阿荣旗','莫力达瓦达斡尔族自治旗','鄂伦春自治旗','鄂温克族自治旗','陈巴尔虎旗','新巴尔虎左旗','新巴尔虎右旗','满洲里市','牙克石市','扎兰屯市','额尔古纳市','根河市']},		   
 43 |         {name:'巴彦淖尔市', secondList:['临河区','五原县','磴口县','乌拉特前旗','乌拉特中旗','乌拉特后旗','杭锦后旗']},		   
 44 |         {name:'乌兰察布市', secondList:['集宁区','卓资县','化德县','商都县','兴和县','凉城县','察哈尔右翼前旗','察哈尔右翼中旗','察哈尔右翼后旗','四子王旗','丰镇市']},		   
 45 |         {name:'兴安盟', secondList:['乌兰浩特市','阿尔山市','科尔沁右翼前旗','科尔沁右翼中旗','扎赉特旗','突泉县']},		   
 46 |         {name:'锡林郭勒盟', secondList:['二连浩特市','锡林浩特市','阿巴嘎旗','苏尼特左旗','苏尼特右旗','东乌珠穆沁旗','西乌珠穆沁旗','太仆寺旗','镶黄旗','正镶白旗','正蓝旗','多伦县']},		   
 47 |         {name:'阿拉善盟', secondList:['阿拉善左旗','阿拉善右旗','额济纳旗']}
 48 |     ]},
 49 |     {name:'辽宁', list:[		   
 50 |         {name:'沈阳市', secondList:['和平区','沈河区','大东区','皇姑区','铁西区','苏家屯区','东陵区','新城子区','于洪区','辽中县','康平县','法库县','新民市']},		   
 51 |         {name:'大连市', secondList:['中山区','西岗区','沙河口区','甘井子区','旅顺口区','金州区','长海县','瓦房店市','普兰店市','庄河市']},		   
 52 |         {name:'鞍山市', secondList:['铁东区','铁西区','立山区','千山区','台安县','岫岩满族自治县','海城市']},		   
 53 |         {name:'抚顺市', secondList:['新抚区','东洲区','望花区','顺城区','抚顺县','新宾满族自治县','清原满族自治县']},		   
 54 |         {name:'本溪市', secondList:['平山区','溪湖区','明山区','南芬区','本溪满族自治县','桓仁满族自治县']},		   
 55 |         {name:'丹东市', secondList:['元宝区','振兴区','振安区','宽甸满族自治县','东港市','凤城市']},		   
 56 |         {name:'锦州市', secondList:['古塔区','凌河区','太和区','黑山县','义　县','凌海市','北宁市']},		   
 57 |         {name:'营口市', secondList:['站前区','西市区','鲅鱼圈区','老边区','盖州市','大石桥市']},		   
 58 |         {name:'阜新市', secondList:['海州区','新邱区','太平区','清河门区','细河区','阜新蒙古族自治县','彰武县']},		   
 59 |         {name:'辽阳市', secondList:['白塔区','文圣区','宏伟区','弓长岭区','太子河区','辽阳县','灯塔市']},		   
 60 |         {name:'盘锦市', secondList:['双台子区','兴隆台区','大洼县','盘山县']},		   
 61 |         {name:'铁岭市', secondList:['银州区','清河区','铁岭县','西丰县','昌图县','调兵山市','开原市']},		   
 62 |         {name:'朝阳市', secondList:['双塔区','龙城区','朝阳县','建平县','喀喇沁左翼蒙古族自治县','北票市','凌源市']},		   
 63 |         {name:'葫芦岛市', secondList:['连山区','龙港区','南票区','绥中县','建昌县','兴城市']}
 64 |     ]},
 65 |     {name:'吉林', list:[		   
 66 |         {name:'长春市', secondList:['南关区','宽城区','朝阳区','二道区','绿园区','双阳区','农安县','九台市','榆树市','德惠市']},		   
 67 |         {name:'吉林市', secondList:['昌邑区','龙潭区','船营区','丰满区','永吉县','蛟河市','桦甸市','舒兰市','磐石市']},		   
 68 |         {name:'四平市', secondList:['铁西区','铁东区','梨树县','伊通满族自治县','公主岭市','双辽市']},		   
 69 |         {name:'辽源市', secondList:['龙山区','西安区','东丰县','东辽县']},		   
 70 |         {name:'通化市', secondList:['东昌区','二道江区','通化县','辉南县','柳河县','梅河口市','集安市']},		   
 71 |         {name:'白山市', secondList:['八道江区','抚松县','靖宇县','长白朝鲜族自治县','江源县','临江市']},		   
 72 |         {name:'松原市', secondList:['宁江区','前郭尔罗斯蒙古族自治县','长岭县','乾安县','扶余县']},		   
 73 |         {name:'白城市', secondList:['洮北区','镇赉县','通榆县','洮南市','大安市']},		   
 74 |         {name:'延边朝鲜族自治州', secondList:['延吉市','图们市','敦化市','珲春市','龙井市','和龙市','汪清县','安图县']}
 75 |     ]},
 76 |     {name:'黑龙江', list:[		   
 77 |         {name:'哈尔滨市', secondList:['道里区','南岗区','道外区','香坊区','动力区','平房区','松北区','呼兰区','依兰县','方正县','宾县','巴彦县','木兰县','通河县','延寿县','阿城市','双城市','尚志市','五常市']},		   
 78 |         {name:'齐齐哈尔市', secondList:['龙沙区','建华区','铁锋区','昂昂溪区','富拉尔基区','碾子山区','梅里斯达斡尔族区','龙江县','依安县','泰来县','甘南县','富裕县','克山县','克东县','拜泉县','讷河市']},		   
 79 |         {name:'鸡西市', secondList:['鸡冠区','恒山区','滴道区','梨树区','城子河区','麻山区','鸡东县','虎林市','密山市']},		   
 80 |         {name:'鹤岗市', secondList:['向阳区','工农区','南山区','兴安区','东山区','兴山区','萝北县','绥滨县']},		   
 81 |         {name:'双鸭山市', secondList:['尖山区','岭东区','四方台区','宝山区','集贤县','友谊县','宝清县','饶河县']},		   
 82 |         {name:'大庆市', secondList:['萨尔图区','龙凤区','让胡路区','红岗区','大同区','肇州县','肇源县','林甸县','杜尔伯特蒙古族自治县']},		   
 83 |         {name:'伊春市', secondList:['伊春区','南岔区','友好区','西林区','翠峦区','新青区','美溪区','金山屯区','五营区','乌马河区','汤旺河区','带岭区','乌伊岭区','红星区','上甘岭区','嘉荫县','铁力市']},		   
 84 |         {name:'佳木斯市', secondList:['永红区','向阳区','前进区','东风区','郊区','桦南县','桦川县','汤原县','抚远县','同江市','富锦市']},		   
 85 |         {name:'七台河市', secondList:['新兴区','桃山区','茄子河区','勃利县']},		   
 86 |         {name:'牡丹江市', secondList:['东安区','阳明区','爱民区','西安区','东宁县','林口县','绥芬河市','海林市','宁安市','穆棱市']},		   
 87 |         {name:'黑河市', secondList:['爱辉区','嫩江县','逊克县','孙吴县','北安市','五大连池市']},		   
 88 |         {name:'绥化市', secondList:['北林区','望奎县','兰西县','青冈县','庆安县','明水县','绥棱县','安达市','肇东市','海伦市']},		   
 89 |         {name:'大兴安岭地区', secondList:['呼玛县','塔河县','漠河县']}
 90 |     ]},
 91 |     {name:'上海市', list:[		   
 92 |         {secondList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区','崇明县']}	   
 93 |     ]},
 94 |     {name:'江苏', list:[		   
 95 |         {name:'南京市', secondList:['玄武区','白下区','秦淮区','建邺区','鼓楼区','下关区','浦口区','栖霞区','雨花台区','江宁区','六合区','溧水县','高淳县']},		   
 96 |         {name:'无锡市', secondList:['崇安区','南长区','北塘区','锡山区','惠山区','滨湖区','江阴市','宜兴市']},		   
 97 |         {name:'徐州市', secondList:['鼓楼区','云龙区','九里区','贾汪区','泉山区','丰　县','沛　县','铜山县','睢宁县','新沂市','邳州市']},		   
 98 |         {name:'常州市', secondList:['天宁区','钟楼区','戚墅堰区','新北区','武进区','溧阳市','金坛市']},		   
 99 |         {name:'苏州市', secondList:['沧浪区','平江区','金阊区','虎丘区','吴中区','相城区','常熟市','张家港市','昆山市','吴江市','太仓市']},		   
100 |         {name:'南通市', secondList:['崇川区','港闸区','海安县','如东县','启东市','如皋市','通州市','海门市']},		   
101 |         {name:'连云港市', secondList:['连云区','新浦区','海州区','赣榆县','东海县','灌云县','灌南县']},		   
102 |         {name:'淮安市', secondList:['清河区','楚州区','淮阴区','清浦区','涟水县','洪泽县','盱眙县','金湖县']},		   
103 |         {name:'盐城市', secondList:['亭湖区','盐都区','响水县','滨海县','阜宁县','射阳县','建湖县','东台市','大丰市']},		   
104 |         {name:'扬州市', secondList:['广陵区','邗江区','郊　区','宝应县','仪征市','高邮市','江都市']},		   
105 |         {name:'镇江市', secondList:['京口区','润州区','丹徒区','丹阳市','扬中市','句容市']},		   
106 |         {name:'泰州市', secondList:['海陵区','高港区','兴化市','靖江市','泰兴市','姜堰市']},		   
107 |         {name:'宿迁市', secondList:['宿城区','宿豫区','沭阳县','泗阳县','泗洪县']}
108 |     ]},
109 |     {name:'浙江', list:[		   
110 |         {name:'杭州市', secondList:['上城区','下城区','江干区','拱墅区','西湖区','滨江区','萧山区','余杭区','桐庐县','淳安县','建德市','富阳区','临安市']},		   
111 |         {name:'宁波市', secondList:['海曙区','江东区','江北区','北仑区','镇海区','鄞州区','象山县','宁海县','余姚市','慈溪市','奉化市']},		   
112 |         {name:'温州市', secondList:['鹿城区','龙湾区','瓯海区','洞头县','永嘉县','平阳县','苍南县','文成县','泰顺县','瑞安市','乐清市']},		   
113 |         {name:'嘉兴市', secondList:['秀城区','秀洲区','嘉善县','海盐县','海宁市','平湖市','桐乡市']},		   
114 |         {name:'湖州市', secondList:['吴兴区','南浔区','德清县','长兴县','安吉县']},		   
115 |         {name:'绍兴市', secondList:['越城区','柯桥区','新昌县','诸暨市','上虞区','嵊州市']},		   
116 |         {name:'金华市', secondList:['婺城区','金东区','武义县','浦江县','磐安县','兰溪市','义乌市','东阳市','永康市']},		   
117 |         {name:'衢州市', secondList:['柯城区','衢江区','常山县','开化县','龙游县','江山市']},		   
118 |         {name:'舟山市', secondList:['定海区','普陀区','岱山县','嵊泗县']},		   
119 |         {name:'台州市', secondList:['椒江区','黄岩区','路桥区','玉环县','三门县','天台县','仙居县','温岭市','临海市']},		   
120 |         {name:'丽水市', secondList:['莲都区','青田县','缙云县','遂昌县','松阳县','云和县','庆元县','景宁畲族自治县','龙泉市']}
121 |     ]},
122 |     {name:'安徽', list:[		   
123 |         {name:'合肥市', secondList:['瑶海区','庐阳区','蜀山区','包河区','长丰县','肥东县','肥西县']},		   
124 |         {name:'芜湖市', secondList:['镜湖区','马塘区','新芜区','鸠江区','芜湖县','繁昌县','南陵县']},		   
125 |         {name:'蚌埠市', secondList:['龙子湖区','蚌山区','禹会区','淮上区','怀远县','五河县','固镇县']},		   
126 |         {name:'淮南市', secondList:['大通区','田家庵区','谢家集区','八公山区','潘集区','凤台县']},		   
127 |         {name:'马鞍山市', secondList:['金家庄区','花山区','雨山区','当涂县']},		   
128 |         {name:'淮北市', secondList:['杜集区','相山区','烈山区','濉溪县']},		   
129 |         {name:'铜陵市', secondList:['铜官山区','狮子山区','郊　区','铜陵县']},		   
130 |         {name:'安庆市', secondList:['迎江区','大观区','郊　区','怀宁县','枞阳县','潜山县','太湖县','宿松县','望江县','岳西县','桐城市']},		   
131 |         {name:'黄山市', secondList:['屯溪区','黄山区','徽州区','歙　县','休宁县','黟　县','祁门县']},		   
132 |         {name:'滁州市', secondList:['琅琊区','南谯区','来安县','全椒县','定远县','凤阳县','天长市','明光市']},		   
133 |         {name:'阜阳市', secondList:['颍州区','颍东区','颍泉区','临泉县','太和县','阜南县','颍上县','界首市']},		   
134 |         {name:'宿州市', secondList:['墉桥区','砀山县','萧　县','灵璧县','泗　县']},		   
135 |         {name:'巢湖市', secondList:['居巢区','庐江县','无为县','含山县','和　县']},		   
136 |         {name:'六安市', secondList:['金安区','裕安区','寿　县','霍邱县','舒城县','金寨县','霍山县']},		   
137 |         {name:'亳州市', secondList:['谯城区','涡阳县','蒙城县','利辛县']},		   
138 |         {name:'池州市', secondList:['贵池区','东至县','石台县','青阳县']},		   
139 |         {name:'宣城市', secondList:['宣州区','郎溪县','广德县','泾　县','绩溪县','旌德县','宁国市']}
140 |     ]},
141 |     {name:'福建', list:[		   
142 |         {name:'福州市', secondList:['鼓楼区','台江区','仓山区','马尾区','晋安区','闽侯县','连江县','罗源县','闽清县','永泰县','平潭县','福清市','长乐市']},		   
143 |         {name:'厦门市', secondList:['思明区','海沧区','湖里区','集美区','同安区','翔安区']},		   
144 |         {name:'莆田市', secondList:['城厢区','涵江区','荔城区','秀屿区','仙游县']},		   
145 |         {name:'三明市', secondList:['梅列区','三元区','明溪县','清流县','宁化县','大田县','尤溪县','沙　县','将乐县','泰宁县','建宁县','永安市']},		   
146 |         {name:'泉州市', secondList:['鲤城区','丰泽区','洛江区','泉港区','惠安县','安溪县','永春县','德化县','金门县','石狮市','晋江市','南安市']},		   
147 |         {name:'漳州市', secondList:['芗城区','龙文区','云霄县','漳浦县','诏安县','长泰县','东山县','南靖县','平和县','华安县','龙海市']},		   
148 |         {name:'南平市', secondList:['延平区','顺昌县','浦城县','光泽县','松溪县','政和县','邵武市','武夷山市','建瓯市','建阳市']},		   
149 |         {name:'龙岩市', secondList:['新罗区','长汀县','永定县','上杭县','武平县','连城县','漳平市']},		   
150 |         {name:'宁德市', secondList:['蕉城区','霞浦县','古田县','屏南县','寿宁县','周宁县','柘荣县','福安市','福鼎市']}
151 |     ]},
152 |     {name:'江西', list:[		   
153 |         {name:'南昌市', secondList:['东湖区','西湖区','青云谱区','湾里区','青山湖区','南昌县','新建县','安义县','进贤县']},		   
154 |         {name:'景德镇市', secondList:['昌江区','珠山区','浮梁县','乐平市']},		   
155 |         {name:'萍乡市', secondList:['安源区','湘东区','莲花县','上栗县','芦溪县']},		   
156 |         {name:'九江市', secondList:['庐山区','浔阳区','九江县','武宁县','修水县','永修县','德安县','星子县','都昌县','湖口县','彭泽县','瑞昌市']},		   
157 |         {name:'新余市', secondList:['渝水区','分宜县']},		   
158 |         {name:'鹰潭市', secondList:['月湖区','余江县','贵溪市']},		   
159 |         {name:'赣州市', secondList:['章贡区','赣　县','信丰县','大余县','上犹县','崇义县','安远县','龙南县','定南县','全南县','宁都县','于都县','兴国县','会昌县','寻乌县','石城县','瑞金市','南康市']},		   
160 |         {name:'吉安市', secondList:['吉州区','青原区','吉安县','吉水县','峡江县','新干县','永丰县','泰和县','遂川县','万安县','安福县','永新县','井冈山市']},		   
161 |         {name:'宜春市', secondList:['袁州区','奉新县','万载县','上高县','宜丰县','靖安县','铜鼓县','丰城市','樟树市','高安市']},		   
162 |         {name:'抚州市', secondList:['临川区','南城县','黎川县','南丰县','崇仁县','乐安县','宜黄县','金溪县','资溪县','东乡县','广昌县']},		   
163 |         {name:'上饶市', secondList:['信州区','上饶县','广丰县','玉山县','铅山县','横峰县','弋阳县','余干县','鄱阳县','万年县','婺源县','德兴市']}
164 |     ]},
165 |     {name:'山东', list:[		   
166 |         {name:'济南市', secondList:['历下区','市中区','槐荫区','天桥区','历城区','长清区','平阴县','济阳县','商河县','章丘市']},		   
167 |         {name:'青岛市', secondList:['市南区','市北区','四方区','黄岛区','崂山区','李沧区','城阳区','胶州市','即墨市','平度市','胶南市','莱西市']},		   
168 |         {name:'淄博市', secondList:['淄川区','张店区','博山区','临淄区','周村区','桓台县','高青县','沂源县']},		   
169 |         {name:'枣庄市', secondList:['市中区','薛城区','峄城区','台儿庄区','山亭区','滕州市']},		   
170 |         {name:'东营市', secondList:['东营区','河口区','垦利县','利津县','广饶县']},		   
171 |         {name:'烟台市', secondList:['芝罘区','福山区','牟平区','莱山区','长岛县','龙口市','莱阳市','莱州市','蓬莱市','招远市','栖霞市','海阳市']},		   
172 |         {name:'潍坊市', secondList:['潍城区','寒亭区','坊子区','奎文区','临朐县','昌乐县','青州市','诸城市','寿光市','安丘市','高密市','昌邑市']},		   
173 |         {name:'济宁市', secondList:['市中区','任城区','微山县','鱼台县','金乡县','嘉祥县','汶上县','泗水县','梁山县','曲阜市','兖州市','邹城市']},		   
174 |         {name:'泰安市', secondList:['泰山区','岱岳区','宁阳县','东平县','新泰市','肥城市']},		   
175 |         {name:'威海市', secondList:['环翠区','文登市','荣成市','乳山市']},		   
176 |         {name:'日照市', secondList:['东港区','岚山区','五莲县','莒县']},		   
177 |         {name:'莱芜市', secondList:['莱城区','钢城区']},		   
178 |         {name:'临沂市', secondList:['兰山区','罗庄区','河东区','沂南县','郯城县','沂水县','苍山县','费县','平邑县','莒南县','蒙阴县','临沭县']},		   
179 |         {name:'德州市', secondList:['德城区','陵县','宁津县','庆云县','临邑县','齐河县','平原县','夏津县','武城县','乐陵市','禹城市']},		   
180 |         {name:'聊城市', secondList:['东昌府区','阳谷县','莘县','茌平县','东阿县','冠县','高唐县','临清市']},		   
181 |         {name:'滨州市', secondList:['滨城区','惠民县','阳信县','无棣县','沾化县','博兴县','邹平县']},		   
182 |         {name:'荷泽市', secondList:['牡丹区','曹县','单县','成武县','巨野县','郓城县','鄄城县','定陶县','东明县']}
183 |     ]},
184 |     {name:'河南', list:[		   
185 |         {name:'郑州市', secondList:['中原区','二七区','管城回族区','金水区','上街区','邙山区','中牟县','巩义市','荥阳市','新密市','新郑市','登封市']},		   
186 |         {name:'开封市', secondList:['龙亭区','顺河回族区','鼓楼区','南关区','郊　区','杞　县','通许县','尉氏县','开封县','兰考县']},		   
187 |         {name:'洛阳市', secondList:['老城区','西工区','廛河回族区','涧西区','吉利区','洛龙区','孟津县','新安县','栾川县','嵩县','汝阳县','宜阳县','洛宁县','伊川县','偃师市']},		   
188 |         {name:'平顶山市', secondList:['新华区','卫东区','石龙区','湛河区','宝丰县','叶县','鲁山县','郏县','舞钢市','汝州市']},		   
189 |         {name:'安阳市', secondList:['文峰区','北关区','殷都区','龙安区','安阳县','汤阴县','滑县','内黄县','林州市']},		   
190 |         {name:'鹤壁市', secondList:['鹤山区','山城区','淇滨区','浚县','淇县']},		   
191 |         {name:'新乡市', secondList:['红旗区','卫滨区','凤泉区','牧野区','新乡县','获嘉县','原阳县','延津县','封丘县','长垣县','卫辉市','辉县市']},		   
192 |         {name:'焦作市', secondList:['解放区','中站区','马村区','山阳区','修武县','博爱县','武陟县','温　县','济源市','沁阳市','孟州市']},		   
193 |         {name:'濮阳市', secondList:['华龙区','清丰县','南乐县','范　县','台前县','濮阳县']},		   
194 |         {name:'许昌市', secondList:['魏都区','许昌县','鄢陵县','襄城县','禹州市','长葛市']},		   
195 |         {name:'漯河市', secondList:['源汇区','郾城区','召陵区','舞阳县','临颍县']},		   
196 |         {name:'三门峡市', secondList:['湖滨区','渑池县','陕县','卢氏县','义马市','灵宝市']},		   
197 |         {name:'南阳市', secondList:['宛城区','卧龙区','南召县','方城县','西峡县','镇平县','内乡县','淅川县','社旗县','唐河县','新野县','桐柏县','邓州市']},		   
198 |         {name:'商丘市', secondList:['梁园区','睢阳区','民权县','睢　县','宁陵县','柘城县','虞城县','夏邑县','永城市']},		   
199 |         {name:'信阳市', secondList:['师河区','平桥区','罗山县','光山县','新　县','商城县','固始县','潢川县','淮滨县','息县']},		   
200 |         {name:'周口市', secondList:['川汇区','扶沟县','西华县','商水县','沈丘县','郸城县','淮阳县','太康县','鹿邑县','项城市']},		   
201 |         {name:'驻马店市', secondList:['驿城区','西平县','上蔡县','平舆县','正阳县','确山县','泌阳县','汝南县','遂平县','新蔡县']}
202 |     ]},
203 |     {name:'湖北', list:[		   
204 |         {name:'武汉市', secondList:['江岸区','江汉区','乔口区','汉阳区','武昌区','青山区','洪山区','东西湖区','汉南区','蔡甸区','江夏区','黄陂区','新洲区']},		   
205 |         {name:'黄石市', secondList:['黄石港区','西塞山区','下陆区','铁山区','阳新县','大冶市']},		   
206 |         {name:'十堰市', secondList:['茅箭区','张湾区','郧　县','郧西县','竹山县','竹溪县','房　县','丹江口市']},		   
207 |         {name:'宜昌市', secondList:['西陵区','伍家岗区','点军区','猇亭区','夷陵区','远安县','兴山县','秭归县','长阳土家族自治县','五峰土家族自治县','宜都市','当阳市','枝江市']},		   
208 |         {name:'襄樊市', secondList:['襄城区','樊城区','襄阳区','南漳县','谷城县','保康县','老河口市','枣阳市','宜城市']},		   
209 |         {name:'鄂州市', secondList:['梁子湖区','华容区','鄂城区']},		   
210 |         {name:'荆门市', secondList:['东宝区','掇刀区','京山县','沙洋县','钟祥市']},		   
211 |         {name:'孝感市', secondList:['孝南区','孝昌县','大悟县','云梦县','应城市','安陆市','汉川市']},		   
212 |         {name:'荆州市', secondList:['沙市区','荆州区','公安县','监利县','江陵县','石首市','洪湖市','松滋市']},		   
213 |         {name:'黄冈市', secondList:['黄州区','团风县','红安县','罗田县','英山县','浠水县','蕲春县','黄梅县','麻城市','武穴市']},		   
214 |         {name:'咸宁市', secondList:['咸安区','嘉鱼县','通城县','崇阳县','通山县','赤壁市']},		   
215 |         {name:'随州市', secondList:['曾都区','广水市']},		   
216 |         {name:'恩施土家族苗族自治州', secondList:['恩施市','利川市','建始县','巴东县','宣恩县','咸丰县','来凤县','鹤峰县']},		   
217 |         {name:'省直辖行政单位', secondList:['仙桃市','潜江市','天门市','神农架林区']}
218 |     ]},
219 |      {name:'湖南', list:[		   
220 |         {name:'长沙市', secondList:['芙蓉区','天心区','岳麓区','开福区','雨花区','长沙县','望城县','宁乡县','浏阳市']},		   
221 |         {name:'株洲市', secondList:['荷塘区','芦淞区','石峰区','天元区','株洲县','攸县','茶陵县','炎陵县','醴陵市']},		   
222 |         {name:'湘潭市', secondList:['雨湖区','岳塘区','湘潭县','湘乡市','韶山市']},		   
223 |         {name:'衡阳市', secondList:['珠晖区','雁峰区','石鼓区','蒸湘区','南岳区','衡阳县','衡南县','衡山县','衡东县','祁东县','耒阳市','常宁市']},		   
224 |         {name:'邵阳市', secondList:['双清区','大祥区','北塔区','邵东县','新邵县','邵阳县','隆回县','洞口县','绥宁县','新宁县','城步苗族自治县','武冈市']},		   
225 |         {name:'岳阳市', secondList:['岳阳楼区','云溪区','君山区','岳阳县','华容县','湘阴县','平江县','汨罗市','临湘市']},		   
226 |         {name:'常德市', secondList:['武陵区','鼎城区','安乡县','汉寿县','澧县','临澧县','桃源县','石门县','津市市']},		   
227 |         {name:'张家界市', secondList:['永定区','武陵源区','慈利县','桑植县']},		   
228 |         {name:'益阳市', secondList:['资阳区','赫山区','南县','桃江县','安化县','沅江市']},		   
229 |         {name:'郴州市', secondList:['北湖区','苏仙区','桂阳县','宜章县','永兴县','嘉禾县','临武县','汝城县','桂东县','安仁县','资兴市']},		   
230 |         {name:'永州市', secondList:['芝山区','冷水滩区','祁阳县','东安县','双牌县','道县','江永县','宁远县','蓝山县','新田县','江华瑶族自治县']},		   
231 |         {name:'怀化市', secondList:['鹤城区','中方县','沅陵县','辰溪县','溆浦县','会同县','麻阳苗族自治县','新晃侗族自治县','芷江侗族自治县','靖州苗族侗族自治县','通道侗族自治县','洪江市']},		   
232 |         {name:'娄底市', secondList:['娄星区','双峰县','新化县','冷水江市','涟源市']},		   
233 |         {name:'湘西土家族苗族自治州', secondList:['吉首市','泸溪县','凤凰县','花垣县','保靖县','古丈县','永顺县','龙山县']}
234 |     ]},
235 |     {name:'广东', list:[		   
236 |         {name:'广州市', secondList:['东山区','荔湾区','越秀区','海珠区','天河区','芳村区','白云区','黄埔区','番禺区','花都区','增城市','从化市']},		   
237 |         {name:'韶关市', secondList:['武江区','浈江区','曲江区','始兴县','仁化县','翁源县','乳源瑶族自治县','新丰县','乐昌市','南雄市']},		   
238 |         {name:'深圳市', secondList:['罗湖区','福田区','南山区','宝安区','龙岗区','盐田区']},		   
239 |         {name:'珠海市', secondList:['香洲区','斗门区','金湾区']},		   
240 |         {name:'汕头市', secondList:['龙湖区','金平区','濠江区','潮阳区','潮南区','澄海区','南澳县']},		   
241 |         {name:'佛山市', secondList:['禅城区','南海区','顺德区','三水区','高明区']},		   
242 |         {name:'江门市', secondList:['蓬江区','江海区','新会区','台山市','开平市','鹤山市','恩平市']},		   
243 |         {name:'湛江市', secondList:['赤坎区','霞山区','坡头区','麻章区','遂溪县','徐闻县','廉江市','雷州市','吴川市']},		   
244 |         {name:'茂名市', secondList:['茂南区','茂港区','电白县','高州市','化州市','信宜市']},		   
245 |         {name:'肇庆市', secondList:['端州区','鼎湖区','广宁县','怀集县','封开县','德庆县','高要市','四会市']},		   
246 |         {name:'惠州市', secondList:['惠城区','惠阳区','博罗县','惠东县','龙门县']},		   
247 |         {name:'梅州市', secondList:['梅江区','梅　县','大埔县','丰顺县','五华县','平远县','蕉岭县','兴宁市']},		   
248 |         {name:'汕尾市', secondList:['城　区','海丰县','陆河县','陆丰市']},		   
249 |         {name:'河源市', secondList:['源城区','紫金县','龙川县','连平县','和平县','东源县']},		   
250 |         {name:'阳江市', secondList:['江城区','阳西县','阳东县','阳春市']},		   
251 |         {name:'清远市', secondList:['清城区','佛冈县','阳山县','连山壮族瑶族自治县','连南瑶族自治县','清新县','英德市','连州市']},		   
252 |         {name:'东莞市', secondList:['东莞市']},		   
253 |         {name:'中山市', secondList:['中山市']},		   
254 |         {name:'潮州市', secondList:['湘桥区','潮安县','饶平县']},		   
255 |         {name:'揭阳市', secondList:['榕城区','揭东县','揭西县','惠来县','普宁市']},		   
256 |         {name:'云浮市', secondList:['云城区','新兴县','郁南县','云安县','罗定市']}
257 |     ]},
258 |     {name:'广西', list:[		   
259 |         {name:'南宁市', secondList:['兴宁区','青秀区','江南区','西乡塘区','良庆区','邕宁区','武鸣县','隆安县','马山县','上林县','宾阳县','横　县']},		   
260 |         {name:'柳州市', secondList:['城中区','鱼峰区','柳南区','柳北区','柳江县','柳城县','鹿寨县','融安县','融水苗族自治县','三江侗族自治县']},		   
261 |         {name:'桂林市', secondList:['秀峰区','叠彩区','象山区','七星区','雁山区','阳朔县','临桂县','灵川县','全州县','兴安县','永福县','灌阳县','龙胜各族自治县','资源县','平乐县','荔蒲县','恭城瑶族自治县']},		   
262 |         {name:'梧州市', secondList:['万秀区','蝶山区','长洲区','苍梧县','藤　县','蒙山县','岑溪市']},		   
263 |         {name:'北海市', secondList:['海城区','银海区','铁山港区','合浦县']},		   
264 |         {name:'防城港市', secondList:['港口区','防城区','上思县','东兴市']},		   
265 |         {name:'钦州市', secondList:['钦南区','钦北区','灵山县','浦北县']},		   
266 |         {name:'贵港市', secondList:['港北区','港南区','覃塘区','平南县','桂平市']},		   
267 |         {name:'玉林市', secondList:['玉州区','容　县','陆川县','博白县','兴业县','北流市']},		   
268 |         {name:'百色市', secondList:['右江区','田阳县','田东县','平果县','德保县','靖西县','那坡县','凌云县','乐业县','田林县','西林县','隆林各族自治县']},		   
269 |         {name:'贺州市', secondList:['八步区','昭平县','钟山县','富川瑶族自治县']},		   
270 |         {name:'河池市', secondList:['金城江区','南丹县','天峨县','凤山县','东兰县','罗城仫佬族自治县','环江毛南族自治县','巴马瑶族自治县','都安瑶族自治县','大化瑶族自治县','宜州市']},		   
271 |         {name:'来宾市', secondList:['兴宾区','忻城县','象州县','武宣县','金秀瑶族自治县','合山市']},		   
272 |         {name:'崇左市', secondList:['江洲区','扶绥县','宁明县','龙州县','大新县','天等县','凭祥市']}
273 |     ]},
274 |     {name:'海南', list:[		   
275 |         {name:'海口市', secondList:['秀英区','龙华区','琼山区','美兰区']},		   
276 |         {name:'三亚市', secondList:['市辖区']},		   
277 |         {name:'省直辖县级行政单位', secondList:['五指山市','琼海市','儋州市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县','西沙群岛','南沙群岛','中沙群岛的岛礁及其海域']}
278 |     ]},
279 |     {name:'重庆市', list:[		   
280 |         {secondList:['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区','黔江区','长寿区','綦江县','潼南县','铜梁县','大足县','荣昌县','璧山县','梁平县','城口县','丰都县','垫江县','武隆县','忠　县','开　县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县','江津市','合川市','永川市','南川市']}		   
281 |     ]},
282 |     {name:'四川', list:[		   
283 |         {name:'成都市', secondList:['锦江区','青羊区','金牛区','武侯区','成华区','龙泉驿区','青白江区','新都区','温江县','金堂县','双流县','郫县','大邑县','蒲江县','新津县','都江堰市','彭州市','邛崃市','崇州市']},		   
284 |         {name:'自贡市', secondList:['自流井区','贡井区','大安区','沿滩区','荣县','富顺县']},		   
285 |         {name:'攀枝花市', secondList:['东区','西区','仁和区','米易县','盐边县']},		   
286 |         {name:'泸州市', secondList:['江阳区','纳溪区','龙马潭区','泸县','合江县','叙永县','古蔺县']},		   
287 |         {name:'德阳市', secondList:['旌阳区','中江县','罗江县','广汉市','什邡市','绵竹市']},		   
288 |         {name:'绵阳市', secondList:['涪城区','游仙区','三台县','盐亭县','安　县','梓潼县','北川羌族自治县','平武县','江油市']},		   
289 |         {name:'广元市', secondList:['市中区','元坝区','朝天区','旺苍县','青川县','剑阁县','苍溪县']},		   
290 |         {name:'遂宁市', secondList:['船山区','安居区','蓬溪县','射洪县','大英县']},		   
291 |         {name:'内江市', secondList:['市中区','东兴区','威远县','资中县','隆昌县']},		   
292 |         {name:'乐山市', secondList:['市中区','沙湾区','五通桥区','金口河区','犍为县','井研县','夹江县','沐川县','峨边彝族自治县','马边彝族自治县','峨眉山市']},		   
293 |         {name:'南充市', secondList:['顺庆区','高坪区','嘉陵区','南部县','营山县','蓬安县','仪陇县','西充县','阆中市']},		   
294 |         {name:'眉山市', secondList:['东坡区','仁寿县','彭山县','洪雅县','丹棱县','青神县']},		   
295 |         {name:'宜宾市', secondList:['翠屏区','宜宾县','南溪县','江安县','长宁县','高县','珙县','筠连县','兴文县','屏山县']},		   
296 |         {name:'广安市', secondList:['广安区','岳池县','武胜县','邻水县','华莹市']},		   
297 |         {name:'达州市', secondList:['通川区','达　县','宣汉县','开江县','大竹县','渠县','万源市']},		   
298 |         {name:'雅安市', secondList:['雨城区','名山县','荥经县','汉源县','石棉县','天全县','芦山县','宝兴县']},		   
299 |         {name:'巴中市', secondList:['巴州区','通江县','南江县','平昌县']},		   
300 |         {name:'资阳市', secondList:['雁江区','安岳县','乐至县','简阳市']},		   
301 |         {name:'阿坝藏族羌族自治州', secondList:['汶川县','理县','茂县','松潘县','九寨沟县','金川县','小金县','黑水县','马尔康县','壤塘县','阿坝县','若尔盖县','红原县']},		   
302 |         {name:'甘孜藏族自治州', secondList:['康定县','泸定县','丹巴县','九龙县','雅江县','道孚县','炉霍县','甘孜县','新龙县','德格县','白玉县','石渠县','色达县','理塘县','巴塘县','乡城县','稻城县','得荣县']},		   
303 |         {name:'凉山彝族自治州', secondList:['西昌市','木里藏族自治县','盐源县','德昌县','会理县','会东县','宁南县','普格县','布拖县','金阳县','昭觉县','喜德县','冕宁县','越西县','甘洛县','美姑县','雷波县']}
304 |     ]},
305 |     {name:'贵州', list:[		   
306 |         {name:'贵阳市', secondList:['南明区','云岩区','花溪区','乌当区','白云区','小河区','开阳县','息烽县','修文县','清镇市']},		   
307 |         {name:'六盘水市', secondList:['钟山区','六枝特区','水城县','盘县']},		   
308 |         {name:'遵义市', secondList:['红花岗区','汇川区','遵义县','桐梓县','绥阳县','正安县','道真仡佬族苗族自治县','务川仡佬族苗族自治县','凤冈县','湄潭县','余庆县','习水县','赤水市','仁怀市']},		   
309 |         {name:'安顺市', secondList:['西秀区','平坝县','普定县','镇宁布依族苗族自治县','关岭布依族苗族自治县','紫云苗族布依族自治县']},		   
310 |         {name:'铜仁地区', secondList:['铜仁市','江口县','玉屏侗族自治县','石阡县','思南县','印江土家族苗族自治县','德江县','沿河土家族自治县','松桃苗族自治县','万山特区']},		   
311 |         {name:'黔西南布依族苗族自治州', secondList:['兴义市','兴仁县','普安县','晴隆县','贞丰县','望谟县','册亨县','安龙县']},		   
312 |         {name:'毕节地区', secondList:['毕节市','大方县','黔西县','金沙县','织金县','纳雍县','威宁彝族回族苗族自治县','赫章县']},		   
313 |         {name:'黔东南苗族侗族自治州', secondList:['凯里市','黄平县','施秉县','三穗县','镇远县','岑巩县','天柱县','锦屏县','剑河县','台江县','黎平县','榕江县','从江县','雷山县','麻江县','丹寨县']},		   
314 |         {name:'黔南布依族苗族自治州', secondList:['都匀市','福泉市','荔波县','贵定县','瓮安县','独山县','平塘县','罗甸县','长顺县','龙里县','惠水县','三都水族自治县']}
315 |     ]},
316 |     {name:'云南', list:[		   
317 |         {name:'昆明市', secondList:['五华区','盘龙区','官渡区','西山区','东川区','呈贡县','晋宁县','富民县','宜良县','石林彝族自治县','嵩明县','禄劝彝族苗族自治县','寻甸回族彝族自治县','安宁市']},		   
318 |         {name:'曲靖市', secondList:['麒麟区','马龙县','陆良县','师宗县','罗平县','富源县','会泽县','沾益县','宣威市']},		   
319 |         {name:'玉溪市', secondList:['红塔区','江川县','澄江县','通海县','华宁县','易门县','峨山彝族自治县','新平彝族傣族自治县','元江哈尼族彝族傣族自治县']},		   
320 |         {name:'保山市', secondList:['隆阳区','施甸县','腾冲县','龙陵县','昌宁县']},		   
321 |         {name:'昭通市', secondList:['昭阳区','鲁甸县','巧家县','盐津县','大关县','永善县','绥江县','镇雄县','彝良县','威信县','水富县']},		   
322 |         {name:'丽江市', secondList:['古城区','玉龙纳西族自治县','永胜县','华坪县','宁蒗彝族自治县']},		   
323 |         {name:'思茅市', secondList:['翠云区','普洱哈尼族彝族自治县','墨江哈尼族自治县','景东彝族自治县','景谷傣族彝族自治县','镇沅彝族哈尼族拉祜族自治县','江城哈尼族彝族自治县','孟连傣族拉祜族佤族自治县','澜沧拉祜族自治县','西盟佤族自治县']},		   
324 |         {name:'临沧市', secondList:['临翔区','凤庆县','云　县','永德县','镇康县','双江拉祜族佤族布朗族傣族自治县','耿马傣族佤族自治县','沧源佤族自治县']},		   
325 |         {name:'楚雄彝族自治州', secondList:['楚雄市','双柏县','牟定县','南华县','姚安县','大姚县','永仁县','元谋县','武定县','禄丰县']},		   
326 |         {name:'红河哈尼族彝族自治州', secondList:['个旧市','开远市','蒙自县','屏边苗族自治县','建水县','石屏县','弥勒县','泸西县','元阳县','红河县','金平苗族瑶族傣族自治县','绿春县','河口瑶族自治县']},		   
327 |         {name:'文山壮族苗族自治州', secondList:['文山县','砚山县','西畴县','麻栗坡县','马关县','丘北县','广南县','富宁县']},		   
328 |         {name:'西双版纳傣族自治州', secondList:['景洪市','勐海县','勐腊县']},		   
329 |         {name:'大理白族自治州', secondList:['大理市','漾濞彝族自治县','祥云县','宾川县','弥渡县','南涧彝族自治县','巍山彝族回族自治县','永平县','云龙县','洱源县','剑川县','鹤庆县']},		   
330 |         {name:'德宏傣族景颇族自治州', secondList:['瑞丽市','潞西市','梁河县','盈江县','陇川县']},		   
331 |         {name:'怒江傈僳族自治州', secondList:['泸水县','福贡县','贡山独龙族怒族自治县','兰坪白族普米族自治县']},		   
332 |         {name:'迪庆藏族自治州', secondList:['香格里拉县','德钦县','维西傈僳族自治县']}
333 |     ]},
334 |     {name:'西藏', list:[		   
335 |         {name:'拉萨市', secondList:['城关区','林周县','当雄县','尼木县','曲水县','堆龙德庆县','达孜县','墨竹工卡县']},		   
336 |         {name:'昌都地区', secondList:['昌都县','江达县','贡觉县','类乌齐县','丁青县','察雅县','八宿县','左贡县','芒康县','洛隆县','边坝县']},		   
337 |         {name:'山南地区', secondList:['乃东县','扎囊县','贡嘎县','桑日县','琼结县','曲松县','措美县','洛扎县','加查县','隆子县','错那县','浪卡子县']},		   
338 |         {name:'日喀则地区', secondList:['日喀则市','南木林县','江孜县','定日县','萨迦县','拉孜县','昂仁县','谢通门县','白朗县','仁布县','康马县','定结县','仲巴县','亚东县','吉隆县','聂拉木县','萨嘎县','岗巴县']},		   
339 |         {name:'那曲地区', secondList:['那曲县','嘉黎县','比如县','聂荣县','安多县','申扎县','索　县','班戈县','巴青县','尼玛县']},		   
340 |         {name:'阿里地区', secondList:['普兰县','札达县','噶尔县','日土县','革吉县','改则县','措勤县']},		   
341 |         {name:'林芝地区', secondList:['林芝县','工布江达县','米林县','墨脱县','波密县','察隅县','朗　县']}
342 |     ]},
343 |     {name:'陕西', list:[		   
344 |         {name:'西安市', secondList:['新城区','碑林区','莲湖区','灞桥区','未央区','雁塔区','阎良区','临潼区','长安区','蓝田县','周至县','户　县','高陵县']},		   
345 |         {name:'铜川市', secondList:['王益区','印台区','耀州区','宜君县']},		   
346 |         {name:'宝鸡市', secondList:['渭滨区','金台区','陈仓区','凤翔县','岐山县','扶风县','眉　县','陇　县','千阳县','麟游县','凤　县','太白县']},		   
347 |         {name:'咸阳市', secondList:['秦都区','杨凌区','渭城区','三原县','泾阳县','乾　县','礼泉县','永寿县','彬　县','长武县','旬邑县','淳化县','武功县','兴平市']},		   
348 |         {name:'渭南市', secondList:['临渭区','华　县','潼关县','大荔县','合阳县','澄城县','蒲城县','白水县','富平县','韩城市','华阴市']},		   
349 |         {name:'延安市', secondList:['宝塔区','延长县','延川县','子长县','安塞县','志丹县','吴旗县','甘泉县','富　县','洛川县','宜川县','黄龙县','黄陵县']},		   
350 |         {name:'汉中市', secondList:['汉台区','南郑县','城固县','洋　县','西乡县','勉　县','宁强县','略阳县','镇巴县','留坝县','佛坪县']},		   
351 |         {name:'榆林市', secondList:['榆阳区','神木县','府谷县','横山县','靖边县','定边县','绥德县','米脂县','佳　县','吴堡县','清涧县','子洲县']},		   
352 |         {name:'安康市', secondList:['汉滨区','汉阴县','石泉县','宁陕县','紫阳县','岚皋县','平利县','镇坪县','旬阳县','白河县']},		   
353 |         {name:'商洛市', secondList:['商州区','洛南县','丹凤县','商南县','山阳县','镇安县','柞水县']}
354 |     ]},
355 |     {name:'甘肃', list:[		   
356 |         {name:'兰州市', secondList:['城关区','七里河区','西固区','安宁区','红古区','永登县','皋兰县','榆中县']},		   
357 |         {name:'嘉峪关市', secondList:['市辖区']},		   
358 |         {name:'金昌市', secondList:['金川区','永昌县']},		   
359 |         {name:'白银市', secondList:['白银区','平川区','靖远县','会宁县','景泰县']},		   
360 |         {name:'天水市', secondList:['秦城区','北道区','清水县','秦安县','甘谷县','武山县','张家川回族自治县']},		   
361 |         {name:'武威市', secondList:['凉州区','民勤县','古浪县','天祝藏族自治县']},		   
362 |         {name:'张掖市', secondList:['甘州区','肃南裕固族自治县','民乐县','临泽县','高台县','山丹县']},		   
363 |         {name:'平凉市', secondList:['崆峒区','泾川县','灵台县','崇信县','华亭县','庄浪县','静宁县']},		   
364 |         {name:'酒泉市', secondList:['肃州区','金塔县','安西县','肃北蒙古族自治县','阿克塞哈萨克族自治县','玉门市','敦煌市']},		   
365 |         {name:'庆阳市', secondList:['西峰区','庆城县','环　县','华池县','合水县','正宁县','宁　县','镇原县']},		   
366 |         {name:'定西市', secondList:['安定区','通渭县','陇西县','渭源县','临洮县','漳　县','岷　县']},		   
367 |         {name:'陇南市', secondList:['武都区','成　县','文　县','宕昌县','康　县','西和县','礼　县','徽　县','两当县']},		   
368 |         {name:'临夏回族自治州', secondList:['临夏市','临夏县','康乐县','永靖县','广河县','和政县','东乡族自治县','积石山保安族东乡族撒拉族自治县']},		   
369 |         {name:'甘南藏族自治州', secondList:['合作市','临潭县','卓尼县','舟曲县','迭部县','玛曲县','碌曲县','夏河县']}
370 |     ]},
371 |     {name:'青海', list:[		   
372 |         {name:'西宁市', secondList:['城东区','城中区','城西区','城北区','大通回族土族自治县','湟中县','湟源县']},		   
373 |         {name:'海东地区', secondList:['平安县','民和回族土族自治县','乐都县','互助土族自治县','化隆回族自治县','循化撒拉族自治县']},		   
374 |         {name:'海北藏族自治州', secondList:['门源回族自治县','祁连县','海晏县','刚察县']},		   
375 |         {name:'黄南藏族自治州', secondList:['同仁县','尖扎县','泽库县','河南蒙古族自治县']},		   
376 |         {name:'海南藏族自治州', secondList:['共和县','同德县','贵德县','兴海县','贵南县']},		   
377 |         {name:'果洛藏族自治州', secondList:['玛沁县','班玛县','甘德县','达日县','久治县','玛多县']},		   
378 |         {name:'玉树藏族自治州', secondList:['玉树县','杂多县','称多县','治多县','囊谦县','曲麻莱县']},		   
379 |         {name:'海西蒙古族藏族自治州', secondList:['格尔木市','德令哈市','乌兰县','都兰县','天峻县']}
380 |     ]},
381 |     {name:'宁夏', list:[		   
382 |         {name:'银川市', secondList:['兴庆区','西夏区','金凤区','永宁县','贺兰县','灵武市']},		   
383 |         {name:'石嘴山市', secondList:['大武口区','惠农区','平罗县']},		   
384 |         {name:'吴忠市', secondList:['利通区','盐池县','同心县','青铜峡市']},		   
385 |         {name:'固原市', secondList:['原州区','西吉县','隆德县','泾源县','彭阳县','海原县']},		   
386 |         {name:'中卫市', secondList:['沙坡头区','中宁县']}
387 |     ]},
388 |     {name:'新疆', list:[		   
389 |         {name:'乌鲁木齐市', secondList:['天山区','沙依巴克区','新市区','水磨沟区','头屯河区','达坂城区','东山区','乌鲁木齐县']},		   
390 |         {name:'克拉玛依市', secondList:['独山子区','克拉玛依区','白碱滩区','乌尔禾区']},		   
391 |         {name:'吐鲁番地区', secondList:['吐鲁番市','鄯善县','托克逊县']},		   
392 |         {name:'哈密地区', secondList:['哈密市','巴里坤哈萨克自治县','伊吾县']},		   
393 |         {name:'昌吉回族自治州', secondList:['昌吉市','阜康市','米泉市','呼图壁县','玛纳斯县','奇台县','吉木萨尔县','木垒哈萨克自治县']},		   
394 |         {name:'博尔塔拉蒙古自治州', secondList:['博乐市','精河县','温泉县']},		   
395 |         {name:'巴音郭楞蒙古自治州', secondList:['库尔勒市','轮台县','尉犁县','若羌县','且末县','焉耆回族自治县','和静县','和硕县','博湖县']},		   
396 |         {name:'阿克苏地区', secondList:['阿克苏市','温宿县','库车县','沙雅县','新和县','拜城县','乌什县','阿瓦提县','柯坪县']},		   
397 |         {name:'克孜勒苏柯尔克孜自治州', secondList:['阿图什市','阿克陶县','阿合奇县','乌恰县']},		   
398 |         {name:'喀什地区', secondList:['喀什市','疏附县','疏勒县','英吉沙县','泽普县','莎车县','叶城县','麦盖提县','岳普湖县','伽师县','巴楚县','塔什库尔干塔吉克自治县']},		   
399 |         {name:'和田地区', secondList:['和田市','和田县','墨玉县','皮山县','洛浦县','策勒县','于田县','民丰县']},		   
400 |         {name:'伊犁哈萨克自治州', secondList:['伊宁市','奎屯市','伊宁县','察布查尔锡伯自治县','霍城县','巩留县','新源县','昭苏县','特克斯县','尼勒克县']},		   
401 |         {name:'塔城地区', secondList:['塔城市','乌苏市','额敏县','沙湾县','托里县','裕民县','和布克赛尔蒙古自治县']},		   
402 |         {name:'阿勒泰地区', secondList:['阿勒泰市','布尔津县','富蕴县','福海县','哈巴河县','青河县','吉木乃县']},		   
403 |         {name:'省直辖行政单位', secondList:['石河子市','阿拉尔市','图木舒克市','五家渠市']}
404 |     ]},
405 |     {name:'台湾', list:[		   
406 |         {secondList:['台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市','宜兰县','桃园县','新竹县','苗栗县','彰化县','南投县','云林县','嘉义县','花莲县']}   
407 |     ]},
408 |     {name:'香港', list:[		   
409 |         {secondList:['中西区','东区',' 九龙城区',' 观塘区','南区','深水埗区','黄大仙区','湾仔区','油尖旺区','离岛区',' 葵青区','北区','西贡区','沙田区','屯门区','大埔区','荃湾区',' 元朗区']}   
410 |     ]},
411 |     {name:'澳门', list:[		   
412 |         {secondList:['澳门特别行政区']}   
413 |     ]},
414 |     {name:'海外', list:[		   
415 |         {secondList:['海外国家']}   
416 |     ]}
417 | ];


--------------------------------------------------------------------------------
/dist/CascadingPicker.css:
--------------------------------------------------------------------------------
1 | .fade-enter-active[data-v-4535f626],.fade-leave-active[data-v-4535f626]{transition:all .3s}.fade-enter[data-v-4535f626],.fade-leave-to[data-v-4535f626]{opacity:1}.animate-enter-active[data-v-4535f626],.animate-leave-active[data-v-4535f626]{transition:all .3s}.animate-enter[data-v-4535f626],.animate-leave-to[data-v-4535f626]{transform:translateY(100%)}.w50[data-v-4535f626]{width:50%!important}.w0[data-v-4535f626]{width:0!important}.mask[data-v-4535f626]{position:fixed;left:0;bottom:0;z-index:10;width:100%;height:100%;background:rgba(0,0,0,.6)}.picker .color[data-v-4535f626]{color:#000;font-weight:700}.picker[data-v-4535f626]{position:fixed;left:0;bottom:0;z-index:10;width:100%;height:5.5rem;background:#fff}.picker-head[data-v-4535f626]{display:flex;justify-content:space-around;padding:0 .3rem;height:.8rem;font-size:.3rem;color:#2395ff;background:#efefef}.picker-head div[data-v-4535f626]{flex-grow:.4;line-height:.8rem}.picker-head div[data-v-4535f626]:first-child{text-align:left}.picker-head div[data-v-4535f626]:nth-child(2){text-align:right}.picker-wrap[data-v-4535f626]{position:relative;height:4.7rem}.content[data-v-4535f626]{display:flex;width:100%;height:100%}.content-item[data-v-4535f626]{width:33.33%;height:100%;overflow:hidden;transition:width .3s}.picker-item[data-v-4535f626]{position:relative;z-index:10;width:100%;top:1.85rem}.item[data-v-4535f626]{flex-grow:3;height:1rem;line-height:1rem;font-size:.3rem;color:#707274;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.line[data-v-4535f626]{position:absolute;top:50%;left:0;margin-top:-.5rem;width:100%;height:1rem;border-top:.02rem solid #ddd;border-bottom:.02rem solid #ddd}


--------------------------------------------------------------------------------
/dist/CascadingPicker.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CascadingPicker",[],e):"object"==typeof exports?exports.CascadingPicker=e():t.CascadingPicker=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=37)}([function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(3),i=n(12);t.exports=n(4)?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(10),i=n(29),o=n(16),c=Object.defineProperty;e.f=n(4)?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return c(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(11)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(50),i=n(15);t.exports=function(t){return r(i(t))}},function(t,e,n){var r=n(20)("wks"),i=n(13),o=n(0).Symbol,c="function"==typeof o;(t.exports=function(t){return r[t]||(r[t]=c&&o[t]||(c?o:i)("Symbol."+t))}).store=r},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){t.exports=!0},function(t,e){var n=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(7);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e,n){var r=n(7);t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports={}},function(t,e,n){var r=n(33),i=n(21);t.exports=Object.keys||function(t){return r(t,i)}},function(t,e,n){var r=n(20)("keys"),i=n(13);t.exports=function(t){return r[t]||(r[t]=i(t))}},function(t,e,n){var r=n(9),i=n(0),o=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(8)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(3).f,i=n(1),o=n(6)("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},function(t,e,n){e.f=n(6)},function(t,e,n){var r=n(0),i=n(9),o=n(8),c=n(23),s=n(3).f;t.exports=function(t){var e=i.Symbol||(i.Symbol=o?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||s(e,t,{value:c.f(t)})}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return t&&t.__esModule?t:{default:t}}(n(41));e.default={name:"CascadingPicker",props:{value:{type:Boolean,default:!1},initial:{type:Object,default:function(){return{first:"",second:"",third:""}}},data:{type:Array,required:!0},closeOnClickModal:{type:Boolean,default:!1}},data:function(){return{pickerData:this.data,initalRender:!0,pIndex:0,cIndex:0,tIndex:0}},computed:{province:function(){return this.pickerData[this.pIndex].name},city:function(){return 1==this.pickerData[this.pIndex].list.length?this.pickerData[this.pIndex].list[0].secondList:this.pickerData[this.pIndex].list},town:function(){return 1==this.pickerData[this.pIndex].list.length?[]:this.pickerData[this.pIndex].list[this.cIndex].secondList},hasTown:function(){return 1==this.pickerData[this.pIndex].list.length}},mounted:function(){this.resetIndex()},methods:{ok:function(){var t=this.province,e=this.city[this.cIndex].name||this.city[this.cIndex],n=this.town[this.tIndex]?this.town[this.tIndex]:"";this.resetIndex(),this.$emit("input",!1),this.$emit("ok",{first:t,second:e,third:n})},cancel:function(){this.resetIndex(),this.$emit("input",!1),this.$emit("cancel")},clickModal:function(){this.closeOnClickModal&&this.cancel()},resetIndex:function(){var t=this;this.initalRender=!0;var e=this.pickerData.findIndex(function(e){return e.name==t.initial.first});this.pIndex=e>0?e:0;var n=this.city.findIndex(function(e){return"object"==(void 0===e?"undefined":(0,r.default)(e))?e.name==t.initial.second:e==t.initial.second});this.cIndex=n>0?n:0;var i=this.town.findIndex(function(e){return e==t.initial.third});this.tIndex=i>0?i:0},get:function(t){return"province"==t?this.pIndex:"city"==t?this.cIndex:this.tIndex},set:function(t,e){this.initalRender=!1,"province"==t?this.pIndex=e:"city"==t?this.cIndex=e:this.tIndex=e}},watch:{value:function(t){var e=this;t&&this.$nextTick(function(){e.$refs.province.children[0].style.transform="translateY("+-e.pIndex+"rem)",e.$refs.city.children[0].style.transform="translateY("+-e.cIndex+"rem)",e.$refs.town.children[0].style.transform="translateY("+-e.tIndex+"rem)"})},pIndex:function(){this.initalRender||(this.cIndex=0,this.tIndex=0,this.$refs.city.children[0].style.transform="translateY(0)",this.$refs.town.children[0].style.transform="translateY(0)")},cIndex:function(){this.initalRender||(this.tIndex=0,this.$refs.town.children[0].style.transform="translateY(0)")}},directives:{picker:{bind:function(t,e){var n="",r="",i=t.children[0].children.length,o=t.children[0],c=-(i-1),s=Number.parseFloat(document.documentElement.style.fontSize),u=void 0,a=void 0;e.modifiers.province?u=e.value.get("province"):e.modifiers.city?u=e.value.get("city"):e.modifiers.town&&(u=e.value.get("town")),a=-u,t.addEventListener("touchstart",function(e){e.preventDefault(),"translateY(0px)"==o.style.transform&&(a=0,c=-(t.children[0].children.length-1));var r=e.touches[0];n=r.clientY}),t.addEventListener("touchmove",function(t){t.preventDefault();var e=t.touches[0];r=e.clientY-n,o.style.transition="transform 0s",o.style.transform="translateY("+(a*s+r)+"px)"}),t.addEventListener("touchend",function(t){t.preventDefault();var i=t.changedTouches[0];if(r=i.clientY-n,o.style.transition="transform .3s",r<=-s/2?(a+=Math.floor(r/s))<=c&&(a=c):r>=s/2&&(a+=Math.floor(r/s))>=0&&(a=0),o.style.transform="translateY("+a+"rem)",u=Math.floor(Math.abs(a/1)),e.modifiers.province)var f="province";else if(e.modifiers.city)f="city";else if(e.modifiers.town)f="town";e.value.set(f,u)})}}}}},function(t,e,n){"use strict";var r=n(8),i=n(28),o=n(31),c=n(2),s=n(17),u=n(48),a=n(22),f=n(55),l=n(6)("iterator"),p=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,e,n,v,h,y,m){u(n,e,v);var x,g,_,b=function(t){if(!p&&t in O)return O[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},w=e+" Iterator",S="values"==h,k=!1,O=t.prototype,I=O[l]||O["@@iterator"]||h&&O[h],j=I||b(h),C=h?S?b("entries"):j:void 0,P="Array"==e&&O.entries||I;if(P&&(_=f(P.call(new t)))!==Object.prototype&&_.next&&(a(_,w,!0),r||"function"==typeof _[l]||c(_,l,d)),S&&I&&"values"!==I.name&&(k=!0,j=function(){return I.call(this)}),r&&!m||!p&&!k&&O[l]||c(O,l,j),s[e]=j,s[w]=d,h)if(x={values:S?j:b("values"),keys:y?j:b("keys"),entries:C},m)for(g in x)g in O||o(O,g,x[g]);else i(i.P+i.F*(p||k),e,x);return x}},function(t,e,n){var r=n(0),i=n(9),o=n(46),c=n(2),s=n(1),u=function(t,e,n){var a,f,l,p=t&u.F,d=t&u.G,v=t&u.S,h=t&u.P,y=t&u.B,m=t&u.W,x=d?i:i[e]||(i[e]={}),g=x.prototype,_=d?r:v?r[e]:(r[e]||{}).prototype;for(a in d&&(n=e),n)(f=!p&&_&&void 0!==_[a])&&s(x,a)||(l=f?_[a]:n[a],x[a]=d&&"function"!=typeof _[a]?n[a]:y&&f?o(l,r):m&&_[a]==l?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):h&&"function"==typeof l?o(Function.call,l):l,h&&((x.virtual||(x.virtual={}))[a]=l,t&u.R&&g&&!g[a]&&c(g,a,l)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e,n){t.exports=!n(4)&&!n(11)(function(){return 7!=Object.defineProperty(n(30)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(7),i=n(0).document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},function(t,e,n){t.exports=n(2)},function(t,e,n){var r=n(10),i=n(49),o=n(21),c=n(19)("IE_PROTO"),s=function(){},u=function(){var t,e=n(30)("iframe"),r=o.length;for(e.style.display="none",n(54).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),u=t.F;r--;)delete u.prototype[o[r]];return u()};t.exports=Object.create||function(t,e){var n;return null!==t?(s.prototype=r(t),n=new s,s.prototype=null,n[c]=t):n=u(),void 0===e?n:i(n,e)}},function(t,e,n){var r=n(1),i=n(5),o=n(51)(!1),c=n(19)("IE_PROTO");t.exports=function(t,e){var n,s=i(t),u=0,a=[];for(n in s)n!=c&&r(s,n)&&a.push(n);for(;e.length>u;)r(s,n=e[u++])&&(~o(a,n)||a.push(n));return a}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(33),i=n(21).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,i)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return t&&t.__esModule?t:{default:t}}(n(38));e.default={install:function(t,e){var n=e&&e.name||r.default.name;t.component(n,r.default)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(26),i=n.n(r);for(var o in r)"default"!==o&&function(t){n.d(e,t,function(){return r[t]})}(o);var c=n(72),s=!1;var u=function(t){s||n(39)},a=n(40)(i.a,c.a,!1,u,"data-v-4535f626",null);a.options.__file="src/CascadingPicker/CascadingPicker.vue",e.default=a.exports},function(t,e){},function(t,e){t.exports=function(t,e,n,r,i,o){var c,s=t=t||{},u=typeof t.default;"object"!==u&&"function"!==u||(c=t,s=t.default);var a,f="function"==typeof s?s.options:s;if(e&&(f.render=e.render,f.staticRenderFns=e.staticRenderFns,f._compiled=!0),n&&(f.functional=!0),i&&(f._scopeId=i),o?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},f._ssrRegister=a):r&&(a=r),a){var l=f.functional,p=l?f.render:f.beforeCreate;l?(f._injectStyles=a,f.render=function(t,e){return a.call(e),p(t,e)}):f.beforeCreate=p?[].concat(p,a):[a]}return{esModule:c,exports:s,options:f}}},function(t,e,n){"use strict";e.__esModule=!0;var r=c(n(42)),i=c(n(61)),o="function"==typeof i.default&&"symbol"==typeof r.default?function(t){return typeof t}:function(t){return t&&"function"==typeof i.default&&t.constructor===i.default&&t!==i.default.prototype?"symbol":typeof t};function c(t){return t&&t.__esModule?t:{default:t}}e.default="function"==typeof i.default&&"symbol"===o(r.default)?function(t){return void 0===t?"undefined":o(t)}:function(t){return t&&"function"==typeof i.default&&t.constructor===i.default&&t!==i.default.prototype?"symbol":void 0===t?"undefined":o(t)}},function(t,e,n){t.exports={default:n(43),__esModule:!0}},function(t,e,n){n(44),n(57),t.exports=n(23).f("iterator")},function(t,e,n){"use strict";var r=n(45)(!0);n(27)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){var r=n(14),i=n(15);t.exports=function(t){return function(e,n){var o,c,s=String(i(e)),u=r(n),a=s.length;return u<0||u>=a?t?"":void 0:(o=s.charCodeAt(u))<55296||o>56319||u+1===a||(c=s.charCodeAt(u+1))<56320||c>57343?t?s.charAt(u):o:t?s.slice(u,u+2):c-56320+(o-55296<<10)+65536}}},function(t,e,n){var r=n(47);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){"use strict";var r=n(32),i=n(12),o=n(22),c={};n(2)(c,n(6)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(c,{next:i(1,n)}),o(t,e+" Iterator")}},function(t,e,n){var r=n(3),i=n(10),o=n(18);t.exports=n(4)?Object.defineProperties:function(t,e){i(t);for(var n,c=o(e),s=c.length,u=0;s>u;)r.f(t,n=c[u++],e[n]);return t}},function(t,e,n){var r=n(34);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(5),i=n(52),o=n(53);t.exports=function(t){return function(e,n,c){var s,u=r(e),a=i(u.length),f=o(c,a);if(t&&n!=n){for(;a>f;)if((s=u[f++])!=s)return!0}else for(;a>f;f++)if((t||f in u)&&u[f]===n)return t||f||0;return!t&&-1}}},function(t,e,n){var r=n(14),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},function(t,e,n){var r=n(14),i=Math.max,o=Math.min;t.exports=function(t,e){return(t=r(t))<0?i(t+e,0):o(t,e)}},function(t,e,n){var r=n(0).document;t.exports=r&&r.documentElement},function(t,e,n){var r=n(1),i=n(56),o=n(19)("IE_PROTO"),c=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},function(t,e,n){var r=n(15);t.exports=function(t){return Object(r(t))}},function(t,e,n){n(58);for(var r=n(0),i=n(2),o=n(17),c=n(6)("toStringTag"),s="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),u=0;u<s.length;u++){var a=s[u],f=r[a],l=f&&f.prototype;l&&!l[c]&&i(l,c,a),o[a]=o.Array}},function(t,e,n){"use strict";var r=n(59),i=n(60),o=n(17),c=n(5);t.exports=n(27)(Array,"Array",function(t,e){this._t=c(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},function(t,e){t.exports=function(){}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){t.exports={default:n(62),__esModule:!0}},function(t,e,n){n(63),n(69),n(70),n(71),t.exports=n(9).Symbol},function(t,e,n){"use strict";var r=n(0),i=n(1),o=n(4),c=n(28),s=n(31),u=n(64).KEY,a=n(11),f=n(20),l=n(22),p=n(13),d=n(6),v=n(23),h=n(24),y=n(65),m=n(66),x=n(10),g=n(7),_=n(5),b=n(16),w=n(12),S=n(32),k=n(67),O=n(68),I=n(3),j=n(18),C=O.f,P=I.f,M=k.f,E=r.Symbol,T=r.JSON,L=T&&T.stringify,D=d("_hidden"),N=d("toPrimitive"),F={}.propertyIsEnumerable,R=f("symbol-registry"),A=f("symbols"),$=f("op-symbols"),Y=Object.prototype,G="function"==typeof E,V=r.QObject,B=!V||!V.prototype||!V.prototype.findChild,W=o&&a(function(){return 7!=S(P({},"a",{get:function(){return P(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=C(Y,e);r&&delete Y[e],P(t,e,n),r&&t!==Y&&P(Y,e,r)}:P,z=function(t){var e=A[t]=S(E.prototype);return e._k=t,e},H=G&&"symbol"==typeof E.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof E},J=function(t,e,n){return t===Y&&J($,e,n),x(t),e=b(e,!0),x(n),i(A,e)?(n.enumerable?(i(t,D)&&t[D][e]&&(t[D][e]=!1),n=S(n,{enumerable:w(0,!1)})):(i(t,D)||P(t,D,w(1,{})),t[D][e]=!0),W(t,e,n)):P(t,e,n)},K=function(t,e){x(t);for(var n,r=y(e=_(e)),i=0,o=r.length;o>i;)J(t,n=r[i++],e[n]);return t},U=function(t){var e=F.call(this,t=b(t,!0));return!(this===Y&&i(A,t)&&!i($,t))&&(!(e||!i(this,t)||!i(A,t)||i(this,D)&&this[D][t])||e)},q=function(t,e){if(t=_(t),e=b(e,!0),t!==Y||!i(A,e)||i($,e)){var n=C(t,e);return!n||!i(A,e)||i(t,D)&&t[D][e]||(n.enumerable=!0),n}},X=function(t){for(var e,n=M(_(t)),r=[],o=0;n.length>o;)i(A,e=n[o++])||e==D||e==u||r.push(e);return r},Q=function(t){for(var e,n=t===Y,r=M(n?$:_(t)),o=[],c=0;r.length>c;)!i(A,e=r[c++])||n&&!i(Y,e)||o.push(A[e]);return o};G||(s((E=function(){if(this instanceof E)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),e=function(n){this===Y&&e.call($,n),i(this,D)&&i(this[D],t)&&(this[D][t]=!1),W(this,t,w(1,n))};return o&&B&&W(Y,t,{configurable:!0,set:e}),z(t)}).prototype,"toString",function(){return this._k}),O.f=q,I.f=J,n(36).f=k.f=X,n(25).f=U,n(35).f=Q,o&&!n(8)&&s(Y,"propertyIsEnumerable",U,!0),v.f=function(t){return z(d(t))}),c(c.G+c.W+c.F*!G,{Symbol:E});for(var Z="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),tt=0;Z.length>tt;)d(Z[tt++]);for(var et=j(d.store),nt=0;et.length>nt;)h(et[nt++]);c(c.S+c.F*!G,"Symbol",{for:function(t){return i(R,t+="")?R[t]:R[t]=E(t)},keyFor:function(t){if(!H(t))throw TypeError(t+" is not a symbol!");for(var e in R)if(R[e]===t)return e},useSetter:function(){B=!0},useSimple:function(){B=!1}}),c(c.S+c.F*!G,"Object",{create:function(t,e){return void 0===e?S(t):K(S(t),e)},defineProperty:J,defineProperties:K,getOwnPropertyDescriptor:q,getOwnPropertyNames:X,getOwnPropertySymbols:Q}),T&&c(c.S+c.F*(!G||a(function(){var t=E();return"[null]"!=L([t])||"{}"!=L({a:t})||"{}"!=L(Object(t))})),"JSON",{stringify:function(t){for(var e,n,r=[t],i=1;arguments.length>i;)r.push(arguments[i++]);if(n=e=r[1],(g(e)||void 0!==t)&&!H(t))return m(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!H(e))return e}),r[1]=e,L.apply(T,r)}}),E.prototype[N]||n(2)(E.prototype,N,E.prototype.valueOf),l(E,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},function(t,e,n){var r=n(13)("meta"),i=n(7),o=n(1),c=n(3).f,s=0,u=Object.isExtensible||function(){return!0},a=!n(11)(function(){return u(Object.preventExtensions({}))}),f=function(t){c(t,r,{value:{i:"O"+ ++s,w:{}}})},l=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,r)){if(!u(t))return"F";if(!e)return"E";f(t)}return t[r].i},getWeak:function(t,e){if(!o(t,r)){if(!u(t))return!0;if(!e)return!1;f(t)}return t[r].w},onFreeze:function(t){return a&&l.NEED&&u(t)&&!o(t,r)&&f(t),t}}},function(t,e,n){var r=n(18),i=n(35),o=n(25);t.exports=function(t){var e=r(t),n=i.f;if(n)for(var c,s=n(t),u=o.f,a=0;s.length>a;)u.call(t,c=s[a++])&&e.push(c);return e}},function(t,e,n){var r=n(34);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(5),i=n(36).f,o={}.toString,c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return c&&"[object Window]"==o.call(t)?function(t){try{return i(t)}catch(t){return c.slice()}}(t):i(r(t))}},function(t,e,n){var r=n(25),i=n(12),o=n(5),c=n(16),s=n(1),u=n(29),a=Object.getOwnPropertyDescriptor;e.f=n(4)?a:function(t,e){if(t=o(t),e=c(e,!0),u)try{return a(t,e)}catch(t){}if(s(t,e))return i(!r.f.call(t,e),t[e])}},function(t,e){},function(t,e,n){n(24)("asyncIterator")},function(t,e,n){n(24)("observable")},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"Cascading-picker"},[n("transition",{attrs:{name:"fade"}},[Boolean(t.value)?n("div",{staticClass:"mask",on:{click:t.clickModal}}):t._e()]),t._v(" "),n("transition",{attrs:{name:"animate"}},[Boolean(t.value)?n("div",{staticClass:"picker"},[n("div",{staticClass:"picker-head"},[n("div",[n("span",{on:{click:t.cancel}},[t._t("cancelText",[t._v("取消")])],2)]),t._v(" "),n("div",[n("span",{on:{click:t.ok}},[t._t("okText",[t._v("确定")])],2)])]),t._v(" "),n("div",{staticClass:"picker-wrap"},[n("div",{staticClass:"content"},[n("div",{directives:[{name:"picker",rawName:"v-picker.province",value:{set:t.set,get:t.get},expression:"{set:set, get: get}",modifiers:{province:!0}}],ref:"province",staticClass:"content-item",class:{w50:t.hasTown}},[n("div",{staticClass:"picker-item"},t._l(t.pickerData,function(e,r){return n("div",{key:e.name,staticClass:"item",class:{color:r==t.pIndex}},[t._v(t._s(e.name))])}))]),t._v(" "),n("div",{directives:[{name:"picker",rawName:"v-picker.city",value:{set:t.set,get:t.get},expression:"{set:set, get: get}",modifiers:{city:!0}}],ref:"city",staticClass:"content-item",class:{w50:t.hasTown}},[n("div",{staticClass:"picker-item"},t._l(t.city,function(e,r){return n("div",{key:r,staticClass:"item",class:{color:r==t.cIndex}},[t._v(t._s(e.name?e.name:e))])}))]),t._v(" "),n("div",{directives:[{name:"picker",rawName:"v-picker.town",value:{set:t.set,get:t.get},expression:"{set:set, get: get}",modifiers:{town:!0}}],ref:"town",staticClass:"content-item",class:{w0:t.hasTown}},[n("div",{staticClass:"picker-item"},t._l(t.town,function(e,r){return n("div",{key:e,staticClass:"item",class:{color:r==t.tIndex}},[t._v(t._s(e))])}))])]),t._v(" "),n("div",{staticClass:"line"})])]):t._e()])],1)};r._withStripped=!0;var i={render:r,staticRenderFns:[]};e.a=i}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cascading-picker",
 3 |   "version": "0.2.2",
 4 |   "description": "CascadingPicker for Vue 2",
 5 |   "main": "dist/CascadingPicker.js",
 6 |   "scripts": {
 7 |     "config": "node config/index.js",
 8 |     "build": "webpack --progress"
 9 |   },
10 |   "keywords": [
11 |     "vue2",
12 |     "address-picker",
13 |     "address-picker-vue",
14 |     "CascadingPicker"
15 |   ],
16 |   "author": "Alan Chen",
17 |   "license": "MIT",
18 |   "private": false,
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "https://github.com/alanchenchen/vue-address-picker"
22 |   },
23 |   "homepage": "https://github.com/alanchenchen/vue-address-picker",
24 |   "dependencies": {
25 |     "babel-runtime": "^6.26.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.26.0",
29 |     "babel-loader": "^7.1.2",
30 |     "babel-plugin-transform-runtime": "^6.23.0",
31 |     "babel-preset-env": "^1.6.1",
32 |     "babel-preset-stage-3": "^6.24.1",
33 |     "chalk": "^2.4.1",
34 |     "clean-webpack-plugin": "^0.1.19",
35 |     "css-loader": "^0.28.7",
36 |     "extract-text-webpack-plugin": "^3.0.2",
37 |     "file-loader": "^1.1.4",
38 |     "inquirer": "^6.1.0",
39 |     "uglifyjs-webpack-plugin": "^1.0.1",
40 |     "vue-loader": "^13.0.5",
41 |     "vue-template-compiler": "^2.4.4",
42 |     "webpack": "^3.8.1"
43 |   },
44 |   "babel": {
45 |     "presets": [
46 |       "env",
47 |       "stage-3"
48 |     ],
49 |     "plugins": [
50 |       [
51 |         "transform-runtime",
52 |         {
53 |           "polyfill": false,
54 |           "regenerator": true,
55 |           "moduleName": "babel-runtime"
56 |         }
57 |       ]
58 |     ]
59 |   }
60 | }


--------------------------------------------------------------------------------
/picker.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanchenchen/CascadingPicker/e9c81b708acc83839332ce2bd8d0c03281fcd2ce/picker.gif


--------------------------------------------------------------------------------
/src/CascadingPicker/CascadingPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="Cascading-picker">
  3 | 		<transition name="fade">
  4 | 			<div class="mask" @click="clickModal" v-if="Boolean(value)"></div>
  5 | 		</transition>
  6 | 		<transition name="animate">
  7 | 			<div class="picker" v-if="Boolean(value)">
  8 | 				<div class="picker-head">
  9 | 					<div>
 10 | 						<span @click="cancel">
 11 | 							<slot name="cancelText">取消</slot>
 12 | 						</span>
 13 | 					</div>
 14 | 					<div>
 15 | 						<span @click="ok">
 16 | 							<slot name="okText">确定</slot>
 17 | 						</span>
 18 | 					</div>
 19 | 				</div>
 20 | 				<div class="picker-wrap">
 21 | 					<div class="content">
 22 | 						<div class="content-item" :class="{w50:hasTown}" v-picker.province="{set:set, get: get}" ref="province">
 23 | 							<div class="picker-item">
 24 | 								<div class="item" v-for="(val,index) of pickerData" :class="{color:index==pIndex}" :key="val.name">{{val.name}}</div>
 25 | 							</div>
 26 | 						</div>
 27 | 						<div class="content-item" :class="{w50:hasTown}" v-picker.city="{set:set, get: get}" ref="city">
 28 | 							<div class="picker-item">
 29 | 								<div class="item" v-for="(val,index) of city" :class="{color:index==cIndex}" :key="index">{{val.name?val.name:val}}</div>
 30 | 							</div>
 31 | 						</div>
 32 | 						<div class="content-item" :class="{w0:hasTown}" v-picker.town="{set:set, get: get}" ref="town">
 33 | 							<div class="picker-item">
 34 | 								<div class="item" v-for="(val,index) of town" :class="{color:index==tIndex}" :key="val">{{val}}</div>
 35 | 							</div>
 36 | 						</div>
 37 | 					</div>
 38 | 					<div class="line"></div>
 39 | 				</div>
 40 | 			</div>
 41 | 		</transition>
 42 | 	</div>
 43 | </template>
 44 | 
 45 | <script>
 46 | 
 47 | export default {
 48 | 	/**
 49 | 	 * comoponent: CascadingPicker 三级联动，默认提供地址三级联动数据
 50 | 	 * author： Alan Chen
 51 | 	 * contact：739709491@qq.com
 52 | 	 * lastDate: 2018/10/12
 53 | 	 * 使用：
 54 | 	 *	props: 
 55 | 	 *  	1. value， 布尔值，控制地址选择器显示与否,可以使用v-model绑定变量，默认为false
 56 | 	 *		2. initial，对象，格式为{first:'', second: '', third: ''}，对应的value必须是data中的字符串，如果不是，则默认显示第一条 
 57 | 	 *		3. data，数组，三级联动的数据。格式必须与address-data一致
 58 | 	 *		4. closeOnClickModal，布尔值。是否能够点击遮罩层来关闭，默认为false
 59 | 	 *	emit events：
 60 | 	 *		1. ok，点击确定按钮触发。返回一个参数，格式为{first: '', second: '', third: ''}，为选中的值
 61 | 	 *		2. cancel，点击取消按钮触发，如果开启closeOnClickModal也会触发，无参数返回值
 62 | 	 *	slot:
 63 | 	 *		[name] okText, 字符串，点击右侧确定按钮的文本
 64 | 	 *		[name] cancelText, 字符串，点击左侧取消按钮的文本
 65 | 	 */
 66 | 	name: 'CascadingPicker',
 67 | 	props:{
 68 | 		/* v-model绑定 */
 69 | 		value: {
 70 | 			type: Boolean,
 71 | 			default: false
 72 | 		},
 73 | 		/* 默认选中值 */
 74 | 		initial: {
 75 | 			type: Object,
 76 | 			default() {
 77 | 				return {
 78 | 					first: '',
 79 | 					second: '',
 80 | 					third: ''
 81 | 				}
 82 | 			}
 83 | 		},
 84 | 		/* 三级联动的数据*/
 85 | 		data: {
 86 | 			type: Array,
 87 | 			required: true
 88 | 		},
 89 | 		/* 是否能够点击遮罩层关闭 */
 90 | 		closeOnClickModal: {
 91 | 			type: Boolean,
 92 | 			default: false
 93 | 		}
 94 | 	},
 95 | 	data() {
 96 | 		return {
 97 | 			pickerData: this.data,
 98 | 			/* 通过一个开关来判断是否让三级联动，初始值传入会触发watch，此时不需要三级联动 */
 99 | 			initalRender: true,
100 | 			pIndex: 0,
101 | 			cIndex: 0,
102 | 			tIndex: 0
103 | 		}
104 | 	},
105 | 	computed:{
106 | 		province(){
107 | 			return this.pickerData[this.pIndex].name;
108 | 		},
109 | 		city(){
110 | 			return this.pickerData[this.pIndex].list.length==1
111 | 				   ? this.pickerData[this.pIndex].list[0].secondList
112 | 				   : this.pickerData[this.pIndex].list;
113 | 		},
114 | 		town(){
115 | 			return this.pickerData[this.pIndex].list.length==1
116 | 			       ? []
117 | 				   : this.pickerData[this.pIndex].list[this.cIndex].secondList;
118 | 		},
119 | 		hasTown(){
120 | 			return this.pickerData[this.pIndex].list.length==1
121 | 		}
122 | 	},
123 | 	/* mounted之后先根据props的inital来初始化各个索引 */
124 | 	mounted() {
125 | 		this.resetIndex()
126 | 	},
127 | 	methods: {
128 | 		ok() {
129 | 			let first = this.province;
130 | 			let second = this.city[this.cIndex].name || this.city[this.cIndex]
131 | 			let third = this.town[this.tIndex]?this.town[this.tIndex]:''
132 | 			/* 每次点击确定事件，将地址选择器重置到初始状态 */
133 | 			this.resetIndex()
134 | 			this.$emit('input', false)
135 | 			this.$emit('ok',{ first, second, third})
136 | 		},
137 | 		cancel() {
138 | 			/* 每次点击取消事件，将地址选择器重置到初始状态 */
139 | 			this.resetIndex()
140 | 			this.$emit('input', false)
141 | 			this.$emit('cancel')
142 | 		},
143 | 		clickModal() {
144 | 			if(this.closeOnClickModal) {
145 | 				this.cancel()
146 | 			}
147 | 		},
148 | 		/* 重置所有索引值，会先取props的inital值，取不到则为0 */
149 | 		resetIndex() {
150 | 			this.initalRender = true
151 | 			const firstIndex = this.pickerData.findIndex(item => {
152 | 				return item.name == this.initial.first
153 | 			})
154 | 			/* 每获取到一个索引，必须赋值，这样才能触发computed的值！ */
155 | 			this.pIndex = firstIndex > 0
156 | 						? firstIndex
157 | 						: 0
158 | 
159 | 			const secondIndex = this.city.findIndex(item => {
160 | 				const hasList = typeof item == 'object'
161 | 				return hasList
162 | 					? item.name == this.initial.second
163 | 					: item == this.initial.second
164 | 			})
165 | 			this.cIndex = secondIndex > 0
166 | 						? secondIndex
167 | 						: 0
168 | 
169 | 			const thirdIndex = this.town.findIndex(item => {
170 | 				return item == this.initial.third
171 | 			})
172 | 
173 | 			this.tIndex = thirdIndex > 0
174 | 						? thirdIndex
175 | 					    : 0
176 | 		},
177 | 		/* 和directive交互，获取当前的对应name索引 */
178 | 		get(name) {
179 | 			if(name == 'province'){
180 | 				return this.pIndex
181 | 			}else if(name == 'city'){
182 | 				return this.cIndex
183 | 			}else{
184 | 				return this.tIndex
185 | 			}
186 | 		},
187 | 		/* 和directive交互，设置当前的对应name索引 */
188 | 		set(name, index) {
189 | 			/* 每次手动触发索引变化，需要关闭initalRender，开启watch来三级联动 */
190 | 			this.initalRender = false
191 | 			if(name == 'province'){
192 | 				this.pIndex = index
193 | 			}else if(name == 'city'){
194 | 				this.cIndex = index
195 | 			}else{
196 | 				this.tIndex = index
197 | 			}
198 | 		}
199 | 	},
200 | 	watch:{
201 | 		/* 当picker节点初始渲染时，位移到指定索引位置 */
202 | 		value(val) { 
203 | 			if(val) {
204 | 				this.$nextTick(() => {
205 | 					this.$refs.province.children[0].style.transform = `translateY(${-this.pIndex}rem)`
206 | 					this.$refs.city.children[0].style.transform = `translateY(${-this.cIndex}rem)`
207 | 					this.$refs.town.children[0].style.transform = `translateY(${-this.tIndex}rem)`
208 | 				})
209 | 			}
210 | 		},
211 | 		/* 只让watch在非initalRender时才三级联动，因为初始值渲染时不需要联动 */
212 | 		pIndex(){
213 | 			if(!this.initalRender) { 
214 | 				this.cIndex = 0
215 | 				this.tIndex = 0
216 | 				this.$refs.city.children[0].style.transform = 'translateY(0)'
217 | 				this.$refs.town.children[0].style.transform = 'translateY(0)'
218 | 			}
219 | 		},
220 | 		cIndex(){
221 | 			if(!this.initalRender) {
222 | 				this.tIndex = 0
223 | 				this.$refs.town.children[0].style.transform = 'translateY(0)'
224 | 			}
225 | 		}
226 | 	},
227 | 	directives:{
228 | 		picker:{
229 | 			bind(el, binding){
230 | 				let startY = '',
231 | 					differY = '';
232 | 				let len = el.children[0].children.length
233 | 				let dom = el.children[0]
234 | 				let maxY = -(len-1)
235 | 				let r = Number.parseFloat(document.documentElement.style.fontSize)
236 | 				/* 初始idnex和初始位移先从props的initial取，没有则全为0 */
237 | 				let index, currentY
238 | 
239 | 				/* 通过get方法通信，先获取当前索引 */
240 | 				if(binding.modifiers.province){
241 | 					index = binding.value.get('province')
242 | 				}else if(binding.modifiers.city){
243 | 					index = binding.value.get('city')
244 | 				}else if(binding.modifiers.town){
245 | 					index = binding.value.get('town')
246 | 				} 
247 | 				currentY = -index
248 | 
249 | 				el.addEventListener('touchstart',(e)=>{
250 | 					e.preventDefault();
251 | 					if(dom.style.transform == 'translateY(0px)'){
252 | 						currentY = 0
253 | 						maxY = -(el.children[0].children.length-1)
254 | 					}
255 | 					let ev = e.touches[0]
256 | 					startY = ev.clientY
257 | 				});
258 | 
259 | 				el.addEventListener('touchmove',(e)=>{
260 | 					e.preventDefault()
261 | 					let ev = e.touches[0]
262 | 					differY = ev.clientY - startY
263 | 					dom.style.transition = 'transform 0s'		
264 | 					dom.style.transform = `translateY(${currentY*r+differY}px)`
265 | 				});
266 | 
267 | 				el.addEventListener('touchend',(e)=>{
268 | 					e.preventDefault()
269 | 					let ev = e.changedTouches[0]
270 | 					differY = ev.clientY - startY
271 | 					dom.style.transition = 'transform .3s'
272 | 					if(differY <= -r/2){
273 | 						currentY += Math.floor(differY/r)
274 | 						if(currentY<=maxY)currentY = maxY
275 | 					}
276 | 					else if(differY >= r/2){
277 | 						currentY += Math.floor(differY/r)
278 | 						if(currentY>=0)currentY = 0
279 | 					}
280 | 					dom.style.transform = `translateY(${currentY}rem)`
281 | 					/* 记录当前位移在数组中的索引,必须取整，否则会出现浮点数 */
282 | 					index = Math.floor(Math.abs(currentY/1))
283 | 					if(binding.modifiers.province){
284 | 						var name = 'province'
285 | 					}else if(binding.modifiers.city){
286 | 						var name = 'city'
287 | 					}else if(binding.modifiers.town){
288 | 						var name = 'town'
289 | 					}
290 | 					binding.value.set(name, index)
291 | 				});
292 | 			}
293 | 		}
294 | 	}
295 | }
296 | </script>
297 | 
298 | <style scoped>
299 | .fade-enter-active,.fade-leave-active{
300 | 	transition: all .3s;
301 | }
302 | .fade-enter,.fade-leave-to{
303 | 	opacity: 1;
304 | }
305 | .animate-enter-active,.animate-leave-active{
306 | 	transition: all .3s;
307 | }
308 | .animate-enter,.animate-leave-to{
309 | 	transform:translateY(100%);
310 | }
311 | .w50{
312 | 	width: 50% !important;
313 | }
314 | .w0{
315 | 	width:0% !important;
316 | }
317 | .mask{
318 | 	position:fixed;
319 | 	left: 0;
320 | 	bottom: 0;
321 | 	z-index: 10;
322 | 	width: 100%;
323 | 	height: 100%;
324 | 	background: rgba(0,0,0,.6);
325 | }
326 | .picker .color{
327 | 	color:#000;
328 | 	font-weight: bold;
329 | }
330 | .picker{
331 | 	position:fixed;
332 | 	left: 0;
333 | 	bottom: 0;
334 | 	z-index: 10;
335 | 	width: 100%;
336 | 	height: 5.5rem;
337 | 	background: #fff;
338 | }
339 | .picker-head{
340 | 	display: flex;
341 | 	justify-content: space-around;
342 | 	padding: 0 .3rem;
343 | 	height: .8rem;
344 | 	font-size: .3rem;
345 | 	color: #2395ff;
346 | 	background: #efefef;
347 | }
348 | .picker-head div{
349 | 	flex-grow: .4;
350 | 	line-height: .8rem;
351 | }
352 | .picker-head div:nth-child(1){
353 | 	text-align: left;
354 | }
355 | .picker-head div:nth-child(2){
356 | 	text-align: right;
357 | }
358 | .picker-wrap{
359 | 	position: relative;
360 | 	height: 4.7rem;
361 | }
362 | .content{
363 | 	display: flex;
364 | 	width:100%;
365 | 	height: 100%;
366 | }
367 | .content-item{
368 | 	width: 33.33%;
369 | 	height: 100%;
370 | 	overflow: hidden;
371 | 	transition:width .3s;
372 | }
373 | .picker-item{
374 | 	position: relative;
375 | 	z-index: 10;
376 | 	width:100%;
377 | 	top: 1.85rem;
378 | }
379 | .item{
380 | 	flex-grow: 3;
381 | 	height: 1rem;
382 | 	line-height: 1rem;
383 | 	font-size: .3rem;
384 | 	color:#707274;
385 | 	overflow: hidden;
386 | 	text-overflow: ellipsis;
387 | 	white-space: nowrap;
388 | 	text-align: center;
389 | }
390 | .line{
391 | 	position: absolute;
392 | 	top:50%;
393 | 	left: 0;
394 | 	margin-top: -.5rem;
395 | 	width:100%;
396 | 	height: 1rem;
397 | 	border-top:.02rem solid #ddd ;
398 | 	border-bottom:.02rem solid #ddd ;
399 | }
400 | </style>
401 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @description 插件的入口模块。webpack的entry
 3 |  */
 4 | import CascadingPicker from './CascadingPicker/CascadingPicker.vue'
 5 | 
 6 | export default {
 7 |     install(Vue, options) {
 8 |         const componentName = (options && options.name) || CascadingPicker.name
 9 |         Vue.component(componentName, CascadingPicker)
10 |     }
11 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 3 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin')//压缩混淆
 4 | const CleanWebpackPlugin = require('clean-webpack-plugin')//清除打包后的重复chunk
 5 | const ROOTPATH = process.cwd()
 6 | const bundleName = require('./config/lib.config.js').bundleName
 7 | 
 8 | module.exports = {
 9 |     entry: {
10 |         [bundleName]: path.resolve(__dirname, './src/index.js')
11 |     },
12 |     output: {
13 |         path: path.resolve(__dirname, 'dist'),
14 |         filename: '[name].js',
15 |         library: bundleName,
16 |         libraryTarget: 'umd',
17 |         umdNamedDefine: true
18 |     },
19 |     module: {
20 |         rules: [
21 |             {
22 |                 test: /\.js$/, //打包js，转码ES6
23 |                 exclude: /(node_modules|bower_components)/,
24 |                 include: path.join(__dirname, 'src'),
25 |                 use: {
26 |                     loader: 'babel-loader',
27 |                     options: {
28 |                         presets: ['env', 'stage-3']
29 |                     }
30 |                 }
31 |             },
32 |             {
33 |                 test: /\.vue$/, //打包vue
34 |                 loader: 'vue-loader',
35 |                 options: {
36 |                     loaders: {
37 |                         css: ExtractTextPlugin.extract({
38 |                             fallback: 'vue-style-loader',
39 |                             use: [
40 |                                 {
41 |                                     loader: 'css-loader',
42 |                                     options: {
43 |                                         minimize: true
44 |                                     }
45 |                                 }
46 |                             ]
47 |                         })
48 |                     }
49 |                 }
50 |             }
51 |         ]
52 |     },
53 |     plugins: [
54 |         new ExtractTextPlugin({
55 |             filename: '[name].css', 
56 |             allChunks: true
57 |         }),
58 |         new CleanWebpackPlugin('dist', { root: ROOTPATH, verbose: false }), //每次打包都会清除dist目录
59 |         new UglifyJSPlugin({//压缩混淆代码，并且生成sourceMap调试
60 |             uglifyOptions: {
61 |                 ecma: 8,//支持ECMA 8语法
62 |                 warnings: false//去掉警告
63 |             },
64 |             sourceMap: false
65 |         })
66 |     ]
67 | }


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