vue学习之mintui picker选择器实现省市二级联动示例

内容摘要
这篇文章主要为大家详细介绍了vue学习之mintui picker选择器实现省市二级联动示例,具有一定的参考价值,可以用来参考一下。

对此感兴趣的朋友,看看idc笔记做的技术笔记!
本文介
文章正文

这篇文章主要为大家详细介绍了vue学习之mintui picker选择器实现省市二级联动示例,具有一定的参考价值,可以用来参考一下。

对此感兴趣的朋友,看看idc笔记做的技术笔记!

本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下:

Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2

Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup

Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker

Datetime picker日期选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker

代码如下:

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<code>
<!-- 页面模版 -->
<template>
 <div>
  <!--header-->
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
  <!--header end-->
  <!--container-->
  <div class="ybb-yuyue">
   <div class="yy-item-box mine-me">
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">头像</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value"></div>
       <img v-bind:src="data.photo" :onerror="headImg" class="img-box5">
      </div>
     </div>
    </a>
   </div>
   <div class="yy-item-box mine-me">
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">姓名</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value">
        <input placeholder="请输入姓名" type="text" class="mint-field-core text-right" v-model="data.userName">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
     </div>
    </a>
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">性别</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value is-link" @click="sexVisible = true">
        <input placeholder="请选择性别" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.sexText">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
      <i class="mint-cell-allow-right"></i>
      <mt-actionsheet :actions="sexs" v-model="sexVisible" cancel-text="取消"></mt-actionsheet>
     </div>
    </a>
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">出生日期</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value is-link" @click="open('datePicker')">
        <input placeholder="请选择日期" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.birthday">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
      <i class="mint-cell-allow-right"></i>
      <mt-datetime-picker
       ref="datePicker"
       type="date"
       :startDate="startDate"
       :endDate="endDate"
       v-model="dateValue"
       @confirm="handleChange">
      </mt-datetime-picker>
     </div>
    </a>
   </div>
   <div class="yy-item-box mine-me">
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">电话号码</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value">
        <input placeholder="请输入电话号码" type="text" readonly="readonly" class="mint-field-core text-right gray" v-model="data.mobile">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
     </div>
    </a>
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">所在地区</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value is-link" @click="choiceArea">
        <input placeholder="请选择省市" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.areaText">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
      <i class="mint-cell-allow-right"></i>
      <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-4">
       <div class="picker-toolbar">
        <span class="mint-datetime-action mint-datetime-cancel" @click="cancleaddress">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="selectaddress">确定</span>
       </div>
       <mt-picker :slots="citySlots" @change="onCityChange" :visible-item-count="3"></mt-picker>
      </mt-popup>
     </div>
    </a>
    <a class="mint-cell mint-field">
     <div class="mint-cell-left"></div>
     <div class="mint-cell-wrapper">
      <div class="mint-cell-title">
       <span class="mint-cell-text">详细地址</span>
      </div>
      <div class="mint-cell-value">
       <div class="mint-cell-value">
        <input placeholder="街道、楼牌号等" type="text" class="mint-field-core text-right" v-model="data.address">
        <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
       </div>
      </div>
     </div>
    </a>
   </div>
  </div>
  <div class="yuyue-submit">
   <button class="mint-button mint-button--default mint-button--large ybb-btn" @click="infoSave"><label class="mint-button-text title-1">保存</label></button>
  </div>
  <!--container end-->
 </div>
</template>
<script>
import {Toast} from 'mint-ui'
import validators from '../utils/validators'
import comHeader from 'components/comHeader'
import mineInfoService from 'SERVICES/mineInfoService'
  
