概述
創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設計、網(wǎng)站建設與策劃設計,漢中網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設十載,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:漢中等地區(qū)。漢中做網(wǎng)站價格咨詢:18982081108
主要用于全國地區(qū)數(shù)據(jù)的操作,包括省,市,區(qū)三級聯(lián)動,地區(qū)數(shù)據(jù)的添加和刪除; 在操作地區(qū)數(shù)據(jù)時,以前也用過樹形的地區(qū)選擇組件,但因其在再操作大量的地區(qū)數(shù)據(jù)時,渲染緩慢,所以我們就換了另一種數(shù)據(jù)展示形式和交互形式,從而就有了這個組件。
注意:該組件是 vue.js 組件
demo
搶鮮體驗請點擊這里 demo
API
Props
參數(shù) | 類型 | 說明 |
---|---|---|
area | Array | 傳入組件的地區(qū)的數(shù)據(jù) |
Events
事件名 | 參數(shù) | 說明 |
---|---|---|
selected | area | 組件中選中的地區(qū) |
詳細說明
Props
area
area 參數(shù)是必選項,表示組件初始化時的地區(qū)數(shù)據(jù),可以為空。 area 是一個包含多個對象的數(shù)組,其中每個對象的數(shù)據(jù)結構如下:
... area: [ {Name: '北京', ID: '01'}, {Name: '南京', ID: '0401'}, {Name: '西湖區(qū)', ID: '060105'} ], ...
因為后來在實際的使用中,發(fā)現(xiàn)有時候,后臺只會返回一個地區(qū)的 ID 值,所以這里做了優(yōu)化,可以只傳入 ID 的值,比如這樣:
... area: [ {ID: '01'}, {ID: '0401'}, {ID: '060105'} ], ...
selected
selected 是由組件內部發(fā)布的一個事件,你可以在組件外面訂閱這個事件,從而得到它返回的值,這個值就是組件當前選中的所有的地區(qū),返回的這個值是由多個包含地區(qū)數(shù)據(jù)的對象組成的數(shù)組,數(shù)據(jù)結構和 area 參數(shù)一樣
簡單的例子
<div> <addressmap :area="area" @selected="selected"></addressmap> </div>
安裝和使用
npm install adc-addressmap
若作為全局組件使用
//在項目入口文件 import Vue from 'vue' import Addressmap from 'adc-addressmap' Vue.component('Addressmap', Addressmap) 若作為局部組件 //在某個組件中 import Addressmap from 'adc-addressmap' export default { ... components: { Addressmap}, ... }
總結
以上所述是小編給大家介紹的vue地區(qū)選擇組件教程詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享題目:vue地區(qū)選擇組件教程詳解
網(wǎng)頁地址:http://www.muchs.cn/article32/ihpipc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、網(wǎng)頁設計公司、網(wǎng)站內鏈、面包屑導航、ChatGPT、網(wǎng)站導航
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)