コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル vue の mintui ピッカー セレクターは、州と都市の第 2 レベルの連携を実現します。

vue の mintui ピッカー セレクターは、州と都市の第 2 レベルの連携を実現します。

小云云
小云云
May 18, 2018 pm 04:11 PM
mintui セレクタ

この記事では、vue で mintui ピッカー セレクターを使用して州と都市の第 2 レベルの連携を実現する例を主に紹介します。必要な方は参考にしていただければ幸いです。 。

この記事では、vue で mintui ピッカー セレクターを使用して州と都市の第 2 レベルの連携を実現する例を紹介します。詳細は次のとおりです。

Mint UI の使用ドキュメント。 : https://mint-ui.github.io/docs/# /zh-cn2

Popup ポップアップボックスの紹介: https://mint-ui.github.io/docs/#/zh-cn2/popup

ピッカーセレクターの紹介: https://mint-ui.github .io/docs/#/zh-cn2/picker

日時ピッカー日付ピッカーの紹介: https://mint-ui.github.io/docs/ #/zh-cn2/datetime-picker

コードは次のとおりです: 

<!-- 页面模版 --> 
<template> 
 <p> 
  <!--header--> 
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header> 
  <!--header end--> 
  <!--container--> 
  <p class="ybb-yuyue"> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">头像</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"></p> 
       <img v-bind:src="data.photo" :onerror="headImg" class="img-box5"> 
      </p> 
     </p> 
    </a> 
   </p> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">姓名</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="请输入姓名" type="text" class="mint-field-core text-right" v-model="data.userName"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">性别</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p 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"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <i class="mint-cell-allow-right"></i> 
      <mt-actionsheet :actions="sexs" v-model="sexVisible" cancel-text="取消"></mt-actionsheet> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">出生日期</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value is-link" @click="open(&#39;datePicker&#39;)"> 
        <input placeholder="请选择日期" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.birthday"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <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> 
     </p> 
    </a> 
   </p> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">电话号码</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="请输入电话号码" type="text" readonly="readonly" class="mint-field-core text-right gray" v-model="data.mobile"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">所在地区</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value is-link" @click="choiceArea"> 
        <input placeholder="请选择省市" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.areaText"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <i class="mint-cell-allow-right"></i> 
      <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-4"> 
       <p 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> 
       </p> 
       <mt-picker :slots="citySlots" @change="onCityChange" :visible-item-count="3"></mt-picker> 
      </mt-popup> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">详细地址</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="街道、楼牌号等" type="text" class="mint-field-core text-right" v-model="data.address"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
   </p> 
  </p> 
  <p 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> 
  </p> 
  <!--container end--> 
 </p> 
</template> 
<script> 
import {Toast} from &#39;mint-ui&#39; 
import validators from &#39;../utils/validators&#39; 
import comHeader from &#39;components/comHeader&#39; 
import mineInfoService from &#39;SERVICES/mineInfoService&#39; 
 
