vue篇1-2：城市选择弹框，并带有模糊搜索功能

实现需求：


直接上代码↓↓↓（如下只是一个tab选项卡点击‘地区’显示选择城市弹框（可搜索）组件的dome，header部分轮播和页面数据的上拉分页代码就没有写上啦。如需参考留言评论）

<template>
  <div class="Policy_information">
      <!-- 栏目选项卡 -->
      <div class="policyType">
        <div :class="status==0? 'active' :'navtype' " @click="policyType(0)">
          <div class="type_text">国家</div>
          <div class="bottom_wite"></div>
        </div>
        <div :class="status==1? 'active' :'navtype' " @click="policyType(1)" class="cityAddress">
          <div class="type_text">
            地区
            <span v-if="selCity!=''" class="wites">-</span>
            {{selCity}}
            <img src="../assets/images/xiangxia.svg" class="cityImg">
          </div>
          <div class="bottom_wite"></div>
        </div>
      </div>
    <city-choose @tipBtnClick="hidebox()" @topBtnClick="option()" v-if="cityBox"></city-choose> 
    <!-- 弹框组件-->
  </div>
</template>
<script>
import cityChoose from "../components/cityChoose";
export default {
  data() {
    return {
      selCity: "", //地区
      cityBox: false,
      policylist: [], //页面列表
      news_id: ""
    };
  },
  methods: {
    policyType(t) {
      this.status = t;
      console.log(t);
      if (t == 0) {
        this.selCity = "";
      } 
      console.log(this.selCity);
      if (t == 1) {
        this.cityBox = true;
      }
    },
    // 获取选择的城市value
    option() {
      var obj = document.getElementsByName("choose");
      var flags = false;
      for (var i = 0; i < obj.length; i++) {
        // var msg = obj[i].dataset.message;
        if (obj[i].checked == true) {
          flags = true;
          this.cityBox = false;
          this.selCity = obj[i].value;
          console.log(this.selCity);
          // console.log(typeof obj[i].value)
          console.log(obj[i].value);
        }
      }
      if (flags == false) {
      }
    },
    // 弹框隐藏
    hidebox() {
      this.cityBox = false;
    }
  },
  components: {
    cityChoose
  }
};
</script>
<style scoped>
.Policy_information {
  background: #fff;
}
.policyType {
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  line-height: 40px;
  border-bottom: 1px solid #f2f2f2;
}
.cityImg {
  width: 25px;
  height: 25px;
}
.cityImg img {
  width: 100%;
  height: 100%;
}
.active .type_text {
  color: #55b837;
  font-size: 16px;
}

.active .bottom_wite {
  width: 15px;
  background: #55b837;
  height: 2px;
  margin: auto;
}
.navtype .type_text {
  color: #000;
  font-size: 16px;
  /* display: flex;
  flex-direction: row;
  align-items: center; */
}
.cityAddress {
  margin-left: 20px;
}
</style> 

城市选择弹框组件带模糊搜索：（注意！上面有引入组件名为cityChoose.vue）

<template>
  <div class="mask">
    <div class="safetyInfo">
      <div class="cancel" v-on:click="cancel()">
        <img src="../assets/images/x.png">
      </div>
      <div class="search_input">
        <img src="../assets/images/sousuo.png" class="ss_img">
        <input type="text" id placeholder="搜索" v-model="search">
      </div>
      <div v-for="list in list" :key="list.id" class="radio_city">
        <input
          type="radio"
          :id="list.name+'_'+list.id"
          :value="list.name"
          name="choose"
          @click="option"
        >
        <label :for="list.name+'_'+list.id">{{list.name}}</label>
      </div>
    </div>
  </div>
</template>

