这事还得从五年前说起...
当时有这么一个需求：在一行文本中显示一个输入框， 可能是文本，也可能是数字，或者是单选框
大概长这样："请输入您的昵称【input 输入框的位置】，请注意不要使用生僻字"
其实我可以直接文本里面套一个输入框组件就行，但是当时的我觉得这种方法实在太 low 了，我必须要封装一个牛 X 的组件出来（叉腰.png)
需求分析
需求就是上面说的，分析完毕
下面进入代码回顾（代码已经找不到了，大体上如下）
<template>
<div class="template-input-root">
{{tempRenderer}}
</div>
</template>
<script>
const regFilterKey = /{([^{}]\w*)}/ // 过滤 key
const regMatchKey = /({[^{}]*})/ // 查找: {key}
export default {
name: 'TemplateInput',
props: {
value: {
},
// 对字段的配置等
// {name: {type: '', rules: []}}
fiels: {
type: Object,
},
template: {
type: String,
default: ''
},
},
computed: {
tempRenderer() {
return this.template.split(regMatchKey).map(item => {
if (regMatchKey.test(item)) {
const name = item.replace(regFilterKey, '$1')
const field = this.fields[name]
const onChange = (value: any) => {
this.$emit('update:value', value)
}
if (field) {
return (
// 此处就是根据配置创建对应的输入框组件
<FormItem
{...field}
onChange={onChange}
value={this.value}
/>
)
}
return name
}
return item
})
}
},
data() {
return {
}
},
methods: {
}
}
</script>
使用方式
<TemplateInput
v-model="form.name"
template="请输入您的昵称{name}，请注意不要使用生僻字"
:fields="{name: {type: 'input', rules: []}}"
/>
这大抵上是当时脑子突然灵光一闪的产物，确让我记忆到现在
这也开启了我对正则表达式的浓厚兴趣，后面几经波折，终于将正则拿下，每当用正则解决了问题的时候，都会想起那年那天那个下午～
