vue自定义select组件

vue 自定义select组件

用于应对一些比较特殊的需求，比如select挂载位置，通常来说vant等一系列ui框架的popup都是从顶部、底部、左边或者右边出现，要想再特定的标签下出现（比如在搜索框下出现，而不是在顶部出现）vant官方文档有说明但在实际应用时出错，这简直是个坑，我找了好久都没找到，网上的清一色都是同一个回答，我索性自己写了一个= =，用于应对需求,各位有需要也可以自取。

本组件可以自定义popup出现的位置。

组件代码：

```html
<template>
  <div>
    <div class="popup" id="myPopup">
      <div :class="[item.value?'selected':'']" style="font-size: 14px; padding: 0 15px;height:43px;line-height:43px;border-bottom: solid lightgray 1px;"
        v-for="(item,index) in options" :key="index" @click="chooseItem(index)">
        {{item.label}}
        <img class="checkFlag" :src="checkImagePath" v-show="item.value" />
      </div>
    </div>
    <div class="zhezhao" id="zhezhao" @click="recover()"></div>
  </div>
</template>

<script>
  export default {
    name: 'Popup',
    data() {
      return {
        selectedIndex: '', //被选中的item
        checkImagePath: require('./PopupImage/check.png'),//被选中item右侧的勾（此处为橙色的√），可自定义
      }
    },
    props: {
      options: Array,
      popupTop: Number, //弹出位置距离顶部的距离
      popupHeight: Number, //弹出框的高度
      zhezhaoTop: Number, //遮罩距离顶部的距离     与zhezhaoHeight相加==100% 百分比表示
      zhezhaoHeight: Number, //遮罩的高度         与zhezhaoTop相加==100%  百分比表示
    },
    mounted() {
      document.getElementById("myPopup").style.top = (this.popupTop + '%').toString();
      document.getElementById("zhezhao").style.top = (this.zhezhaoTop + '%').toString();
      document.getElementById("zhezhao").style.height = (this.zhezhaoHeight + '%').toString();
    },
    methods: {
      chooseItem(index) {//选择item
        for (var i = 0; i < this.options.length; i++) {
          this.options[i].value = false;
        }
        this.options[index].value = true;
        let data = {
          label: this.options[index].label,
        }
        this.$emit('chooseItem', data);
        this.recover();
      },
      popup() {//弹出
        this.mbShow = true;
        this.jtImg = require("./PopupImage/selTwo.png");
        document.getElementById("myPopup").style.height = (this.popupHeight + 'px').toString();
        document.getElementById("myPopup").style.zIndex = 1500;
        document.getElementById("zhezhao").style.opacity = 0.5;
        document.getElementById("zhezhao").style.zIndex = 1000;
      },
      recover() {//恢复
        this.mbShow = false;
        this.jtImg = require("./PopupImage/sel.png");
        document.getElementById("myPopup").style.height = "0";
        document.getElementById("myPopup").style.zIndex = 0;
        document.getElementById("zhezhao").style.opacity = 0;
        document.getElementById("zhezhao").style.zIndex = null;
      },
    }
  }
</script>

<style scoped>
  .selected {
    color: #ff6900;
  }

  .popup {
    height: 0;
    width: 100%;
    background: white;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
    position: absolute;
    top: 14.1%;
    overflow: hidden;
  }

  .zhezhao {
    position: absolute;
    top: 15%;
    width: 100%;
    height: 85%;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: 0;
    z-index: -1;
    background: black;
  }

  .checkFlag {
    float: right;
    width: 15px;
    margin-top: 18px
  }
</style>

使用：
<template>
	<div>
		<popup ref="myPopup" @chooseItem="getSelectedItem" :options="popupList" :popupTop="15" :popupHeight="220" :zhezhaoTop="15" :zhezhaoHeight="85"></popup>
		<button @click="showPopup()">弹出popup</button>
		<input type="text" placeholder="popup组件传回来的值" :value="selectedItem">
 	</div>
</template>
<script>
	import Popup from '@/components/封装的组件/Popup.vue'
	data() {
      return {
        selectedItem: '', //pop组件传回的值
        popupList: [ //pop组件测试数据
          {
            label: '1',
            value: false
          },
          {
            label: '2',
            value: false
          },
          {
            label: '3',
            value: false
          },
          {
            label: '4',
            value: false
          },
          {
            label: '5',
            value: false
          },
        ]
      }
    },
    components: {
      Popup,
    },
    methods:{
    	getSelectedItem(data) { //获取从popup组件传来的值
        	this.selectedItem = data.label;
      	},
      	showPopup() { //弹出popup
        	this.$refs.myPopup.popup();
      	},
    }
</script>