vue3简单封装input组件和统一表单数据详解

目录
  • 前言
  • 准备工作
  • 用原生 input
  • 封装 Input
  • 封装表单数据
  • 使用表单数据
  • 总结

前言

vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担。

本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据。

准备工作

vue create example创建项目,参数大概如下:

用原生 input

原生的 input,主要是 value 和 change,数据在 change 的时候需要同步。

App.tsx如下:

import { ref } from 'vue';

export default {
  setup() {
    // username就是数据
    const username = ref('张三');
    // 输入框变化的时候,同步数据
    const onInput = ;
    return () => (
      <div>
        <input type="text"
            value={username.value}
            onInput={(e: any) => { username.value = e.target.value; }} />
        <div>input的值:{username.value}</div>
      </div>
    );
  },
};

封装 Input

封装 input 的好处,直接传值,减少逻辑,不再需要额外的e.target,为后面的继续封装做准备。

// Input.tsx
import { defineComponent, ref } from 'vue';

// defineComponent定义组件,有props
const Input = defineComponent({
  props: {
    value: {
      required: true,
      type: String,
    },
    onChange: {
      required: true,
      type: Function,
    },
  },
  // 渲染用到props,需要在这里传参
  setup(props) {
    // 值变化 的时候  调用传过来的onChange从而同步父组件的 数据
    const onInput = (e: any) => {
      props.onChange && props.onChange(e.target.value);
    };
    return () => <input type="text" value={props.value} onInput={onInput} />;
  },
});

使用Input组件

import { ref } from 'vue';
import Input from './components/Input';
export default {
  setup() {
    // 数据
    const username: any = ref('张三');
    return () => (
      <div>
        {/* 使用组件,传value和onChange */}
        <Input
          value={username.value}
          onChange={(value: string) => (username.value = value)} // 直接在这同步数据
        />
        <div>input的值:{username.value}</div>
      </div>
    );
  },
};

封装表单数据

表单数据,经常需要赋值、获取值,这边可以用类统一处理,在后面的组件赋值属性的时候极其方便。

useForm的精华,在于proxy,访问属性的时候,返回field数据,这在表单组件里可以简洁使用。

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ref, Ref } from "vue";
export class FormData<T> {
  private data: Ref<any>;
  constructor(data: T) {
    this.data = ref(data || null);
  }

  // 设置某个字段的值
  setValue(name: string, val: any): void {
    const next = { ...this.data.value, [name]: val };
    this.data.value = next;
  }

  // 获取某个字段的值
  getValue(name: string): any {
    return this.data.value[name];
  }

  // 获取整个值
  getValues() {
    return this.data.value;
  }

  // 设置整个值
  setValues(values: T) {
    this.data.value = values;
  }

  // 获取field,字段和字段的修改事件
  getField(name: string) {
    return {
      value: this.data.value[name],
      onChange: (v: any) => {
        this.setValue(name, v);
      },
    };
  }
}

type FormDataProxy<T> = {
  [P in keyof T]: T[P];
};

export function useForm<T extends Record<string, any>>(data: T) {
  const form = new FormData(data);
  const ver = ref(0);

  const proxy = new Proxy(form, {
    // 写proxy的目的是:form.username的时候,直接返回 form.getField(username)
    get(target, name) {
      switch (name) {
        case "getValues":
          return form.getValues.bind(form);
        case "setValues":
          return form.setValues.bind(form);
        default:
          return form.getField(name as string);
      }
    },
    // 写form.username = xx  直接返回 form.setValue('username',xx)
    set(target, name, value) {
      switch (name) {
        case "getValues":
        case "setValues":
          break;
        default:
          form.setValue(name as string, value);
      }
      return true;
    },
  }) as any as FormDataProxy<T> & {
    setValues: (val: T) => void;
    getValues: () => Ref<T>;
  };
  return { form: proxy, ver };
}

使用表单数据

Input组件配合表单,使用效果奇佳。

import Input from './components/Input';
import { useForm } from './hooks/useForm';

