<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 "...
使用Input组件 import { ref } from 'vue';import Input from './components/Input';export default {setup() {// 数据const username: any = ref('张三');return () => (<div>{/* 使用组件,传value和onChange */}<Inputvalue={username.value}onChange={(value: string) => (username.value = valu...
直接使用UI库组件的方法,比如 el-input 的 提供的 select: <el-inputref="refInput"// 注意这里的refv-model="value"v-bind="$attrs"></el-input> ref 的写法,不要加冒号。 constrefInput =ref(null)// 先放一个nullonMounted(() =>{// 然后在 onMounted 里面才能得到值。console.log('refinput',...
import{ ref }from'vue';exportdefault{setup() {// username就是数据constusername =ref('张三');// 输入框变化的时候,同步数据constonInput = ;return() =>(<div><inputtype="text"value={username.value}onInput={(e:any) =>{ username.value = e.target.value; }} /><div>input的值:{username...
父组件的调用代码: 模板 <inputtext v-model="value" v-bind="attrs" > </inputtext> 代码 const value = ref('222') const attrs = reactive({ maxlength: 10, 'show-word-limit': true, clearable: true }) 这里modelValue 就是 props ,maxlength、show-word-limit、clearable 就变成了 $attrs 。
我们先看看 el-input 的插槽的使用。 1. 那么想要传递插槽的话,是不是可以这样? // 给递给el-input 的插槽// 接收父组件传递进来的插槽 1. 测试可以。 那么总不会一个一个写吧,这也太麻烦了。如果能够for就好了。 等等, for?那么我们是不是可以这样。
对组件的二次封装应该每个人都有做过,但在进行二次封装的时候都会遇到三个问题,下面针对这三个问题简单实现一下组件的二次封装。以下内容将以封装 Element UI 的el-input组件为示例。 第一个问题:属性绑定 在对组件封装的时候遇到的第一个问题就是绑定属性了,简单说就是将二次封装的组件属性绑定到el-input组件...
<inputtextref="refInput"v-model="value"v-bind="props"@clear="clear"@my-change="myChange"> clear 是 el-input 提供的事件,外部可以直接得到这个事件,组件内部不用做操作。 my-change 是自定义的事件。 方法 一直都忽略了,还有方法这个事,因为基本没用过。
父组件调用子组件内部的方法 上面那种方式,还可以让父组件调用子组件内部定义的方法,比如内部定义一个 const setInput = () => {value.value = new Date()}复制代码 父组件可以这样调用 refInput.value.setInput()复制代码 总结 其实事件和方法,并没有封装,而是直接就可以使用的。 这是 element-plus 测试的结...
这个比较简单了,设计两个属性,一个是 modelValue 绑定 input 的 value 的。 另一个是 meta,后面跟了一个 metaInput ,这个就是上面整理的 input 的属性对象,在组件的属性里面,改成了带验证的形式。 // 定义属性constmetaInput={type:Object,default:()=>{return{// 通用controlId:Number,// 编号,区别同一...