自定义下拉选择组件

<!-- 选择 -->
<template>
  <div class="market-container">
    <div class="main-area " @click="overlayShow = true">
      <div class="name">
        {{ market.name || '暂无市场信息' }}
      </div>
      <van-icon style="margin-left: 10px;" name="arrow-down" />

    </div>
    <van-action-sheet v-model="overlayShow" class="wjw-sheet" :get-container="getContainer">
      <div class="wjw-wrapper">
        <div class="top">
          <van-image width="18" height="18" fit="contain" :src="closeUrl" @click="overlayShow = false" />
        </div>
        <div class="bottom">
          <div class="button">
            <div class="title">选择市</div>
          </div>
          <div class="content">
            <span v-if="marketOptions && marketOptions.length > 0">
              <div
                v-for="(item, index) in marketOptions"
                :key="index"
                class="item flex-row-align"
                :class="{ 'van-hairline--bottom': index !== marketOptions.length - 1, 'active': market.id === item.id }"
                @click="chooseItem(item)"
              >
                <span class="left-name">{{ item.name }}</span>
                <van-icon v-if="market.id === item.id" size="18px" color="#3E6FFA" name="success" />
              </div>
            </span>
            <van-empty v-else description="暂无市" :image="noPicUrl" />
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getAllMarket } from '@/api/user'
import { findByCityName } from 'api/giftCard'
import { getUserInfo, setUserInfo } from '@/utils/auth'

export default {
  name: 'StoreSelect',
  // import引入的组件需要注入到对象中才能使用
  components: { },
  data() {
    // 这里存放数据
    return {
      market: {},
      marketOptions: [],
      cityName: '',
      overlayShow: false,
      closeUrl: require('@/assets/images/sheet-closed.png'),
      noPicUrl: require('@/assets/images/no-pic.png')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getAllMarket()
    console.log(this.getUserInfo())
  },
  // 方法集合
  methods: {
    getUserInfo,
    setUserInfo,
    // 获取经纬度
    currentPoint(ev) {
      // debugger
      console.log(ev)
      if (ev) {
        this.cityName = ev.address.city
      }
    },

    getContainer() {
      return document.querySelector('.app-container')
    },
    getAllMarket() { // 获取
      // debugger
      // console.log(currentLongitudeAndLatitude)
      getAllMarket({}).then(res => {
        this.$set(this, 'marketOptions', res.data)
        // debugger
        console.log(this.marketOptions)
        let currentLongitudeAndLatitude = JSON.parse(sessionStorage.getItem('currentLongitudeAndLatitude'))
        let paeams = currentLongitudeAndLatitude.address.city
        this.findByCityName(paeams).then(res => {
          // debugger
          // let object = res.data

          let sessionmarket = JSON.parse(sessionStorage.getItem('markt'))
          if (sessionmarket) {
            this.market = sessionmarket
            // debugger
            let infomation = this.getUserInfo()
            infomation.marketId = sessionmarket.id
            this.setUserInfo(infomation)
            this.$emit('marketSelect', sessionmarket)
            // console.log(infomation)
          } else {
            this.market = res.data
            this.$emit('marketSelect', this.market)
          }
        }).catch(err => {
          console.log(err)
          this.market = this.marketOptions.find(item => item.id === 1)
          this.market = sessionStorage.getItem('markt') ? JSON.parse(sessionStorage.getItem('markt')) : this.market
        })
        // console.log(this.market)
        // debugger
      }).catch(err => {
        console.log(err)
      })
    },

    findByCityName(cityName) {
      // debugger
      // this.currentPoint()
      return new Promise((resolve, reject) => {
        findByCityName({ cityName: cityName }).then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },

    chooseItem(item) {
      // debugger
      this.market = item
      this.overlayShow = false
      // sessionStorage.setItem('markt', JSON.stringify(item))
      // let infomation = this.getUserInfo()
      // infomation.marketId = item.id
      // infomation.sysCityId = item.sysCityId
      // this.setUserInfo(infomation)
      this.$emit('marketSelect', this.market)
    }
  }
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.market-container {
  width: 100%;
  background-color: $bottom-bg-color;

  .main-area {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    color: #6D6D6D;
    background-color: #F6F6F6;
    // justify-content: space-between;
    .name{

      display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-clamp: 1;
          -webkit-line-clamp: 1; //显示几行

    }
  }
}

.wjw-sheet {
  .content {
    .item {
      min-height: 24px;
      line-height: 18px;
      padding-left: 7px;
      padding-top: 12px;
      padding-bottom: 4px;
      font-size: 13px;
      color: #5a5a5a;
      justify-content: space-between;

      &.active {
        color: #3E6FFA;
      }

      .left-name {
        width: calc(100% - 24px);
      }
    }
  }
}
</style>

应用

     

      <MarketSelect @marketSelect="marketSelect" />