记一次样式 flexgrow

<template>

  <div>

    <div class="searchTop">

      <div class="text" @click="showArea">{{province}}</div>

      <div class="disflex">

        <div>

          <img src="../../assets/images/black.png" alt class="black" />

        </div>

        <div class="vansearch">

          <van-search

            v-model="value"

            shape="round"

            placeholder="搜索医院、城市"

            @input="valueChange"

            @clear="valueClear"

          />

        </div>

      </div>

    </div>

    <div class="tag"></div>

    <div v-for="(item,index) in getlist" :key="index" class="nameBox">

      <div class="name">{{item}}</div>

    </div>

    <addresspopup

      :title="'地区'"

      @confirmAddr="confirmAddr"

      @cancleAddr="cancleAddr"

      :showPopup="showPopup"

    ></addresspopup>

  </div>

</template>

<script>

import addresspopup from "../../components/address-popup.vue";

import hospitalLsit from "@/mixins/hospital-dfpz";

export default {

  name: "areaSearch",

  components: { addresspopup },

  data() {

    return {

      hospitalLsit: [],

      value: "",

      areaList: {},

      showPopup: false, // 地区选择显示

      getlist: [],

      province: ""

    };

  },

  created() {

    this.hospitalLsit = hospitalLsit.hospital;

  },

  mounted() {

    this.getBeijing();

  },

  methods: {

    getBeijing() {

      this.province = "北京市";

      let valParams = {

        province: "北京市",

        city: "北京市"

      };

      for (let i in this.hospitalLsit) {

        if (

          valParams.province == this.hospitalLsit[i].province &&

          valParams.city == this.hospitalLsit[i].city

        ) {

          //   console.log(this.hospitalLsit[i].hospital);

          this.getlist.push(this.hospitalLsit[i].hospital);

        }

      }

    },

    showArea() {

      this.showPopup = true;

    },

    cancleAddr(val) {

      this.showPopup = false;

    },

    confirmAddr(val) {

      this.getlist = [];

      this.showPopup = false;

      let valParams = {

        province: val[0].name,

        city: val[1].name

      };

      this.province = val[1].name;

      for (let i in this.hospitalLsit) {

        if (

          valParams.province == this.hospitalLsit[i].province &&

          valParams.city == this.hospitalLsit[i].city

        ) {

          //   console.log(this.hospitalLsit[i].hospital);

          this.getlist.push(this.hospitalLsit[i].hospital);

        }

      }

    },

    valueChange() {

      this.getlist = [];

      var list = this.hospitalLsit;

      for (var i = 0; i < list.length; i++) {

        if (list[i].hospital.indexOf(this.value) >= 0) {

          this.getlist.push(list[i].hospital);

        }

      }

      if (this.value == "") {

        this.getlist = [];

        this.getBeijing();

      }

    },

    valueClear() {

      this.getlist = [];

      this.getBeijing();

    }

  }

};

</script>

<style lang="less" scoped>

.searchTop {

  height: 52px;

  background: #ffffff;

  display: flex;

  flex-direction: row;

  align-items: center;

  margin-left: 15px;

  .text {

    font-size: 14px;

    font-family: PingFangSC, PingFangSC-Regular;

    font-weight: 400;

    color: #666666;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

}

.black {

  width: 6.5px;

  height: 4.5px;

  vertical-align: middle;

  margin-left: 4px;

}

.tag {

  width: 100vw;

  height: 8px;

  background: #f8f8f7;

}

.nameBox {

  margin-left: 12px;

  border-bottom: 1px solid #f0f0f0;

}

.name {

  margin-top: 16px;

  margin-bottom: 16px;

}

.disflex {

  display: flex;

  flex-direction: row;

  align-items: center;

  flex-grow: 1;

}

.vansearch {

  flex-grow: 1;

}

</style>