【ElementUI】使用VNode调整Message消息提示

createElement 参数使用说明

1. createElement 接受的参数

// @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象，或者 // resolve 了上述任何一种的一个 async 函数。必填项。 'div', // {Object} // 一个与模板中属性对应的数据对象。可选。 { 
    // (详情见下一节) }, // {String | Array} // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成， // 也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h1', '一则头条'), createElement(MyComponent, { 
    props: { 
    someProp: 'foobar' } }) ] ) 

2. 深入数据对象

{ 
    // 与 `v-bind:class` 的 API 相同， // 接受一个字符串、对象或字符串和对象组成的数组 'class': { 
    foo: true, bar: false }, // 与 `v-bind:style` 的 API 相同， // 接受一个字符串、对象，或对象组成的数组 style: { 
    color: 'red', fontSize: '14px' }, // 普通的 HTML attribute attrs: { 
    id: 'foo' }, // 组件 prop props: { 
    myProp: 'bar' }, // DOM 属性 domProps: { 
    innerHTML: 'baz' }, // 事件监听器在 `on` 属性内， // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。 // 需要在处理函数中手动检查 keyCode。 on: { 
    click: this.clickHandler }, // 仅用于组件，用于监听原生事件，而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { 
    click: this.nativeClickHandler }, // 自定义指令。注意，你无法对 `binding` 中的 `oldValue` // 赋值，因为 Vue 已经自动为你进行了同步。 directives: [ { 
    name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { 
    bar: true } } ], // 作用域插槽的格式为 // { name: props => VNode | Array 
   
     } 
    scopedSlots: { 
    default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件，需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层属性 key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名， // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true } 

业务中使用

1. 功能说明：
   在message的基础上加入二级信息提示，通过右侧按钮控制信息的显示隐藏。
   
   
2. 代码实现：

import Vue from "vue" import { 
   Message} from 'element-ui' const defDuration = 2000; / * 异常信息错误提示 * @param data msg：错误信息；detail：错误详情 * @param duration 显示时间 * @returns {*} */ 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说明