Question

iview 气泡提示怎么传html

如图，iview的Poptip没有解析html

Answer 1

: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>