export default {
 components: {
  comHeader
 },
 data: () => ({
  headImg: 'this.src="' + require('../assets/img.png') + '"',
  headerData: {
   title: '我的资料',
   toLink: '/Mine'
  },
  popupVisible: false,
  sexVisible: false,
  areaPicker: '',
  areaList: [],
  data: {
   photo: '',
   userName: '',
   sex: '',
   sexText: '',
   mobile: '',
   birthday: '',
   privinceName: '',
   provinceId: '',
   cityName: '',
   cityId: '',
   address: '',
   areaText: ''
  },
  sexs: [],
  citySlots: [
   {
    flex: 1,
    values: Object.keys(address),
    className: 'slot1',
    textAlign: 'center'
   }, {
    divider: true,
    content: '-',
    className: 'slot2'
   }, {
    flex: 1,
    values: Object.values(address)[0],
    className: 'slot3',
    textAlign: 'center'
   }
  ],
  addressProvince: '',
  addressProvinceId: '',
  addressCity: '',
  addressCityId: '',
  dateValue: new Date(),
  startDate: new Date('1900-01-01'),
  endDate: new Date()
 }),
 created () {
  this.loadMineInfo()
  this.loadAreaList()
 },
 mounted () {
  this.sexs = [{
   name: '男',
   method: this.selectMan
  }, {
   name: '女',
   method: this.selectWoman
  }]
 },
 methods: {
  loadAreaList: function () {
   mineInfoService.loadAreaList().then(res => {
    if (res.t) {
     this.areaList = res.t
     address = this.areaList.areaList[0]
     provinceCodeList = this.areaList.provinceCodeList[0]
     cityCodeList = this.areaList.cityCodeList[0]
     this.citySlots[0].values = Object.keys(address)
     this.citySlots[2].values = Object.values(address)[0]
    } else {
     Toast('地区数据异常')
    }
   })
  },
  choiceArea: function () {
   this.popupVisible = true
   // 设置默认选中
   if (this.data.privinceName !== '' && this.data.cityName !== '') {
    this.areaPicker.setSlotValue(0, this.data.privinceName)
    this.areaPicker.setSlotValue(1, this.data.cityName)
    console.log(this.data.privinceName + '-' + this.data.cityName)
   }
  },
  cancleaddress: function () {
   this.popupVisible = false
   this.areaPicker.setSlotValue(0, this.data.privinceName)
   this.areaPicker.setSlotValue(1, this.data.cityName)
  },
  selectaddress: function () {
   this.popupVisible = false
   this.data.privinceName = this.addressProvince
   this.data.cityName = this.addressCity
   this.data.provinceId = this.addressProvinceId
   this.data.cityId = this.addressCityId
   this.data.areaText = this.data.privinceName + this.data.cityName
  },
  infoSave: function () {
   if (this.data.userName.trim() === '') {
    Toast('请输入姓名')
   } else if (this.data.userName.trim().length > 12) {
    Toast('姓名不能超过12个字符')
   } else if (this.data.sex.toString().trim() === '') {
    Toast('请选择性别')
   } else if (this.data.birthday.trim() === '') {
    Toast('请选择出生日期')
   } else if (this.data.mobile.trim() === '') {
    Toast('请输入电话号码')
   } else if (!validators.mobile(this.data.mobile.trim())) {
    Toast('电话号码不正确')
   } else if (this.data.areaText.toString().trim() === '') {
    Toast('请选择所在地区')
   } else if (this.data.address.trim() === '') {
    Toast('请输入详细地址')
   } else if (this.data.address.trim().length > 50) {
    Toast('详细地址不能超过50个字符')
   } else {
    this.doAdd()
   }
  },
  doAdd: function () {
   mineInfoService.updateAccount(this.data).then(res => {
    Toast('修改成功')
    this.$router.push('/Mine')
   })
  },
  loadMineInfo: function () {
   mineInfoService.loadMineInfo().then(res => {
    this.data.photo = res.t.member.photo || ''
    this.data.userName = res.t.member.userName || ''
    this.data.sex = res.t.member.sex || ''
    this.data.sexText = res.t.member.sex === '1' ? '男' : (res.t.member.sex === '0' ? '女' : '')
    this.data.mobile = res.t.member.mobile || ''
    this.data.birthday = res.t.member.birthday || ''
    this.data.area = res.t.member.area || ''
    this.data.address = res.t.member.address || ''
    this.dateValue = this.data.birthday
    this.data.privinceName = res.t.member.priviceName || ''
    this.data.cityName = res.t.member.cityName || ''
    this.data.provinceId = res.t.member.provinceId || ''
    this.data.cityId = res.t.member.cityId || ''
    this.data.areaText = this.data.privinceName + this.data.cityName
   })
  },
  onCityChange: function (picker, values) {
   this.areaPicker = picker
   /* 此处不直接使用this.data.privinceName、this.data.cityName、this.data.provinceId、this.data.cityId,由于在加载地区信息之后,我又重新设置了绑定到slots属性的值,此时也会触发@change事件,所以在nCityChange方法里需要用四个变量替代上述四个变量来记录当前选中的值,然后在点击确定之后的方法里将这四个值赋给上述四个变量。如果直接在该方法里使用上述四个变量来获取当前选中的值,可能导致数据错乱 */
   picker.setSlotValues(1, address[values[0]])
   this.addressProvince = values[0]
   this.addressCity = values[1]
   this.addressProvinceId = provinceCodeList[this.addressProvince] + ''
   this.addressCityId = cityCodeList[this.addressCity] + ''
  },
  open: function (picker) {
   this.dateValue = this.data.birthday
   this.$refs[picker].open()
  },
  handleChange: function (value) {
   this.data.birthday = window.moment(value).format('YYYY-MM-DD')
  },
  selectMan: function () {
   this.data.sex = '1'
   this.data.sexText = '男'
  },
  selectWoman: function () {
   this.data.sex = '0'
   this.data.sexText = '女'
  }
 }
}
  
let address = {}
let provinceCodeList = {}
let cityCodeList = {}
</script>
<style scoped>
.mint-popup-4 {
  width: 100%;
}
.mint-popup-4 .picker-slot-wrapper, .page-popup .mint-popup-4 .picker-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
</style>
</code>

地区数据格式如下:

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<code>
{
  "code": 200,
  "msg": "获取区域信息成功!",
  "t": {
    "areaList": [
      {
        "上海": [
          "上海"
        ],
        "北京": [
          "北京"
        ],
        "广东": [
          "广州",
          "深圳"
        ],
        "江苏": [
          "徐州",
          "南京"
        ],
        "福建": [
          "福州"
        ]
      }
    ],
    "provinceCodeList": [
      {
        "上海": [
          "120001"
        ],
        "北京": [
          "110001"
        ],
        "广东": [
          "130001"
        ],
        "江苏": [
          "130007"
        ],
        "福建": [
          "0100"
        ]
      }
    ],
    "cityCodeList": [
      {
        "上海": [
          "120002"
        ],
        "北京": [
          "110002"
        ],
        "广州": [
          "130002"
        ],
        "南京": [
          "130006"
        ],
        "深圳": [
          "518000"
        ],
        "福州": [
          "0200"
        ],
        "徐州": [
          "130009"
        ]
      }
    ]
  }
} </code>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持php教程。

注:关于vue学习之mintui picker选择器实现省市二级联动示例的内容就先介绍到这里,更多相关文章的可以留意

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!