40，自定义组件

1.自定义下拉菜单

<template>
  <div class="dropdown" @mouseleave.stop="handleMouseenLever">
    <span @mouseenter="hanldeMouseenterEnter">下拉菜单 <i v-show="isShowArrow==false" class="el-icon-arrow-up"></i> <i
        class="el-icon-arrow-down" v-show="isShowArrow==true"></i></span>
    <div class="dropdown-content" v-show="isShowContent">
      <div class="item" v-for="(item,index) in list" :key='index' @click="handleClick(item)">{{item.title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowContent: false,
      isShowArrow: false,
      list: [
        {
          title: "蛋糕",
          id: "1",
        },
        {
          title: "面包",
          id: "2",
        },
      ],
    };
  },
  methods: {
    hanldeMouseenterEnter() {
      this.isShowContent = true;
      this.isShowArrow = true;
    },
    handleMouseenLever() {
      //this.isShowContent = false;
      this.isShowArrow = false;
    },
    handleClick(item) {
      this.$emit("input", item.id);
    },
  },
};
</script>

<style lang='scss'  scoped>
.dropdown {
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 20px;
  min-width: 120px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
}
.dropdown-content {
  width: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: 33px;
  background-color: #fff;
  //  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  text-align: left;
  box-sizing: border-box;
  padding: 15px 0;
  .item {
    height: 32px;
    line-height: 32px;
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    &:hover {
      background: rgba(241, 230, 230, 0.5);
    }
  }
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>

2.父组件

 <DropDown v-model='title' @input="handleInput" />

2.自定义下拉选icon菜单

1.子组件
<template>
  <div class="iconWrap" @mouseleave="handleMouseLeave">
    <div class="dropdown" @mouseenter="handlMouseenter">
      <el-input
        type="text"
        v-model="icon"
        :prefix-icon="icon"
        class="icon"
        @focus="handleFocus"
        placeholder="请选择"
      />
      <div class="dropdown-content" v-show="isShowContent">
        <div class="item">
          <i
            v-for="(item, index) in list"
            :key="index"
            @click="handleClick(item)"
            :class="item.icon"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value:{
      type:String
    }
  },
  //接受父级传入过来的值
  mounted(){
    this.icon = this.value;
  },
  data() {
    return {
      isShowContent: false,
      icon: "",
      list: [
        {
          icon: "el-icon-edit",
          id: "1",
        },
        {
          icon: "el-icon-share",
          id: "2",
        },
        {
          icon: "el-icon-platform-eleme",
          id: "3",
        },
        {
          icon: "el-icon-eleme",
          id: "4",
        },
        {
          icon: "el-icon-delete-solid",
          id: "5",
        },
        {
          icon: "el-icon-delete",
          id: "6",
        },
        {
          icon: "el-icon-s-tools",
          id: "7",
        },
        {
          icon: "el-icon-setting",
          id: "8",
        },
        {
          icon: "el-icon-user-solid",
          id: "9",
        },
        {
          icon: "el-icon-user",
          id: "10",
        },
        {
          icon: "el-icon-phone",
          id: "11",
        },
      ],
    };
  },
  methods: {
    handleFocus() {
      this.isShowContent = true;
    },
    handleBlur() {},
    handlMouseenter() {
      this.isShowContent = true;
    },
    handleMouseLeave() {
      this.isShowContent = false;
    },
    handleClick(item) {
      console.log(item)
      // this.value = "";
      this.icon = item.icon;
      this.$emit("input", item.icon);
      this.isShowContent = false;
    },
  },
};
</script>

<style lang='less'  scoped>
.iconWrap {
  width: 200px;
  .dropdown {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 99;
    .inputClass {
      line-height: 32px;
      height: 32px;
      border-radius: 2px;
      width: 100%;
    }
    .dropdown-content {
      width: 200px;
      position: absolute;
      left: 0;
      top: 33px;
      background-color: #fff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      text-align: left;
      max-height: 200px;
      box-sizing: border-box;
      overflow-y: scroll;
      border-radius: 2px;
      .item {
        width: 100%;
        box-sizing: border-box;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px 0 10px;
        i {
          display: inline-block;
          width: 32px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          &:hover {
            background: rgba(241, 230, 230, 0.5);
            height: 32px;
            line-height: 32px;
          }
        }
      }
    }
  }
}
</style>

2.父级组件

  <SelectIcon v-model="title2" @input="handleInput2" />