What are the differences between antD and antDWhen you click on the icon to open the popover, you have to click on the icon again to close the popover, which is obviously not reasonable. A more appropriate way to do this is to click on any other area, which will hide the popover. Inside the component, add a visible variable that controls whether it is displayed. Set it to false when clicking outside

data () {
    return {
      value: ' '.visible: false.iconColor: false}},methods: {
closeOver () {
          this.visible = false}},directives: {
        clickOutside: {
            bind (el, binding, vnode) {
            function clickHandler (e) {
            // If the element clicked is itself, return
                if (el.contains(e.target)) {
                    return false
                }
                // Check whether the directive is bound to a function
                if (binding.expression) {
                    // Call the function if it is bound, where binding.value is the handleClose method
                    binding.value(e)
                }
                }
                // Bind the current element to a private variable so that unbind can unlisten for events
                el.__vueClickOutside__ = clickHandler
                document.addEventListener('click', clickHandler)
            },
            update () {},
            unbind (el, binding) {
                // Disable event listening
                document.removeEventListener('click', el.__vueClickOutside__)
                delete el.__vueClickOutside__
            }
        }
    }
Copy the code

After the custom instruction is written, add it to the div outside the icon

<div slot="reference" style="margin-left:5px" @click.stop="popClick" v-click-outside="closeOver">
Copy the code

The complete component code is as follows

<template>
  <el-popover placement="bottom" width="200" trigger="manual" v-model="visible" @show="showPopover">
    <el-input
      placeholder="Please enter content"
      v-model="value"
      clearable
      @keyup.enter.native="confirm"
      ref="sInput"
    >
      <! -- <el-button slot="append" icon="el-icon-search" @click="confirm"> -->
      <! -- </el-button> -->
    </el-input>
    <el-button type="primary" size="mini" @click="confirm" style="margin-top:5px">search</el-button>
    <el-button size="mini" @click="resetData">reset</el-button>
    <div slot="reference" style="margin-left:5px" @click.stop="popClick" v-click-outside="closeOver">
      <! -- <i class="el-icon-search" :style="{'color':iconColor}" ></i> -->
      <svg
        viewBox="64, 64, 896, 896"
        data-icon="search"
        width="1em"
        height="1em"
        fill="currentColor"
        :style="{'color':iconColor? 'rgb(16, 142, 233)': '', 'margin-top': '5px'}" >
        <path d="M909.6 854.5L649.9 594.8c690.2 542.7 712 479 712 412C0-80.2-31.3-155.4-87.9-212.1-56.6-212.7-132-87.9-212.1-87.9-s-155.5 31.3-212.1 87.9c143.2 256.5 112 331.8 112 412C0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712C67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.60l43.6-43.5a8.2 8.2 0 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-158.6c211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4c296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
        </path>
      </svg>
    </div>
  </el-popover>
</template>

<script>
export default {
  inject: ['reload'],
  data () {
    return {
      value: ' '.visible: false.iconColor: false}},props: {
    tableType: {
      type: String.default: ' '
    },
    type: {
      type: String.default: ' '
    },
    defaultValue: {
      type: String.default: ' '
    },
    options: {
      type: Array.default: function () {
        return[]}},defaultProps: {
      type: Object.default: function () {
        return {
          label: 'label'.value: 'value'}}}},watch: {
    defaultValue (newVal, oldVal) {
      const self = this
      self.value = newVal
    }

  },
  methods: {
      showPopover () {
        this.$nextTick(() = > {
        this.$refs.sInput.focus()
        })
      },
      resetData () {
          console.log('reset')
          this.value = ' '
          this.visible = false
          this.iconColor = false
          const self = this
          self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
      },
      closeOver () {
          this.visible = false
      },
      popClick (e) {
          // e.stopPropagation()
          this.visible = !this.visible
      },
      confirm () {
          this.visible = false
          this.iconColor = true
          const self = this
          if (self.value) {
              self.$emit('selectChange', { type: self.type, value: self.value, tableType: self.tableType })
          }
      }
    },
    directives: {
        clickOutside: {
            bind (el, binding, vnode) {
            function clickHandler (e) {
            // If the element clicked is itself, return
                if (el.contains(e.target)) {
                    return false
                }
                // Check whether the directive is bound to a function
                if (binding.expression) {
                    // Call the function if it is bound, where binding.value is the handleClose method
                    binding.value(e)
                }
                }
                // Bind the current element to a private variable so that unbind can unlisten for events
                el.__vueClickOutside__ = clickHandler
                document.addEventListener('click', clickHandler)
            },
            update () {},
            unbind (el, binding) {
                // Disable event listening
                document.removeEventListener('click', el.__vueClickOutside__)
                delete el.__vueClickOutside__
            }
        }
    }
  }
</script>

Copy the code

Reference segmentfault.com/a/119000001… Thank you very much