=======================================
补充:举个例子:你可以先设置一个div将其display设为none,这样它就不会显示出来了,然后当鼠标移至上面时,你可以先用document.GetElementByID获取这个div,然后将其的display设置成block就能够将其显示出来了.当然这个div的内容你可以随便设置的.
:class="[prefixCls + '-rel']"v-el:reference
@click="handleClick"
-@mousedown="handleFocus"
-@mouseup="handleBlur">
+@mousedown="handleFocus(false)"
+@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@@ -91,7 +91,8 @@
data () {
return {
prefixCls: prefixCls,
-showTitle: true
+showTitle: true,
+isInput: false
}
},
computed: {
@@ -133,14 +134,14 @@
}
this.visible = false
},
-handleFocus () {
-if (this.trigger !== 'focus' || this.confirm) {
+handleFocus (fromInput = true) {
+if (this.trigger !== 'focus' || this.confirm || (this.isInput &&!fromInput)) {
return false
}
this.visible = true
},
-handleBlur () {
-if (this.trigger !== 'focus' || this.confirm) {
+handleBlur (fromInput = true) {
+if (this.trigger !== 'focus' || this.confirm || (this.isInput &&!fromInput)) {
return false
}
this.visible = false
@@ -164,12 +165,41 @@
ok () {
this.visible = false
this.$emit('on-ok')
+},
+getInputChildren () {
+const $input = this.$els.reference.querySelectorAll('input')
+const $textarea = this.$els.reference.querySelectorAll('textarea')
+let $children = null
+
+if ($input.length) {
+$children = $input[0]
+} else if ($textarea.length) {
+$children = $textarea[0]
+}
+
+return $children
}
},
-ready () {
+compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`
}
+// if trigger and children is input or textarea,listen focus &blur event
+if (this.trigger === 'focus') {
+const $children = this.getInputChildren()
+if ($children) {
+$children.addEventListener('focus', this.handleFocus, false)
+$children.addEventListener('blur', this.handleBlur, false)
+this.isInput = true
+}
+}
+},
+beforeDestroy () {
+const $children = this.getInputChildren()
+if ($children) {
+$children.removeEventListener('focus', this.handleFocus, false)
+$children.removeEventListener('blur', this.handleBlur, false)
+}
}
}
</script>
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
当用户因为某种原因(比如:打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时,alt属性提供了替代信息。
扩展资料
img标签中alt和title属性的正确使用:
在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的。正确的使用这两个属性除了可以提高图片的搜索能力外,在用户体验上也是很有帮助。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)