需求
最近遇到一个需求是：
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
<template>
<component :is="component"></component>
</template>
<script>
export default {
data() {
return {
component: null
}
},
methods: {
render() {
this.component = {
data() {
return {
test: 1
}
},
template: '<div><el-popover></el-popover><div>'
}
}
}
}
</script>
写完之后，你会发现有个报错，那是因为 vue 默认不引入编译器的，参考文档
You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.
要解决报错，开启编译器即可
// vue-cli3
// 在 vue.config.js 中设置 runtimeCompiler
module.exports = {
runtimeCompiler: true
}
// nuxt
// 在 nuxt.config.js build 中拓展配置
build: {
extend(config) {
config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
}
}
这里把字符串渲染成组件除了 template 外还有另外一种方法就是使用 Vue.compile，这个同样是需要引入编译器的
模拟 placeholder
使用 css 表达式 attr
<div class="input" placeholder="请输入"></div>
.input:before {
content: attr(placeholder);
color: #bbb;
}
设置光标回到字符尾部
对于 contenteditable 设为 true 的可编辑 div，调用 focus 方法后，光标是在第一位的。
要把他放到最后，可以使用 Range 和 Selection API。简单来说，Selection 包含 Range，比如你在浏览器选中一段文字，按住 ctrl 再选中另一段文字，那么就等于有两个 Range 在 Selection 中，具体的方法和属性查看文档即可
那么光标回到最后可以这么写
const range = document.createRange() // 创建 range 实例
range.selectNodeContents(this.$refs.divInput) // range 包含某个元素
range.collapse(false) // 折叠 range 至末位（传 true 为首位）
const slection = window.getSelection() // 创建 selection 实例
slection.removeAllRanges() // 清掉其所有 range
slection.addRange(range) // 塞入刚刚的 range 实例
对于 input ，设置光标回到尾部，可以直接调用 setSelectionRange
const valueLength = this.value.length
this.$refs.input.setSelectionRange(valueLength, valueLength)
