vue 基於mint-ui 三級聯動
阿新 • • 發佈:2018-12-18
一、基本配置
https://github.com/modood/Administrative-divisions-of-China
三級聯動資料地址
二、vue基本配置
1、cnpm install mint-ui --save-dev
2、引入
import MintUI from 'mint-ui' import 'mint-ui/lib/style.css'; Vue.use(MintUI); <template><div>
<mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
<p>地址3級聯動:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { Picker } from "mint-ui";
import myaddress from "../../data.json";
Vue.component(Picker.name, Picker);
export default {
data() {
return {
myAddressSlots: [
{
flex: 1,//對應 slot CSS 的 flex 值
defaultIndex: 1,//對應 slot 初始選中值,需傳入其在 values 陣列中的序號,預設為 0
values: Object.keys(myaddress), //省份陣列
className: "slot1",//對應 slot 的類名
textAlign: "center"//對應 slot 的對齊方式
},
{
divider: true,//對應 slot 是否為分隔符
content: "-",//分隔符 slot 的顯示文字
className: "slot2"
},
{
flex: 1,
values: [],
className: "slot3",
textAlign: "center"
},
{
divider: true,
content: "-",
className: "slot4"
},
{
flex: 1,
values: [],
className: "slot5",
textAlign: "center"
}
],
myAddressProvince: "省",
myAddressCity: "市",
myAddresscounty: "區/縣"
};
},
created() {},
methods: {
onMyAddressChange(picker, values) {
if (myaddress[values[0]]) {
//這個判斷類似於v-if的效果(可以不加,但是vue會報錯,很不爽)
picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()會返回一個數組,當前省的陣列
picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 區/縣資料就是一個數組
//獲取省
this.myAddressProvince = values[0];
//獲取市
this.myAddressCity = values[1];
//獲取縣
this.myAddresscounty = values[2];
/*
setSlotValues(index, values):設定給定 slot 的備選值陣列
*/
}
}
},
mounted() {
this.$nextTick(() => {
//vue裡面全部載入好了再執行的函式 (類似於setTimeout)
this.myAddressSlots[0].defaultIndex = 0;
// 這裡的值需要和 data裡面 defaultIndex 的值不一樣才能夠初始化
//因為我沒有看過原始碼(我猜測是因為資料沒有改變,不會觸發更新)
});
}
};
</script>