模板字符串使用点击事件【VUE】

模板字符串使用点击事件

1.在element-UI组件库中使用Message 消息提示,可能会使用到模板字符串点击事件。
代码如下：

import { Message } from 'element-ui';
<template>
  <button type="primary"  @click="getMessage">message</button>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    getMessage () {
      this.$message({
        dangerouslyUseHTMLString: true,
        message: `<div style=display:flex><div>点击成功</div><button onclick = getDownUp() style=color:#0091fa;cursor:pointer;>立即前往</button></div>`,
        type: 'success',
        duration: 0
      })
    },
    getDownUp () {
      console.log('模板字符串点击事件')
    }
  },
  mounted () {
    // window全局对象上定义一个这样的方法
    window.getDownUp = this.getDownUp
  }
}
</script>

2.vue中在js中模板字符串使用点击事件
此文件为js文件

import Vue from 'vue'

Vue.prototype.$message({
    dangerouslyUseHTMLString: true,
    message: `<div style=display:flex><div>message</div><button onclick ='getDownUp()'>点击按钮</button></div>`,
    type: 'success',
})
// 此函数放在生命周期中挂载阶段或其他
window.getDownUp = function () {
   console.log('模板字符串')
}

总结：为什么需要定义window.getDownUp = this.getDownUp？

1.在字符串里的点击事件是原生的onclick
2.原生的函数getDownUp是定义在window全局对象上的
3.特别注意：触发的事件传参如果是多个参数一定要给每个参数加引号，否则会报错

getDownUp('${a[i]}','${b[i]}')

4.模板字符串中的样式书写（行内样式）

style=display:flex