Vue里渲染一个模板字符串传入参数并返回结果字符串

vue 文章 2021-12-02 10:22 1863 0 全屏看文

AI助手支持GPT4.0

这个需求确实很奇葩,但是又必须要用。

因为我使用的el-input 所以不能像 textarea那样把业务逻辑写在textarea里。我只能想办法在 v-model 里操作。

但是v-model只能接受一个字符串。所以只能先渲染逻辑代码最后生成字符串 再赋值给 formData.txtRequest

<el-form-item label="SQL:" prop="txt_sql">
	<el-input v-model="formData.txt_sql" type="textarea" placeholder="请输入SQL"
	  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
  </el-form-item>

<template v-if="result_success">
  <el-form-item label="request:" prop="txt_request">
	<el-input v-model="formData.txt_request" type="textarea" 
	  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
  </el-form-item>


vue的 data里是这样的:

export default {
       name: 'Convert4gb',
        components: {},
        props: [],
        data() {
            return {
                result_success:true,
                formData: {
                    txt_sql:"",
		    txt_request: ""
		}
	}
    }
}


最后找到的解决方案是 使用 : vue-template-render

安装方法:

npm install vue-template-render

 使用方法:

/# es6导入
// import TemplateRender from 'vue-template-render'
//# cmd导入
const TemplateRender = require('vue-template-render')

//no options
const vueTemplate1 = `
    <div><span v-for="i in 10">{{ i }}</span></div>
    `
//# 输出 dom
console.log(TemplateRender.render(vueTemplate1))
//# 输出 html
console.log(TemplateRender.render(vueTemplate1).outerHTML)

//options
const vueTemplate2 = `
    <div><span v-for="i in 10">{{msg}} --- {{ i }}</span></div>
    `

//# 输出 dom
console.log(TemplateRender.render(vueTemplate2, {data: {msg: 'hello'}}))
//# 输出 html
console.log(TemplateRender.render(vueTemplate2, {data: {msg: 'hello'}}).outerHTML)


注意点:

  1. 模板必须有个根目录 比如 <div></div>

  2. 数据必须包含在 data里


所以我改了代码:

 const requestTemp = TemplateRender.render(`<div>{{txt_sql}}</div>`,{data:{txt_sql:this.formData.txt_sql}}).outerHTML;
 this.formData.txt_request = requestTemp;


最终效果:

image.png

-EOF-

AI助手支持GPT4.0