vue实现省市联动,vue实现省市区三级联动
这篇文章主要为大家详细介绍了某视频剪辑软件自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义省市区三级联动的具体代码，供大家参考，具体内容如下
1.如图（省市区加上全部联动)
第一步：找到了一个普通的省市区先进行遍历更改
2.把更改后的数据文件放入某视频剪辑软件项目中引入到你想要的页面
3.剩余代码如下
模板
div class=percentloop
！-地区选择-
section class=section
标题
span class= important _ font */span
跨度地区筛选/span
/p
div class=box
div class=" area "
！-省-
李class=地区-菜单省-列表
div class= area-msg @ click。stop= show(0)
{ {区域列表[省]。provinceName}}
/div
ul v-show=showindex[0]
li v-for=(item，index) in areaList :key=index
@点击。stop= sel省名(index，item.provinceName)
{{item.provinceName}}
/李
/ul
/李
span class=" text "省/span
！-市-
李class=区域-菜单城市-列表
div class= area-msg @ click。stop= show(1)
{ {区域列表[省]。区域列表[城市索引]。cityName}}
/div
ul v-show=showindex[1]
li v-for=(item，index)在area list[省]中."区域列表":key="index "
@click.stop=selcityName(index，item.cityName)
{{item.cityName}}
/李
/ul
/李
span class=" text "市/span
！-区-
li class=area-menu region-list
div class= area-msg @ click。stop= show(2)
{ {区域列表[省]。区域列表[城市索引]。区域列表[计数索引].countyName}}
/div
ul v-show= show index[2] style= right:-40px；
li v-for=(item，index)在area list[省]中.区域列表[城市索引]。"区域列表":key="index "
@点击。stop= selcountyName(index，item.countyName)
{{item.countyName}}/li
/ul
/李
span class=" text "区/县/span
/div
/div
/部分
/div
/模板
脚本
let data={
区域列表：[],//省市区三级联动的数据
InitializeList: []，//我写得联动数据
showindex: [false，false，false]，//控制省市区弹框显示
省份：0,//默认省下标
cityIndex: 0，//默认市下标
countyIndex: 0，//默认区下标
istoubi:假的，
selectType: 0，//默认广告类型索引全部
attr1Index: -1，//默认广告位置类型索引
attr2Index: -1，//默认设备类型索引
//发送给后台的值
address_str: [全部, 全部, 全部], //地址
select_parmas: {
县： 全部，全部，全部, //省市区
selectTypeID: -1，//选择的广告类型编号
selectAttr1ID: -1，//选择的广告位置编号
selectAttr2ID: -1，//选择的设备类型编号
}
}
$(html ).点击（功能(e) {
数据。显示索引=[假，假，假]
})
导入区域自././static/json/area.json
导出默认值{
data() {
返回数据
},
已创建(){
console.log(此区域)
这个。区域列表=这个。区域[0]；
//console.log(区域)
//这个。区域列表=区域[0]；
},
方法：{
//显示下拉框
显示（索引){
让arr=[.这个。显示索引]；
//弹框显示时直接全部隐藏
if (arr[index]==true) {
arr=[假，假，假]
}否则{
arr=[假，假，假] //初始化全部隐藏
arr[index]=true
}
this.showindex=arr
},
//省的点击事件
selprovinceName(索引，值){
这个。显示索引=[假，假，假]
this .省=索引
这个。城市指数=0；//默认市下标
这个。县指数=0；//默认区下标
信件地址=[.this.address_str]
地址[0]=值；
this.address _ str=地址
},
//市的点击事件
selcityName(索引，值){
这个。显示索引=[假，假，假]
this.cityIndex=index
这个。县指数=0；//默认区下标
信件地址=[.this.address_str]
地址[1]=值；
this.address _ str=地址
},
//区的点击事件
selcountyName(索引，值){
这个。显示索引=[假，假，假]
this.countyIndex=index
信件地址=[.this.address_str]
地址[2]=值；
this.address _ str=地址
},
},
}
/脚本
样式范围的语言=scss
@导入./common/common ；部分{
框大小：边框-框；
边距-底部：0.38雷姆；标题{
边距-底部：0.2 RM
}。方框{。labelspan {
右边距：0.18雷姆；
边距-底部：0.19雷姆；
框大小：边框-框；
}
//视频时长。长值{
显示器：flex
柔性包装：nowrap
对齐-项目：居中；
边距-底部：0.1毫米；时间盒{
宽度：1.6雷姆；
身高：0.56雷姆；
行高：0.56雷姆；
边框：1px实心rgba(230，230，230，1)；
边框半径：0.1毫米；
左填充：0.38雷姆；
保证金：0 0.17雷姆；
}
}
//选择投放时间。选择{
宽度：100%;
行高：0.56雷姆；
边框：1px实心rgba(230，230，230，1)；
边框半径：0.1毫米；
左填充：0.2红色；
颜色：# 4984EB
}
//选择时间段。选择时间{
显示器：flex
柔性包装：nowrap
对齐-项目：居中；中间{
保证金：0 0.24人民币；
行高：0.56雷姆；
}。时间盒{
宽度：1.6雷姆；
身高：0.56雷姆；
行高：0.56雷姆；
边框：1px实心rgba(230，230，230，1)；
边框半径：0.1毫米；
左填充：0.38雷姆；
}
}
}。提示{
//页边距-顶部：
}
}。区域{
显示器：flex
柔性包装：nowrap
对齐-项目：居中；文本{
保证金：0 0.15雷姆；
}。区域菜单{
位置：相对；
显示：内嵌-块；区域消息{
宽度：1.5雷姆；
身高：0.56雷姆；
行高：0.56雷姆；
背景色：# fff
边框：1px固体# dcdcdc
边框半径：0.1毫米；
文本对齐：居中；
溢出：隐藏；
}
ul {
位置：绝对；
顶部：0.57雷姆；
宽度：160像素
高度：自动；
max-height:180 px；
字体大小：14px
溢出-y:滚动；
背景色：# fff
边框：1px固体# ddd
边框-半径：4px
李{
文本对齐：居中；
高度：30px
行高：30px
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。