// 使用组件
export default {
  setup() {
    // 数据
    const { form, ver } = useForm({ username: '张三', age: 33 });
    console.log(123, form, ver);
    return () => (
      <div>
        {/* 这里的form.username,实际是proxy返回的{value:xxx,onChange:fn} */}
        {/*  多表单组件的时候 这样就非常方便了 */}
        <Input {...form.username} />
        <Input {...form.age} />

        <button
          onClick={() => {
            console.log(form.getValues());
          }}
        >
          提交
        </button>
      </div>
    );
  },
};

总结

到此这篇关于vue3简单封装input组件和统一表单数据的文章就介绍到这了,更多相关vue3封装input组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3封装自己的分页组件

    本文实例为大家分享了vue3封装自己分页组件的具体代码,供大家参考,具体内容如下 背景 在浏览列表类型的数据的时候,如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题,那么此时分页组件就起到了关键作用,它可以只请求一部分数据,也不会占用太多的页面空间,想看别的数据可以通过页码的改变来发起请求,刷新页面数据 现在我们自己来封装分页组件 组件所需参数 total 属性 :用来传递数据总条数 pagesize 属性 :每页展示几条数据 currentPage 属性 :当前默认页码 chang

  • Vue3导航栏组件封装实现方法

    在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考 导航栏组件的效果图: 滚动条滚动以后的吸顶效果示意图: 具体代码展示: <template> <header class="app-header"> <div class="container"> <!-- 头部导航区域 --> <HeaderNavCommon /> <div class="search&

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • vue3封装计时器组件的方法

    背景 在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量,这样的计时器不仅会在商品详情页面显示还会在购物车里面有,那就可以把计时器封装成组件,以便于更好的复用以及后期维护 落地代码 <template> <div class="xtx-numbox"> <div class="label"><slot /></div> <div class="numbox"> &

  • vue3.0封装轮播图组件的步骤

    接着上一篇文章,熟悉vue3.0的基本用法,和使用一段时间以后,开始准备开发适用于vue3.0使用的pc端的组件库.会陆续跟新一些组件库的写法和注意事项,有兴趣的同学可以多多关注哦,不多bb,开始. 开发一个轮播图组件,适用pc端,(暂无考虑app), 使用于vue3.0 + TS 大致的实现效果是这样: 图片自由轮播,对应圆点图片跳转,左右指示器跳转等.暴露以下options配置: 以上是主要的options,下面展开来说一下具体如何封装. 一:封装思想 在vue3.0和vue2.0中封装组件

  • vue3封装轮播图组件的方法

    目的 封装轮播图组件,直接使用,具体内容如下 大致步骤 准备my-carousel组件基础布局,全局注册 准备home-banner组件,使用my-carousel组件,再首页注册使用. 深度作用选择器覆盖my-carousel组件的默认样式 在home-banner组件获取轮播图数据,传递给my-carousel组件 在my-carousel组件完成渲染 自动播放,暴露自动轮播属性,设置了就自动轮播 如果有自动播放,鼠标进入离开,暂停,开启 指示器切换,上一张,下一张 销毁组件,清理定时器 落

  • vue3简单封装input组件和统一表单数据详解

    目录 前言 准备工作 用原生 input 封装 Input 封装表单数据 使用表单数据 总结 前言 vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担. 本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据. 准备工作 用vue create example创建项目,参数大概如下: 用原生 input 原生的 input,主要是 value 和 change,数据在 change 的时候需要同步. App

  • Vue3之元素和组件的动画切换实现示例详解

    目录 前言 实例解析 元素间的动画切换 组件间的动画切换 总结 前言 当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从16:9切换到4:3时会出现黑边的情况,这时加一个转场动画,用户就不会看到这个黑边了,同样在网站开发中如果说加载的另一个页面网络不太好时,我们可以使用一个加载动画,让用户感觉当前系统仍然正常.不会出现“卡死”的假

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

  • PHP 表单提交及处理表单数据详解及实例

    先来看一下html form表单的源码: <html> <head> <title>Feedback Form</title> </head> <body> <form action="feedback.php" method="post"> Name:<input type="text" name="username" size=&qu

  • Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • 基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • Vuejs第十一篇组件之slot内容分发实例详解

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

  • Vue.js分页组件实现:diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

随机推荐