vue學習之mintui picker選擇器實現省市二級聯動

阿新 • • 發佈：2019-01-20

程式碼如下：

<!-- 頁面模版 -->
<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": 200,
    "msg": "獲取區域資訊成功！",
    "t": {
        "areaList": [
            {
                "上海": [
                    "上海"
                ],
                "北京": [
                    "北京"
                ],
                "廣東": [
                    "廣州",
                    "深圳"
                ],
                "江蘇": [
                    "徐州",
                    "南京"
                ],
                "福建": [
                    "福州"
                ]
            }
        ],
        "provinceCodeList": [
            {
                "上海": [
                    "120001"
                ],
                "北京": [
                    "110001"
                ],
                "廣東": [
                    "130001"
                ],
                "江蘇": [
                    "130007"
                ],
                "福建": [
                    "0100"
                ]
            }
        ],
        "cityCodeList": [
            {
                "上海": [
                    "120002"
                ],
                "北京": [
                    "110002"
                ],
                "廣州": [
                    "130002"
                ],
                "南京": [
                    "130006"
                ],
                "深圳": [
                    "518000"
                ],
                "福州": [
                    "0200"
                ],
                "徐州": [
                    "130009"
                ]
            }
        ]
    }
}

vue學習之mintui picker選擇器實現省市二級聯動

程式碼如下：  <template> <div>  <com-header :title="headerData.title" :toLi

我的web前端學習之路-CSS-選擇器

選擇產生之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽直接指定一個準確元素名，對其產生作用指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！（註意！！）class屬性的值可以用空格隔開表示多個cla

Python學習之路：裝飾器實現

fun python run top 學習 pytho sleep light time() import time def timer(func):#timer(test1) func=test1 def deco(): start_time

Python學習之路：裝飾器實現終極版

index type after color return 結果 python turn 調用網站實現驗證功能裝飾器： import time user,passwd=‘alex‘,‘abc123‘ def auth(func): def wrapper(*ar

分別使用js和JQuery實現省市二級聯動

1.1html js中this指的是當前操作的物件 <tr> <td>籍貫</td> <td><select onchange="changeCity(this.value)" id="province" &g

Ajax,js實現省市二級聯動

Ajax，js實現省市二級聯動這裡不羅嗦，直接放圖，分析。如圖實現效果。如下：前端程式碼分析：後端程式碼，相當簡單，只需要查詢資料庫，省份放一個list集合，城市放一個list集合，回寫響應給前端。前端通過迴圈，一一獲取。 response.setContentType(“

原生js實現省市二級聯動

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面重新佈局</title> <style type="text/css

jquery ajax實現省市二級聯動

今天給大家帶來使用jQuery ajax實現的省市聯動效果。我們直奔主題，先說下實現思路：準備資料這裡資料庫我使用的是mysql，先看下錶格： provience表 city表這裡使用provience表的主鍵作為city表的外來鍵，

用js解析xml實現省市二級聯動

html頁面表單部分 <select name="province" id="province" onchange="javascript:loadCity();"> <option value="0" selected="s

很簡單的html+js實現省市二級聯動

var arr = [ ["黃石", "大冶", "黃岡", "武漢", "荊州", "鄂州", "咸寧"], ["長沙", "株洲", "韶關", "湘潭"], ["鄭州", "駐馬店"

用JS實現省市二級聯動

一、需求分析我們希望在註冊頁面中新增一個欄位(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態載入該省份下所有的城市。顯示的效果如下：二、技術分析使用事件(onchange)使用一個二維陣列來儲存省份和城市獲取使用者選擇的省份(使用方法傳參的方式：this.value

JQuery EasyUI Combobox 實現省市二級聯動選單

//編輯修改或新增頁面聯動可以這樣寫 jQuery(function(){ // 省級 $('#province').combobox({ valueField:'itemvalue', //值欄位 textField:'itemtex

Vue學習之旅----vuex實現不同元件的資料共享資料持久化

vuex實現不同元件的資料共享資料持久化當我們清除congsole和network後，重新整理一次，算是第一次請求，然後切換選項卡，當再回到使用者後，沒有再請求介面資料，只是載入vuex裡的資料，即快取到list裡的資料. import Vue from 'vue

09.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax異步請求數據

class ivr url 實現類 int php head 實現 sta cmd下安裝axios npm install axios 安裝好後,會多出node_modules文件夾思路: 監聽data裏的word改變時,發送ajax異步請求數據, 把返回的數據賦值給d

iOS專案模仿之喜馬拉雅（三）—— 分段選擇器實現

封裝控制元件在iOS開發中是常遇到的事，如果專案比較趕的話，我們可以用別人寫好的開源專案，但是對於技術提升來說，最好還是自己封裝，這是一個app的模仿，我們的目的就是要提高技術水平，所以嘗試封裝一下。記錄自己的思路，有時間對比一下別人的思路，可以收穫更多，當然自己思考在

09.1.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax非同步請求資料,返回陣列

09.1html裡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

43.VUE學習之--元件之使用.sync修飾符與computed計算屬性超簡單的實現美團購物車原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist

Vue學習之原始碼分析--VNode節點(Vue.js實現（五）

抽象DOM樹在刀耕火種的年代，我們需要在各個事件方法中直接操作DOM來達到修改檢視的目的。但是當應用一大就會變得難以維護。那我們是不是可以把真實DOM樹抽象成一棵以JavaScript物件構成的抽象樹，在修改抽象樹資料後將抽象樹轉化成真實DOM重繪到頁面

Vue學習之路第七篇：跑馬燈項目實現

let rip char eth sta 對象 app 清除一個前面六篇講解了Vue的一些基礎知識，正所謂：學以致用，今天我們將用前六篇的基礎知識，來實現類似跑馬燈的項目。學前準備：需要掌握定時器的兩個函數：setInterval和clearInterval以及作用

Vue學習之路第十篇：簡單計算器的實現

oct color 實現 mode 初始化要掌握原理 content method 前面九篇講解了vue的一些基礎知識，正所謂：學以致用，今天我們將用前九篇的基礎知識，來模擬實現計算器的簡單功能，項目價值不高，純粹是為了加深掌握所學知識。學前準備：需要掌握JavaS

vue學習之mintui picker選擇器實現省市二級聯動

相關推薦