有办法把vue中methods里的方法内容转换为字符串吗？

  • Z时代
  • 2024-03-08
  • 分类：IT

有办法把vue中methods里的方法内容转换为字符串吗？
现在有一个需求就是图表的数据源是确定的，然后编辑器里面就是图表的配置信息，然后我要怎么把我初始化图表的方法里面的内容给显示到编辑器上面？

//初始化图表
initChart(){
    里面就是要显示到编辑器里的代码
}

我一开始是想和echart官网一样只显示option配置对象，把对象传给编辑器组件再转换为字符串，再去拼接显示到编辑器里面，但是直接把对象转为字符串这样做之后会把数据源的里大量数据也给全部转为字符串显示到编辑器上了，而不是像我方法里面写的那样用data来表示，请问有原封不动的把方法里的js代码给同步显示到编辑器上面吗

回答：

new Function()

const str = 'return ' + '`Hello ${name}!`';
const func = new Function('name', str);
func('Jack') // "Hello Jack!"

回答：

  1. function.toString() 可以把函数代码转换成字符，然后你想贴到哪儿就能贴到哪儿
  2. 但是我觉得无法满足你的需求
  3. options 一般是 JSON 字符，可以用 JSON.stringify(options) 转换成字符贴出来
  4. 但是如果你想让用户能编辑，然后改变图表，我觉得这样也不够，因为会有各种错误
  5. 最后还是建议写好 scheme

回答：

把initChart里内容单独拿出来，即可给initChart调用，也可以给编辑器修改
编辑器修改后，同步一下initChart

回答：

既然是编辑器，那么字符串才是model，method根据model动态执行才对，而不是method为主，去获取method里的内容

//伪代码
const optionsStr = ref("")
//根据需要确定要做成函数还是watch
watch(()=>optionStr.value,()=>{
    try{
        chartInstance.setOption(<echarts.EChartsOption>JSON.parse(optionsStr))
    }catch(){
        //JSON.parse可能异常
    }
})

以上是 有办法把vue中methods里的方法内容转换为字符串吗？ 的全部内容， 来源链接： utcz.com/p/936442.html

回到顶部