526互联

element ui 的messageBox中绑定vnode节点

发布时间 2023-09-22 16:09:24作者: 小白字太白
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-button type="primary" size="default" @click="onTest">测试</el-button>
    <div>
     
    </div>
  </div>
</template>
<script>
  export default {
  name: 'about',
  data() {
    return {
      time:5,
      number:1235455
    }
  },
  mounted() {
    window.myFunction = this.myFunction;
  },
  methods: {

    onTest(){
      const h = this.$createElement;
        // this.$confirm(`<div>此操作将永久删除该文件, 是否继续</div>?<button onclick='myFunction()'>查询</button>`, '提示', {
        this.$confirm( h('div', null, [`此操作将${this.time}分钟后永久删除该文件${this.number}, 是否继续`,
            h('el-button', {on: {
                click: this.myFunction
              },attrs: {
    type: 'text'
  },}, '查询 ',),
            h('i', { style: 'color: teal' }, 'VNode')
          ]), '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    myFunction(){
      alert('你好啊')
    }
  },
}
</script>

深入数据对象

有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML attribute，也允许绑定如 innerHTML 这样的 DOM property (这会覆盖 v-html 指令)。

{
  // 与 `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 property
  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<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}