Vue中解决v-html事件无效问题

1.Vue 项目中解决 V-html 中事件无效问题

html

<template>
  <div ref="htmlCode">
  </div>
</template>

js

import Vue1 from 'vue/dist/vue.esm.js'
import { baseURL } from 'config'
export default {
  props: {
    content: {
      type: String
    }
  },
  data () {
    return {
    }
  },
  methods: {
  },
  created () {
  },
  mounted () {
    var MyComponent = Vue1.extend({
      template: `<div>${this.content}</div>`,
      methods: {
        download (batNo) {
          let url = baseURL + '/auth/sms/export/' + batNo
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          document.body.appendChild(link)
          link.click()
        }
      }
    })
    var component = new MyComponent().$mount()
    // document.getElementById(this.id).appendChild(component.$el)
    this.$refs.htmlCode.appendChild(component.$el)
  }
}

已验证，可以用，主要是 vue 的支持问题，还有其他方法，待验证

随机推荐

Vue框架学习笔记
Vue.js是目前最火的一个前端框架，React是最流行的前端框架(React除了开发网站，还可以开发手机App。Vue需要借助于Weex) 前端三大主流框架 Angular.js Reac
vue-postcss-px2rem实现px转re
安装 lib-flexible postcss-px2rem postcss postcss-loader webpack.base.conf.js以下配置 const webpack = req
Vue中解决v-html事件无效问题
1.Vue 项目中解决 V-html 中事件无效问题 html <template> <div ref="htmlCode"> </div> </te
Vue单元测试踩坑
单元测试的重要性，在这里就不过多阐述了。这篇文章主要记录在vue项目中引入单元测试遇到的一些问题以及解决方案。项目背景：引入一些第三方库，如： element-ui组件库 echarts图表库

技术文档网

Vue中解决v-html事件无效问题

相关文章

随机推荐