<template> <s-input @update="updateForm" name="ip" :value="state.ip" :rules="[ { type: 'required', message: 'ip不能为空' }, { type: 'ip', message: 'ip格式不对' }, ]" /> </template> <script lang="ts" setup> import { reactive } from "vue" import { SInput } from "...
直接使用UI库组件的方法,比如 el-input 的 提供的 select: <el-inputref="refInput"// 注意这里的refv-model="value"v-bind="$attrs"></el-input> ref 的写法,不要加冒号。 constrefInput =ref(null)// 先放一个nullonMounted(() =>{// 然后在 onMounted 里面才能得到值。console.log('refinput',...
封装Input 封装input 的好处,直接传值,减少逻辑,不再需要额外的e.target,为后面的继续封装做准备。 // Input.tsximport { defineComponent, ref } from 'vue';// defineComponent定义组件,有propsconst Input = defineComponent({props: {value: {required: true,type: String,},onChange: {required: true,type:...
<inputtextref="refInput"v-model="value"></el-input>// 测试方法constrefInput=ref(null)onMounted(()=>{console.log('refinput',refInput)// refInput.value.$refs.refInput.select()refInput.value.refInput.select()}) 父组件里面的用法是一样的,只是需要再套一层,才能拿到自定义组件内部的UI库组件。
/><div>input的值:{username.value}</div></div>); }, }; AI代码助手复制代码 封装表单数据 表单数据,经常需要赋值、获取值,这边可以用类统一处理,在后面的组件赋值属性的时候极其方便。 useForm的精华,在于proxy,访问属性的时候,返回field数据,这在表单组件里可以简洁使用。
可以封装,但是原生UI库提供的强大功能不能给封装没了吧,吃了回扣可是不好滴。 那么如何做到不遗漏呢?先做一个合格的传声筒。 传递属性 先看看 el-input 提供的属性: 太长了,这里只截了一半。 这么多的属性,如果一个一个都弄到 props 里面,然后再一个一个绑定上去,这就太麻烦了。
对组件的二次封装应该每个人都有做过,但在进行二次封装的时候都会遇到三个问题,下面针对这三个问题简单实现一下组件的二次封装。以下内容将以封装 Element UI 的el-input组件为示例。 第一个问题:属性绑定 在对组件封装的时候遇到的第一个问题就是绑定属性了,简单说就是将二次封装的组件属性绑定到el-input组件...
clear 是 el-input 提供的事件,外部可以直接得到这个事件,组件内部不用做操作。 my-change 是自定义的事件。 方法 一直都忽略了,还有方法这个事,因为基本没用过。 使用方法嘛,就需要使用 ref,这个此 ref 非彼 ref,说不清了,还是写代码吧。 直接使用的方法 ...
对组件的二次封装应该每个人都有做过,但在进行二次封装的时候都会遇到三个问题,下面针对这三个问题简单实现一下组件的二次封装。以下内容将以封装 Element UI 的el-input组件为示例。 第一个问题:属性绑定 在对组件封装的时候遇到的第一个问题就是绑定属性了,简单说就是将二次封装的组件属性绑定到el-input组件...
然后要看 el-input 是否是根元素,如果是跟元素的话,那么会自动绑定上,不需要我们手动写v-bind="$attrs"。 如果像上面的例子不是根元素的话,需要手动写v-bind="$attrs"。 inheritAttrs 这个是指定组件是否自动绑定 $attrs 。 默认是 true,会自动把 $attrs 绑定到根元素上面,不管根元素是啥。 这里设置为 fal...