html部分：
<div class="select-box" id="city" @click.stop>
<div class="box" @click="areaModelFun()">
<div class="text">地区筛选</div>
<i v-show="icon"><img src="__static__/index/src/img/home/down-arrow.svg" alt=""></i>
<i v-show="icons"><img src="__static__/index/src/img/home/up-arrow.svg" alt=""></i>
</div>
<div class="select-model" v-show="areaModel">
<div class="search-box">
<div class="ipt">
<input type="text" v-model="searchText" placeholder="城市搜索">
<div class="close" v-show="closeIcon" @click="closeFun()"><img src="__static__/index/src/img/home/close.svg" alt=""></div>
</div>
<div class="search-btn" @click="handleSearch()"><img src="__static__/index/src/img/home/ico_search.svg" alt=""></div>
</div>
<div class="all-city" v-show ="showCity">
<el-checkbox-group v-model="cityVal" size="small">
<el-checkbox :label="item.city" border v-for="(item,index) in city_list" :key="item.num" @change="cityFun(cityVal,item)"></el-checkbox>
</el-checkbox-group>
</div>
<div class="all-city" v-show ="resultCity">
<el-checkbox-group v-model="cityVal" size="small">
<el-checkbox :label="item.city" border v-for="(item,index) in searchResult" :key="item.num" @change="cityFun(cityVal,item)"></el-checkbox>
</el-checkbox-group>
</div>
<div class="btn-box">
<div class="reset" @click="resetFun()">重置</div>
<div class="ensure" @click="ensureFun()">确认</div>
</div>
</div>
</div>scss部分
.select-box{
position: relative;
width: 403px;
height: 300px;
.box{
width: 109px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: 4px;
background: #F0F4FD;
gap: 9px;
position: relative;
z-index: 99;
cursor: pointer;
border: 1px solid #F0F4FD;
&:hover{
background: #fff;
border: 1px solid #F0F4FD;
}
}
.select-model{
position: absolute;
right: 0;
top: 45px;
z-index: 9;
width: 398px;
height: 300px;
border-radius: 4px;
padding: 10px;
box-sizing: border-box;
background: #FFF;
box-shadow: 0px 0px 18px 0px rgba(142, 163, 204, 0.20);
.search-box{
display: flex;
flex-direction: row;
.ipt{
width: 322px;
height: 31px;
background: #F7F8FB;
border-radius: 2px 0px 0px 2px;
border: 1px solid #E6E9F0;
position: relative;
input{
width: 98%;
height: 95%;
border: none;
outline: none;
padding-left: 10px;
box-sizing: border-box;
background: transparent;
&::placeholder{
color: #86909C;
}
}
.close{
position: absolute;
right: 10px;
top: 3px;
cursor: pointer;
}
}
.search-btn{
cursor: pointer;
width: 56px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0px 2px 2px 0px;
background: #165DFF;
}
}
.all-city{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 6px;
max-height: 193px;
min-height: 35px;
overflow: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C0D5EB;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
background: #fff;
border-radius: 8px;
}
.city{
margin-right: 6px;
margin-top: 6px;
width: 88px;
height: 27px;
border-radius: 2px;
border: 1px solid var(--zm-23-bk-line, #F0F4FD);
background: #FBFDFE;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&:nth-child(4n){
margin-right: 0;
}
&.active{
border-color: #165DFF;
&:after{
content: url("../img/home/choise.svg");
position: absolute;
right: -1px;
bottom: -5px;
}
}
}
.el-checkbox-group{
display: flex!important;
flex-direction: row;
flex-wrap: wrap;
}
.el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered{
margin-left: 0;
&:nth-child(4n){
margin-right: 0!important;
}
margin-bottom: 6px!important;
}
.el-checkbox{
margin-right: 6px;
}
.el-checkbox.is-bordered.el-checkbox--small{
width: 85px;
position: relative;
}
.el-checkbox.is-bordered.is-checked{
border-color: #165DFF;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
color: #165DFF;
}
.el-checkbox, .el-checkbox__input{
position: absolute;
right: 0;
bottom: -2px;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
width: 15px;
height: 15px;
background: url("../img/home/choise.svg") no-repeat;
}
.el-checkbox__inner{
border: none;
}
}
.btn-box{
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
.ensure,.reset{
color: #fff;
width: 76px;
height: 29px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2px;
border: 1px solid #165DFF;
cursor: pointer;
background: var(--zm-23-vi-01, #165DFF);
&:hover{
background: #1051E4;
}
}
.reset{
border: 1px solid #D6DDED;
background: #fff;
color: #41464F;
margin-right: 5px;
&:hover{
border: 1px solid #D6DDED;
background: #F0F4FD;
color: #020814;
}
}
}
}
}vue部分：
new Vue(
{
el:"#city",
data:{
areaModel:false,
icon:true,
icons:false,
isSelect:false,
showCity:true,
resultCity:false,
closeIcon:false,
city_list:[
{city:'上海',num:'1972',num_d:'58065'},
{city:'昆明',num:'10483',num_d:'0'},
{city:'呼和浩特',num:'438',num_d:'7885'},
{city:'长春',num:'58',num_d:'22163'},
{city:'成都',num:'736',num_d:'26141'},
{city:'天津',num:'60',num_d:'42699'},
{city:'中卫',num:'80',num_d:'0'},
{city:'芜湖',num:'1756',num_d:'5293'},
{city:'青岛',num:'300',num_d:'15516'},
{city:'太原',num:'178',num_d:'11370'},
{city:'佛山',num:'716',num_d:'10870'},
{city:'广州',num:'498',num_d:'41578'},
{city:'深圳',num:'496',num_d:'33741'},
{city:'南宁',num:'94',num_d:'0'},
{city:'乌鲁木齐',num:'100',num_d:'3753'},
{city:'南京',num:'2310',num_d:'18157'},
{city:'苏州',num:'876',num_d:'23044'},
{city:'南昌',num:'300',num_d:'8419'},
{city:'石家庄',num:'300',num_d:'23596'},
{city:'安阳',num:'100',num_d:'5361'},
{city:'郑州',num:'60',num_d:'24782'},
{city:'杭州',num:'698',num_d:'13290'},
{city:'海口',num:'74',num_d:'4863'},
{city:'武汉',num:'2396',num_d:'28131'},
{city:'长沙',num:'1376',num_d:'30488'},
{city:'兰州',num:'96',num_d:'5072'},
{city:'福州',num:'896',num_d:'12766'},
{city:'拉萨',num:'250',num_d:'0'},
{city:'贵阳',num:'1390',num_d:'11595'},
{city:'铁岭',num:'160',num_d:'15577'},
{city:'重庆',num:'1274',num_d:'40973'},
{city:'西安',num:'338',num_d:'30437'},
{city:'西宁',num:'200',num_d:'2488'},
{city:'哈尔滨',num:'198',num_d:'19892'},
{city:'莆田',num:'0',num_d:'3146'},
{city:'宿迁',num:'0',num_d:'8968'},
{city:'三明',num:'0',num_d:'2596'},
{city:'盐城',num:'0',num_d:'12467'},
{city:'铜陵',num:'0',num_d:'446'},
{city:'榆林',num:'0',num_d:'4331'},
{city:'鞍山',num:'0',num_d:'5851'},
{city:'鹰潭',num:'0',num_d:'352'},
{city:'辽阳',num:'0',num_d:'4560'},
{city:'渭南',num:'0',num_d:'6515'},
{city:'泸州',num:'0',num_d:'336'},
{city:'南通',num:'0',num_d:'10841'},
{city:'湘潭',num:'0',num_d:'8439'},
{city:'荆门',num:'0',num_d:'3620'},
{city:'郴州',num:'0',num_d:'7283'},
{city:'扬州',num:'0',num_d:'5734'},
{city:'湖州',num:'0',num_d:'3251'},
{city:'抚州',num:'0',num_d:'2364'},
{city:'淮安',num:'0',num_d:'5454'},
{city:'绍兴',num:'0',num_d:'4778'},
{city:'济南',num:'0',num_d:'18351'},
{city:'抚顺',num:'0',num_d:'10488'},
{city:'延安',num:'0',num_d:'226'},
{city:'咸阳',num:'0',num_d:'5399'},
{city:'吉林',num:'0',num_d:'224'},
{city:'无锡',num:'0',num_d:'13406'},
{city:'温州',num:'0',num_d:'9068'},
{city:'大连',num:'0',num_d:'22234'},
{city:'漳州',num:'0',num_d:'10082'},
{city:'衢州',num:'0',num_d:'206'},
{city:'吉首',num:'0',num_d:'198'},
{city:'徐州',num:'0',num_d:'17480'},
{city:'六盘水',num:'0',num_d:'2702'},
{city:'合肥',num:'0',num_d:'11357'},
{city:'嘉兴',num:'0',num_d:'4631'},
{city:'营口',num:'0',num_d:'12819'},
{city:'汕头',num:'0',num_d:'21375'},
{city:'池州',num:'0',num_d:'150'},
{city:'黄山',num:'0',num_d:'146'},
{city:'安康',num:'0',num_d:'2639'},
{city:'宁德',num:'0',num_d:'2671'},
{city:'连云港',num:'0',num_d:'6389'},
{city:'盘锦',num:'0',num_d:'5785'},
{city:'台州',num:'0',num_d:'7843'},
{city:'宁波',num:'0',num_d:'8994'},
{city:'丽水',num:'0',num_d:'112'},
{city:'唐山',num:'0',num_d:'15043'},
{city:'锦州',num:'0',num_d:'14664'},
{city:'秦皇岛',num:'0',num_d:'4764'},
{city:'乐山',num:'0',num_d:'70'},
{city:'汉中',num:'0',num_d:'3048'},
{city:'厦门',num:'0',num_d:'7256'},
{city:'宜春',num:'0',num_d:'4023'},
{city:'淮北',num:'0',num_d:'2736'},
{city:'金华',num:'0',num_d:'5493'},
{city:'南平',num:'0',num_d:'58'},
{city:'遵义',num:'0',num_d:'56'},
{city:'泉州',num:'0',num_d:'14910'},
{city:'三门峡',num:'0',num_d:'2448'},
{city:'铜川',num:'0',num_d:'32'},
{city:'广元',num:'0',num_d:'30'},
{city:'衡水',num:'0',num_d:'6567'},
{city:'邵阳',num:'0',num_d:'7284'},
{city:'自贡',num:'0',num_d:'82'},
{city:'株洲',num:'0',num_d:'14968'},
{city:'绵阳',num:'0',num_d:'2953'},
{city:'许昌',num:'0',num_d:'6982'},
{city:'雅安',num:'0',num_d:'48'},
{city:'北京',num:'0',num_d:'83986'},
{city:'烟台',num:'0',num_d:'7525'},
{city:'沈阳',num:'0',num_d:'35340'},
{city:'保定',num:'0',num_d:'33706'},
{city:'岳阳',num:'0',num_d:'23963'},
{city:'益阳',num:'0',num_d:'23061'},
{city:'揭阳',num:'0',num_d:'22844'},
{city:'临沂',num:'0',num_d:'19173'},
{city:'沧州',num:'0',num_d:'18331'},
{city:'廊坊',num:'0',num_d:'17652'},
{city:'东莞',num:'0',num_d:'16755'},
{city:'邢台',num:'0',num_d:'15415'},
{city:'驻马店',num:'0',num_d:'15289'},
{city:'南阳',num:'0',num_d:'15125'},
{city:'邯郸',num:'0',num_d:'13753'},
{city:'葫芦岛',num:'0',num_d:'12804'},
{city:'惠州',num:'0',num_d:'12465'},
{city:'朝阳区',num:'0',num_d:'12440'},
{city:'周口',num:'0',num_d:'12080'},
{city:'济宁',num:'0',num_d:'11350'},
{city:'常德',num:'0',num_d:'10834'},
{city:'丹东',num:'0',num_d:'10235'},
{city:'洛阳',num:'0',num_d:'10076'},
{city:'马鞍山',num:'0',num_d:'10067'},
{city:'潍坊',num:'0',num_d:'10000'},
{city:'衡阳',num:'0',num_d:'9608'},
{city:'广西南宁',num:'0',num_d:'9606'},
{city:'信阳',num:'0',num_d:'9414'},
{city:'聊城',num:'0',num_d:'9226'},
{city:'荆州',num:'0',num_d:'8988'},
{city:'安庆',num:'0',num_d:'8859'},
{city:'德州',num:'0',num_d:'8797'},
{city:'菏泽',num:'0',num_d:'8767'},
{city:'商丘',num:'0',num_d:'8582'},
{city:'赤峰',num:'0',num_d:'8530'},
{city:'汕尾',num:'0',num_d:'8242'},
{city:'常州',num:'0',num_d:'8241'},
{city:'潮州',num:'0',num_d:'8186'},
{city:'黄冈',num:'0',num_d:'8088'},
{city:'泰州',num:'0',num_d:'8039'},
{city:'阜阳',num:'0',num_d:'7961'},
{city:'临汾',num:'0',num_d:'7954'},
{city:'娄底',num:'0',num_d:'7847'},
{city:'怀化',num:'0',num_d:'7847'},
{city:'新乡',num:'0',num_d:'7844'},
{city:'孝感',num:'0',num_d:'7777'},
{city:'宜昌',num:'0',num_d:'7684'},
{city:'大庆',num:'0',num_d:'7245'},
{city:'蚌埠',num:'0',num_d:'7162'},
{city:'齐齐哈尔',num:'0',num_d:'6819'},
{city:'阜新',num:'0',num_d:'6769'},
{city:'运城',num:'0',num_d:'6720'},
{city:'绥化',num:'0',num_d:'6658'},
{city:'中山',num:'0',num_d:'6401'},
{city:'襄阳',num:'0',num_d:'6356'},
{city:'开封',num:'0',num_d:'6274'},
{city:'广西柳州',num:'0',num_d:'6127'},
{city:'日照',num:'0',num_d:'5960'},
{city:'宿州',num:'0',num_d:'5944'},
{city:'湛江',num:'0',num_d:'5876'},
{city:'平顶山',num:'0',num_d:'5875'},
{city:'遵义',num:'0',num_d:'5857'},
{city:'上饶',num:'0',num_d:'5836'},
{city:'鸡西',num:'0',num_d:'5666'},
{city:'晋中',num:'0',num_d:'5533'},
{city:'焦作',num:'0',num_d:'5529'},
{city:'濮阳',num:'0',num_d:'5412'},
{city:'六安',num:'0',num_d:'5404'},
{city:'通辽',num:'0',num_d:'5374'},
{city:'梅州',num:'0',num_d:'5359'},
{city:'本溪',num:'0',num_d:'5266'},
{city:'镇江',num:'0',num_d:'5238'},
{city:'泰安',num:'0',num_d:'5214'},
{city:'赣州',num:'0',num_d:'5174'},
{city:'鄂尔多斯',num:'0',num_d:'5025'},
{city:'广西桂林',num:'0',num_d:'5020'},
{city:'江门',num:'0',num_d:'5002'},
{city:'枣庄',num:'0',num_d:'4989'},
{city:'张家口',num:'0',num_d:'4928'},
{city:'滁州',num:'0',num_d:'4873'},
{city:'曲靖',num:'0',num_d:'4706'},
{city:'宣城',num:'0',num_d:'4612'},
{city:'承德',num:'0',num_d:'4589'},
{city:'大同',num:'0',num_d:'4541'},
{city:'滨州',num:'0',num_d:'4535'},
{city:'长治',num:'0',num_d:'4352'},
{city:'漯河',num:'0',num_d:'4296'},
{city:'九江',num:'0',num_d:'4287'},
{city:'佳木斯',num:'0',num_d:'4177'},
{city:'贵港',num:'0',num_d:'4168'},
{city:'包头',num:'0',num_d:'4034'},
{city:'吕梁',num:'0',num_d:'4005'},
{city:'梧州',num:'0',num_d:'3940'},
{city:'四平',num:'0',num_d:'3915'},
{city:'宝鸡',num:'0',num_d:'3882'},
{city:'昭通',num:'0',num_d:'3862'},
{city:'永州',num:'0',num_d:'3847'},
{city:'茂名',num:'0',num_d:'3687'},
{city:'威海',num:'0',num_d:'3670'},
{city:'黄石',num:'0',num_d:'3628'},
{city:'淄博',num:'0',num_d:'3585'},
{city:'淮南',num:'0',num_d:'3562'},
{city:'玉林',num:'0',num_d:'3288'},
{city:'北海',num:'0',num_d:'3249'},
{city:'朝阳',num:'0',num_d:'3245'},
{city:'牡丹江',num:'0',num_d:'3202'},
{city:'通化',num:'0',num_d:'3199'},
{city:'东营',num:'0',num_d:'3128'},
{city:'韶关',num:'0',num_d:'3067'},
{city:'清远',num:'0',num_d:'3032'},
{city:'珠海',num:'0',num_d:'3025'},
{city:'德阳',num:'0',num_d:'2933'},
{city:'肇庆',num:'0',num_d:'2893'},
{city:'亳州',num:'0',num_d:'2862'},
{city:'钦州',num:'0',num_d:'2823'},
{city:'松原',num:'0',num_d:'2823'},
{city:'咸宁',num:'0',num_d:'2780'},
{city:'河源',num:'0',num_d:'2767'},
{city:'忻州',num:'0',num_d:'2701'},
{city:'随州',num:'0',num_d:'2654'},
{city:'吉安',num:'0',num_d:'2627'},
{city:'晋城',num:'0',num_d:'2601'},
{city:'龙岩',num:'0',num_d:'2554'},
{city:'南充',num:'0',num_d:'2526'},
{city:'十堰',num:'0',num_d:'2502'},
{city:'鄂州',num:'0',num_d:'2483'},
{city:'毕节',num:'0',num_d:'2464'},
{city:'萍乡',num:'0',num_d:'2234'},
{city:'玉溪',num:'0',num_d:'2174'},
{city:'安顺',num:'0',num_d:'2162'},
{city:'宜宾',num:'0',num_d:'2157'},
{city:'银川',num:'0',num_d:'2105'},
],
cityVal:['北京','上海', '深圳','杭州', '广州', '成都','武汉','南京','郑州','济南','长沙','西安','兰州','青岛'],
cityNum:['0','1972','496','698','498','736','2396','2310','60','0','1376','338','96','300'],
cityNum_d:['83986','58065','33741','13290','41578','26141','28131','18157','24782','18351','30488','30437','5072','15516'],
searchText:'',
searchResult:[],
},
watch:{
searchText(newVal, oldVal){
if(newVal){
this.closeIcon = true
}else {
this.closeIcon = false
}
}
},
created(){
},
mounted(){
setTimeout(()=>{
this.chartFun()
},1000)
document.addEventListener("click", this.bodyCloseMenus);
},
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
},
methods:{
bodyCloseMenus(e) {
let self = this;
if (self.areaModel == true){
self.areaModel = false;
this.icon = true
this.icons = false
}
},
areaModelFun(){
this.areaModel = !this.areaModel
this.cityVal = []
if(this.areaModel == true){
this.icon = false
this.icons = true
}else {
this.icon = true
this.icons = false
}
},
cityFun(cityVal,item){
const cityNum = []
const cityNum_d = []
this.cityVal = cityVal
cityVal.forEach(e=>{
this.city_list.forEach(item=>{
if(e == item.city){
cityNum.push(item.num);
cityNum_d.push(item.num_d);
}
})
})
this.cityNum = cityNum
this.cityNum_d = cityNum_d
},
ensureFun(){
if(this.cityVal.length < 3){
this.$message.error("请至少选择3个城市")
}else if(this.cityVal.length > 20){
this.$message.error("请最多选择20个城市")
}else {
this.chartFun()
this.areaModel = false
}
},
resetFun(){
this.cityVal = []
},
handleSearch() {
const arr= []
this.city_list.filter(item => {
item.city.includes(this.searchText)
if(item.city.includes(this.searchText)){
arr.push(item)
}
})
this.searchResult = arr
this.resultCity = true
this.showCity = false
},
closeFun(){
this.searchText = ''
this.handleSearch()
}
}
}
);
1091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