export default { 
 components: { 
  comHeader 
 }, 
 data: () => ({ 
  headImg: &#39;this.src="&#39; + require(&#39;../assets/img.png&#39;) + &#39;"&#39;, 
  headerData: { 
   title: &#39;我的资料&#39;, 
   toLink: &#39;/Mine&#39; 
  }, 
  popupVisible: false, 
  sexVisible: false, 
  areaPicker: &#39;&#39;, 
  areaList: [], 
  data: { 
   photo: &#39;&#39;, 
   userName: &#39;&#39;, 
   sex: &#39;&#39;, 
   sexText: &#39;&#39;, 
   mobile: &#39;&#39;, 
   birthday: &#39;&#39;, 
   privinceName: &#39;&#39;, 
   provinceId: &#39;&#39;, 
   cityName: &#39;&#39;, 
   cityId: &#39;&#39;, 
   address: &#39;&#39;, 
   areaText: &#39;&#39; 
  }, 
  sexs: [], 
  citySlots: [ 
   { 
    flex: 1, 
    values: Object.keys(address), 
    className: &#39;slot1&#39;, 
    textAlign: &#39;center&#39; 
   }, { 
    pider: true, 
    content: &#39;-&#39;, 
    className: &#39;slot2&#39; 
   }, { 
    flex: 1, 
    values: Object.values(address)[0], 
    className: &#39;slot3&#39;, 
    textAlign: &#39;center&#39; 
   } 
  ], 
  addressProvince: &#39;&#39;, 
  addressProvinceId: &#39;&#39;, 
  addressCity: &#39;&#39;, 
  addressCityId: &#39;&#39;, 
  dateValue: new Date(), 
  startDate: new Date(&#39;1900-01-01&#39;), 
  endDate: new Date() 
 }), 
 created () { 
  this.loadMineInfo() 
  this.loadAreaList() 
 }, 
 mounted () { 
  this.sexs = [{ 
   name: &#39;男&#39;, 
   method: this.selectMan 
  }, { 
   name: &#39;女&#39;, 
   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(&#39;地区数据异常&#39;) 
    } 
   }) 
  }, 
  choiceArea: function () { 
   this.popupVisible = true 
   // 设置默认选中 
   if (this.data.privinceName !== &#39;&#39; && this.data.cityName !== &#39;&#39;) { 
    this.areaPicker.setSlotValue(0, this.data.privinceName) 
    this.areaPicker.setSlotValue(1, this.data.cityName) 
    console.log(this.data.privinceName + &#39;-&#39; + 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() === &#39;&#39;) { 
    Toast(&#39;请输入姓名&#39;) 
   } else if (this.data.userName.trim().length > 12) { 
    Toast(&#39;姓名不能超过12个字符&#39;) 
   } else if (this.data.sex.toString().trim() === &#39;&#39;) { 
    Toast(&#39;请选择性别&#39;) 
   } else if (this.data.birthday.trim() === &#39;&#39;) { 
    Toast(&#39;请选择出生日期&#39;) 
   } else if (this.data.mobile.trim() === &#39;&#39;) { 
    Toast(&#39;请输入电话号码&#39;) 
   } else if (!validators.mobile(this.data.mobile.trim())) { 
    Toast(&#39;电话号码不正确&#39;) 
   } else if (this.data.areaText.toString().trim() === &#39;&#39;) { 
    Toast(&#39;请选择所在地区&#39;) 
   } else if (this.data.address.trim() === &#39;&#39;) { 
    Toast(&#39;请输入详细地址&#39;) 
   } else if (this.data.address.trim().length > 50) { 
    Toast(&#39;详细地址不能超过50个字符&#39;) 
   } else { 
    this.doAdd() 
   } 
  }, 
  doAdd: function () { 
   mineInfoService.updateAccount(this.data).then(res => { 
    Toast(&#39;修改成功&#39;) 
    this.$router.push(&#39;/Mine&#39;) 
   }) 
  }, 
  loadMineInfo: function () { 
   mineInfoService.loadMineInfo().then(res => { 
    this.data.photo = res.t.member.photo || &#39;&#39; 
    this.data.userName = res.t.member.userName || &#39;&#39; 
    this.data.sex = res.t.member.sex || &#39;&#39; 
    this.data.sexText = res.t.member.sex === &#39;1&#39; ? &#39;男&#39; : (res.t.member.sex === &#39;0&#39; ? &#39;女&#39; : &#39;&#39;) 
    this.data.mobile = res.t.member.mobile || &#39;&#39; 
    this.data.birthday = res.t.member.birthday || &#39;&#39; 
    this.data.area = res.t.member.area || &#39;&#39; 
    this.data.address = res.t.member.address || &#39;&#39; 
    this.dateValue = this.data.birthday 
    this.data.privinceName = res.t.member.priviceName || &#39;&#39; 
    this.data.cityName = res.t.member.cityName || &#39;&#39; 
    this.data.provinceId = res.t.member.provinceId || &#39;&#39; 
    this.data.cityId = res.t.member.cityId || &#39;&#39; 
    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] + &#39;&#39; 
   this.addressCityId = cityCodeList[this.addressCity] + &#39;&#39; 
  }, 
  open: function (picker) { 
   this.dateValue = this.data.birthday 
   this.$refs[picker].open() 
  }, 
  handleChange: function (value) { 
   this.data.birthday = window.moment(value).format(&#39;YYYY-MM-DD&#39;) 
  }, 
  selectMan: function () { 
   this.data.sex = &#39;1&#39; 
   this.data.sexText = &#39;男&#39; 
  }, 
  selectWoman: function () { 
   this.data.sex = &#39;0&#39; 
   this.data.sexText = &#39;女&#39; 
  } 
 } 
} 
 
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" 
        ] 
      } 
    ] 
  } 
}
ログイン後にコピー

関連する推奨事項:

自作の都市と郡のセカンダリの詳細な説明Angular4のリンケージコンポーネント

Ajaxとphpを組み合わせてセカンダリリンケージインスタンスメソッド

jsをHTMLで実装 セカンダリリンケージインスタンスの共有を選択

以上がvue の mintui ピッカー セレクターは、州と都市の第 2 レベルの連携を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前 By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7675
15
CakePHP チュートリアル
1393
52
C# チュートリアル
1207
24
Steamのアカウント名の形式は何ですか
91
11
Win11 Activation Key Permanent
73
19
もっと見る
Related knowledge
CSSのIDセレクターの識別子は何ですか CSSのIDセレクターの識別子は何ですか Sep 22, 2022 pm 03:57 PM

CSS では、ID セレクターの識別子は「#」です。特定の ID 属性値でマークされた HTML 要素に特定のスタイルを指定できます。構文構造は「#ID 値 {属性: 属性値;}」です。 ID 属性は一意であり、ページ全体で反復できません。ID 属性値は数字で始まってはなりません。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません。

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 :nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: &lt;divid="container" &gt;&lt;divclass="item"&gt ;最初の子要素&lt;/div&gt;&lt;divclass="item"&

JavaScript セレクターが失敗した場合の対処方法 JavaScript セレクターが失敗した場合の対処方法 Feb 10, 2023 am 10:15 AM

コードが標準化されていないため、JavaScript セレクターが失敗します。解決策は、 1. インポートされた JS コードを削除すると、ID セレクター方式が有効になります。 2. 「jquery.js」を導入する前に、指定された JS コードを導入するだけです。

css擬似セレクター学習擬似クラスセレクター解析 css擬似セレクター学習擬似クラスセレクター解析 Aug 03, 2022 am 11:26 AM

前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。

CSS のセレクターにはハイパーテキスト タグ セレクターが含まれますか? CSS のセレクターにはハイパーテキスト タグ セレクターが含まれますか? Sep 01, 2022 pm 05:25 PM

含まれていない。 CSS セレクターには次のものがあります: 1. HTML ページの要素名を通じて特定の HTML 要素を見つけるタグ セレクター; 2. HTML 要素の class 属性の値を通じて特定の HTML 要素を見つけるクラス セレクター; 3. ID セレクターHTML 要素の id 属性の値を通じて特定の HTML 要素を検索します。 4. ワイルドカード セレクター「*」は、カスタム要素を含むすべてのタイプのタグ要素を参照できます。 5. 属性セレクターは、HTML 要素の既存の属性名を使用します。特定の HTML 要素を見つけるための HTML 要素または属性値。

is および where セレクターの詳細な分析: CSS プログラミング レベルの向上 is および where セレクターの詳細な分析: CSS プログラミング レベルの向上 Sep 08, 2023 pm 08:22 PM

is および where セレクターの詳細な分析: CSS プログラミングのレベルの向上 はじめに: CSS プログラミングのプロセスにおいて、セレクターは不可欠な要素です。これにより、特定の基準に基づいて HTML ドキュメント内の要素を選択し、スタイルを設定することができます。この記事では、一般的に使用される 2 つのセレクター、つまり is セレクターと where セレクターについて詳しく説明します。その動作原理と使用シナリオを理解することで、CSS プログラミングのレベルを大幅に向上させることができます。 1. is selector is selector は非常に強力な選択肢です

lxml でサポートされているセレクターについて 1 つの記事で学習します lxml でサポートされているセレクターについて 1 つの記事で学習します Jan 13, 2024 pm 02:08 PM

lxml は、XML および HTML ドキュメントを処理するための強力な Python ライブラリです。解析ツールとして、ユーザーがドキュメントから必要なデータを簡単に抽出できるようにするさまざまなセレクターが提供されます。この記事では、lxml がサポートするセレクターについて詳しく紹介します。 lxml は次のセレクターをサポートします。 タグ セレクター (ElementTagSelector): タグ名によって要素を選択します。たとえば、<tagname> を使用して特定のタグ名を持つ要素を選択します。

初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする 初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする Sep 08, 2023 am 09:15 AM

初心者から上級者まで: is および where セレクターの使用スキルをマスターする はじめに: データの処理と分析のプロセスにおいて、セレクターは非常に重要なツールです。セレクターを使用すると、特定の条件に従ってデータセットから必要なデータを抽出できます。この記事では、読者がこれら 2 つのセレクターの強力な機能をすぐに習得できるように、is および where セレクターの使用スキルを紹介します。 1. is セレクターの使用 is セレクターは、与えられた条件に基づいてデータセットを選択できるようにする基本的なセレクターです。

See all articles