VUE-地域セレクタ(V-Distpicker)コンポーネント

ドキュメント: https://distpicker.pigjian.com/
1.インストール

npm install v-distpicker --save

2.使用
グローバルコンポーネントの登録

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

コンポーネントの登録

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

3.使い方
きほんひきこみ

デフォルト

いどうたんし

4.注意点
選択した値の取得

v-distpickerを参照する親コンポーネントで、選択した値を取得するためのいくつかの方法を定義します.

  import VDistpicker from 'v-distpicker'
  export default {
    name: 'getAddress',
    components: { VDistpicker },
    data() {
      return {
        show:false,
      }
    },
    methods: {
      choose(){
        this.show=!this.show
      },
      onChangeProvince(a){
        console.log(a)        
      },
      onChangeCity(a){
        console.log(a)        
      },
      onChangeArea(a){
        console.log(a)  
        this.show=false
      }      
    },
}</code></pre> 
  <p>5.   </p> 
  <pre class="has"><code class="language-html"><style scoped>
  .divwrap{
    height: 400px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .divwrap>>>.distpicker-address-wrapper{
    color: #999;
  }
  .divwrap>>>.address-header{
    position: fixed;
    bottom: 400px;
    width: 100%;
    background: #000;
    color:#fff;
  }
  .divwrap>>>.address-header ul li{
    flex-grow: 1;
    text-align: center;
  }
  .divwrap>>>.address-header .active{
    color: #fff;
    border-bottom:#666 solid 8px
  }
  .divwrap>>>.address-container .active{
    color: #000;
  }
 
</style></code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1281120073951494144"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

JAva解析APK
3213213333332132
java apk linux 解析APK

nginxカスタムipアクセスNメソッド
ronin47
nginxはipアクセスを禁止します

mysql timestampタイプフィールドのCURRENT_TIMESTAMPとON UPDATE CURRENT_TIMESTAMPプロパティ
dcj3sjt126com
mysql

struts 2+spring+hibernateページング表示
171815164
Hibernate

独自のWrapperアプリケーションの構築
g21121
rap

[簡易]作業記録_マルチスレッド相関
53873039oycg
マルチスレッド

jdkのソースコードをデバッグし、jdkローカル変数を表示します。
プログラマーはどうやって作ったの?
jdkソースコード

Oracle RAC Failoverの詳細
aijuans
oracle

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com,All Rights Reserved.
京ICP備09083238号