在可以点击打开后 发现和antd还有什么不一样的地方
原来是在点击icon打开popover时，想关闭这个popover需要再次点击icon
这很明显不合理，更合适的方法是点击其它任何区域，都会隐藏这个popover
于是用到了自定义指令。
在组件内部，新增一个visible变量控制是否显示，在点击外部时，设置为false
data () {
return {
value: '',
visible: false,
iconColor: false
}
},
methods: {
closeOver () {
this.visible = false
},
}
directives: {
clickOutside: {
bind (el, binding, vnode) {
function clickHandler (e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e)
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = clickHandler
document.addEventListener('click', clickHandler)
},
update () {},
unbind (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
}
复制代码自定义指令写好后，在icon外部div上添加即可
<div slot="reference" style="margin-left:5px" @click.stop="popClick" v-click-outside="closeOver">
复制代码完整组件代码如下
<template>
<el-popover placement="bottom" width="200" trigger="manual" v-model="visible" @show="showPopover">
<el-input
placeholder="请输入内容"
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">搜索</el-button>
<el-button size="mini" @click="resetData">重置</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-56.7-132-87.9-212.1-87.9s-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.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.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 (el.contains(e.target)) {
return false
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e)
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = clickHandler
document.addEventListener('click', clickHandler)
},
update () {},
unbind (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
}
}
</script>
复制代码参考 segmentfault.com/a/119000001… 表示真诚的感谢
