封装控件
为了更方便使用，我们可以基于 el-input 做二次封装，建立一个 text.vue 的文件。
text.vue，模板：
<template> <el-input v-model="value" clearable @blur="myblur" @change="mychange" @clear="myclear" @keydown="mykeydown" > el-input> template>
代码：
import debounceRef from'../js/debounceRef.js' // 设置属性 const props = defineProps({ modelValue: [String, Number], model: Object, colName: String }) // 设置提交 const emit = defineEmits(['update:modelValue']) const events = { run: () => {}, clear: () => {} } const value = debounceRef(props, events, emit) // 在点击由 clearable 属性生成的清空按钮时触发 const myclear = () => { events.run() // 立即执行 } // 仅在输入框失去焦点或用户按下回车时触发 const mychange = () => { events.run() // 立即执行 } // 在 Input 失去焦点时触发 const myblur = () => { events.run() // 立即执行 } // 按键，用于汉字的连续输入 const mykeydown = (e) => { // console.log('按键信息：', e) events.clear() }
这样在使用的时候就可以很方便了。
使用封装的控件
模板：
<nf-text v-model="retUser.name">nf-text> <nf-text :model="retUser" colName="name" >nf-text>
代码：
const retUser = reactive({ name: '对象的响应性', address: '', age: 18, like: [] })
- v-model vs proxy 一般都是使用 v-model 的方式来实现双向绑定，但是我感觉有点绕圈圈，既然表单有一个 model 对象，那么为啥不能直接修改呢？于是设置了这种兼容方式，可以使用 v-model，也可以传入 model 和 属性名称，然后在子组件里面就可以通过 proxy 的 set 拦截的方式实现**“直接”**的修改。
不封装组件，直接使用
如果我就是不想封装，我想直接用行不行？当然是可以的，只需要设置好参数即可。
const retUser = reactive({ name: '对象的响应性', address: '', age: 18, like: [] }) const addressProps = { model: retUser, colName: 'address' } const events = { run: () => {}, clear: () => {} } const address = debounceRef(addressProps, events) // 按键，用于汉字的连续输入 const mykeydown = (e) => { events.clear() }
依据 model 设置对象，再设置回调函数的对象即可。然后的用法类似于 computed。
当然这样看起来就比较麻烦了，因为一开始就是基于二次封装组件来设计的。
除了文本框还支持其他吗？
各种表单子控件，基本都支持，比如CheckBoxGroup等，虽然其 value 是数组形式，但是也同样支持的，效果就是：选择选项一、二、三，然后一起响应。
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="Option A" /> <el-checkbox label="Option B" /> <el-checkbox label="Option C" /> <el-checkbox label="Option D" /> <el-checkbox label="Option E" /> el-checkbox-group> <div v-if="model" style="display: none;">{{model[colName]}}div> template>
// 设置属性 const props = defineProps({ modelValue: [Array], model: Object, colName: String }) const emit = defineEmits(['update:modelValue']) const events = { run: () => {}, clear: () => {} } const checkList = debounceRef(props, events, emit)
这里就不需要设置各种事件了。
总结
个人感觉还是挺方便的。你可能觉得没必要二次封装，其实上面介绍的封装，只是整个二次封装的一小部分代码，还有其他各种功能。
不知道大家有没有猜出来我想实现什么功能？
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
