createElement 参数使用说明
- createElement 接受的参数
createElement(
'div',
{
},
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
- 深入数据对象
{
'class': {
foo: true,
bar: false
},
style: {
color: 'red',
fontSize: '14px'
},
attrs: {
id: 'foo'
},
props: {
myProp: 'bar'
},
domProps: {
innerHTML: 'baz'
},
on: {
click: this.clickHandler
},
nativeOn: {
click: this.nativeClickHandler
},
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
scopedSlots: {
default: props => createElement('span', props.text)
},
slot: 'name-of-slot',
key: 'myKey',
ref: 'myRef',
refInFor: true
}
业务中使用
- 功能说明:
在message的基础上加入二级信息提示,通过右侧按钮控制信息的显示隐藏。 - 代码实现:
import Vue from "vue"
import {Message} from 'element-ui'
const defDuration = 2000;
export function errorMsgDetail(data, duration) {
const vm = new Vue()
const h = vm.$createElement;
return Message({
type: 'status-error',
duration: duration || defDuration,
message: h('div', {
style: {
display: "block",
width: "100%"
}
}, [
h('button', {
attrs: {
id: "status-error-icon"
},
style: {
position: "absolute",
right: "10px",
top: "8px",
color: "#f56c6c"
},
on: {
click: () => {
clickHandler(data.detail)
}
}
}, '详细信息'),
h('i', {
style: {
color: "#f56c6c",
marginRight: "6px"
},
attrs: {
class: "el-icon-error"
}
}, ''),
h('span', {style: 'color: #f56c6c'}, data.msg),
h('div', {
style: {display: "none"},
attrs: {
id: 'status-error-content'
},
}, [
h('textarea', {
attrs: {
readonly: true,
id: 'status-error-detail'
},
style: {
margin: "10px 0",
padding: '8px 10px',
fontSize: '15px',
height: "100px",
overflowY: "auto",
width: "100%",
resize: "none",
backgroundColor: "white"
}
}, ""),
h('button', {
style: {
float: "right",
padding: "0 2px"
},
on: {
click: () => {
copyDocument()
}
}
}, "复制")
])
])
});
}
function clickHandler(msg) {
if (document.getElementById('status-error-content').style.display === 'block') {
document.getElementById('status-error-content').style.display = 'none';
} else {
document.getElementById('status-error-content').style.display = 'block';
}
document.getElementById('status-error-detail').innerHTML = msg
}
function copyDocument() {
var Url2 = document.getElementById("status-error-detail");
Url2.select();
document.execCommand("Copy");
}
附:Vue.js中的虚拟 DOM说明