网站商城建设视频教程,百度商桥怎么和网站,无锡市太湖新城建设网站,建筑设计公司是干什么的文章目录1. 下载areaList.js2. 组件注册3. 封装组件4. 使用组件5. 效果图6. 项目源码1. 下载areaList.js
见文章末尾
2. 组件注册
main.js引入并注册(一般与Popup一起使用)
全局注册
//全局导入所有组件
import Vant from vant;
import vant/lib/index.css;Vue.use(Vant)局…
文章目录1. 下载areaList.js2. 组件注册3. 封装组件4. 使用组件5. 效果图6. 项目源码1. 下载areaList.js
见文章末尾
2. 组件注册
main.js引入并注册(一般与Popup一起使用)
全局注册
//全局导入所有组件
import Vant from vant;
import vant/lib/index.css;Vue.use(Vant)局部注册
import { Area, Popup } from vue-router
Vue.use(Area)
Vue.use(Popup)3. 封装组件
在src/components新建CascadeChoice.vue组件
templatedivdiv classflex-inputdiv classtx-lable{{ itemName }}/divdiv classtx-input clickareaChooseinputtypetext:placeholderphdTextv-modelchooseValuereadonly/img classmy-img src/assets/images/icon_arrow_right.png//div/divvan-popup v-modelshowAddrPopup positionbottomvan-arearefmyAreatitle选择地区:area-listareaListconfirmconfAreachangeonChangecancelonCancel//van-popup/div
/template
script
import AreaList from /assets/js/area.js;export default {props: {itemName: {type: String, //按钮名称default: 地区},phdText: {type: String, //按钮名称default: 请选择地区},showUnderline: {type: Boolean,default: true}},components: {},data() {return {//省市区列表areaList: {},//弹出层展示showAddrPopup: false,//数据滚动选择临时数据chooseTempValue: ,//页面选择后的数据 和v-model一致chooseValue: };},//在实例被创建之后被调用初始化省区县数据created() {this.initParams();},methods: {/*** 初始地区化数据*/initParams() {this.areaList AreaList;},/*** 数据滚动选择监听数据变化* param picker* param index* param value* value0改变省1改变市2改变区*/onChange(picker, index, value) {let val picker.getValues();console.log(val)//查看打印let areaName for (var i 0; i val.length; i) {areaName areaName (i 0 ? : /) val[i].name}//保存滚动选择的值this.chooseTempValue areaNameconsole.log(chooseTempValue, this.chooseTempValue)},//点击imput触发弹框事件areaChoose() {this.showAddrPopup true;},//点击取消后的事件onCancel() {this.showAddrPopup false//关闭弹框//由于对滚动的数据保存到临时的变量chooseTempValue中与选择后现实的数据做了解耦合因此这里不炫耀重置城市列表// this.$refs.myArea.reset()// 重置城市列表},//当提交表单数据时需要将地区数据提交到后端因此当选择完成后//确定选择后保存事件confArea(data) {this.chooseValue this.chooseTempValueconsole.log(data[0].name , data[1].name)this.showAddrPopup false//关闭弹框// 将子组件的值回传给父组件this.$emit(callBackParent, this.chooseValue)}}
};
/script
style langless scoped.flex-input {display: flex;justify-content: space-between;background-color: #ffffff;height: 56px;padding: 0 25px;div {font-size: 16px;color: #2e042c;letter-spacing: 0;.my-img {height: 17px;margin-top: 2%;}}
}.tx-lable {margin: 16px 0;height: 24px;line-height: 24px;
}.tx-input {display: flex;justify-content: flex-end;margin: 16px 0;line-height: 24px;input {border: none;margin-right: 5px;text-align: right;}input::-moz-placeholder {color: #f6e9f7;}img {margin: 7px 5px;height: 12px;width: 12px;}
}
/style4. 使用组件
templatedivcascade-choice:item-name地区:phd-text请选择地区callBackParentcallBackParent//div
/template
script
import CascadeChoice from ../../components/CascadeChoice;export default {name: Home,data() {return {// 定义城市变量值cityValue: }},components: {CascadeChoice},methods: {//父组件接收子组件回传的参数值callBackParent(obj) {console.log(obj, obj)this.cityValue obj}}
}
/script5. 效果图 6. 项目源码
https://gitee.com/gblfy/vue2-vant-h5
