vue 字符串索引变量_花括号匹配变量组件实现记录，vue字符串渲染成组件的两种方式...

需求

最近遇到一个需求是：

input 框需要支持输入双花括号来引用变量({ {变量名}})，鼠标移入花括号时要弹框显示变量信息(类似 postman 匹配变量的效果)

从技术上说就是需要从输入的字符串中匹配 { {变量名}} 替换成 element 的弹框组件 el-popover，实现 hover 时显示弹框信息

实现方案

因为 input 中不能渲染 html 或者说组件，那么我需要设置一个 input 一个 div，

input 用来输入内容，在 blur 时，替换内容中的 { {}} 为 el-popover 组件，然后在 div 中渲染，显示 div 隐藏 input ，

点击 div 时，再切换为显示 input，隐藏 div，并调用 input 的 focus 方法，光标回到末尾

下面记录下这个组件实现的几个要点

字符串渲染成组件

将字符串渲染为组件，用 v-html 不就可以了吗？其实是不行的，v-html 只能渲染 html 标签。

要把字符串渲染成组件，需要使用 template

export default {

data() {

return {

component: null

}

},

methods: {

render() {

this.component &