iview 气泡提示怎么传html

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

关于表单单行的编辑 *** 作iview文档中已经提供有范例，以下是复杂点支持多行编辑的用法。

先看效果：

HTML部分：

这里 # 是v-slot的缩写，#age="{row,index}"相当于v-slot:age="{row,index}"。

关于v-slot的相关知识点，请参考官方文档： 作用域插槽

这里有个重点，rule验证规则比需要写在FormItem标签中，写在Form标签中是无效的！

VUE部分：

上面范例中我没有写验证结果的处理部分，处理效验结果跟普通form的用法一样：

只要将上面这一部分在类似‘on-change’ ‘on-blur’的触发事件中进行效验处理即可

CSS部分(覆盖iview源码中form表单样式)：

热门文章

标签简介

【react如何在render中调用函数】内容共 100 条

vue如何在render函数中循环（3）

朦胧淡月

100 天前

h函数的三个参数第一个参数是必须的。类型:{String | Object | Function} 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。是要渲染的html标签。第一个参数div 是表示创建一个div的元素第二个参数是可选的。类型:{Object} 主要是当前html中的各种属性。如attrs，class，style等在开发时。建议传，实在没有传的时候，传入 null

原创72 阅读点赞评论

【vue】render 函数如何在iview的表格中循环渲染

代码搬运媛

551 天前

ivue组件Table不能在标签上用v-for，以下是通过百度之后自己实现的方法：...// 省略不重要的代码render: (h, params) =>{ let arr = params.row.groupColorreturn h( "div", { style: { display: "flex", alignItems: "center", just

原创1189 阅读点赞评论

vue如何在render函数中使用判断（2）

朦胧淡月

100 天前

h函数的

原创65 阅读点赞评论

React中render Props模式

朦胧淡月

100 天前

React组件复用 React组件复用的方式有两种： 1.render Props模式 2.高阶组件HOC

原创41 阅读点赞评论

react Render

我不是药神

48 天前

---