<script>
// 节流函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
export default {
  data() {
    return {
      search: "",
      searchData: "",
      //这边我是写的静态数据，省级城市
      products: [
        {
          id: 2,
          spell: "beijing",
          name: "北京"
        },
        {
          id: 3,
          spell: "tianjing",
          name: "天津"
        },
        {
          id: 4,
          spell: "hebei",
          name: "河北"
        },
        {
          id: 5,
          spell: "shanxi",
          name: "山西"
        },
        {
          id: 6,
          spell: "neimenggu",
          name: "内蒙古"
        },
        {
          id: 7,
          spell: "liaoning",
          name: "辽宁"
        },
        {
          id: 8,
          spell: "jilin",
          name: "吉林"
        },
        {
          id: 9,
          spell: "heilongjiang",
          name: "黑龙江"
        },
        {
          id: 10,
          spell: "anhui",
          name: "安徽"
        },
        {
          id: 11,
          spell: "fujian",
          name: "福建"
        },
        {
          id: 12,
          spell: "jiangxi",
          name: "江西"
        },
        {
          id: 13,
          spell: "shandong",
          name: "山东"
        },
        {
          id: 14,
          spell: "henan",
          name: "河南"
        },
        {
          id: 15,
          spell: "hubei",
          name: "湖北"
        },
        {
          id: 16,
          spell: "hunan",
          name: "湖南"
        },
        {
          id: 17,
          spell: "guangdong",
          name: "广东"
        },
        {
          id: 18,
          spell: "guangxi",
          name: "广西"
        },
        {
          id: 19,
          spell: "hainan",
          name: "海南"
        },
        {
          id: 20,
          spell: "chongqing",
          name: "重庆"
        },
        {
          id: 21,
          spell: "sichuan",
          name: "四川"
        },
        {
          id: 22,
          spell: "guizhou",
          name: "贵州"
        },
        {
          id: 23,
          spell: "yunnan",
          name: "云南"
        },
        {
          id: 24,
          spell: "xizang",
          name: "西藏"
        },
        {
          id: 25,
          spell: "shanxi",
          name: "陕西"
        },
        {
          id: 26,
          spell: "gansu",
          name: "甘肃"
        },
        {
          id: 27,
          spell: "qinghai",
          name: "青海"
        },
        {
          id: 28,
          spell: "ningxia",
          name: "宁夏"
        },
        {
          id: 29,
          spell: "xinjiang",
          name: "新疆"
        },
        {
          id: 30,
          spell: "taiwan",
          name: "台湾"
        },
        {
          id: 31,
          spell: "xianggang",
          name: "香港"
        },
        {
          id: 32,
          spell: "aomen",
          name: "澳门"
        },
        {
          id: 33,
          spell: "jiangsu",
          name: "江苏"
        },
        {
          id: 34,
          spell: "shanghai",
          name: "上海"
        },
        {
          id: 35,
          spell: "zhejiang",
          name: "浙江"
        }
      ],
      list: []
    };
  },
  created() {
    this.list = this.products;
  },
  watch: {
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    search() {
      var search = this.search;
      if (search != "") {
        delay(() => {
          this.fetchData();
        }, 300);
      } else {
        this.list = this.products;
      }
    }
  },
  methods: {
    cancel() {
      //隐藏弹框
      this.$emit("tipBtnClick");
    },
    option() {
      this.$emit("topBtnClick");
    },
    fetchData() {
      var search = this.search;
      if (search) {
        this.searchData = this.products.filter(function(product) {
          console.log(product);
          return Object.keys(product).some(function(key) {
            console.log(key);
            return (
              String(product[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
        this.list = this.searchData;
      }
    }
  }
};
</script>

<style>
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}
.safetyInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -135px;
  margin-top: -240px;
  width: 270px;
  height: 390px;
  overflow: auto;
  background: #fff;
  color: #333;
  border-radius: 4px;
  z-index: 10;
}
.cancel {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: flex-start; */
}
.cancel img {
  width: 30px;
  height: 100%;
}
.search_input {
  width: 90%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  background: #f2f2f2;
  border-radius: 4px;
}
.ss_img {
  width: 25px;
  height: 25px;
}
.search_input input {
  width: 100%;
  line-height: 35px;
  border-radius: 4px;
  border: none;
  outline: none; /* 去除选中状态边框 */
  color: #cccccc;
  background: #f2f2f2;
}

.radio_city {
  width: 90%;
  margin: 10px auto;
}
</style>