模板字符串使用点击事件

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
Logo

前往低代码交流专区

更多推荐