Vue组件封装 ——input 输入框组件

一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建input.vue组件，可以自己取个名字

<script>
export default {name: "CatInput",
};
</script>

3、在main.js中引入组件

import CatInput from "./components/input.vue";
Vue.component(CatInput.name, CatInput);

4、App.vue中使用组件

二、input组件结构搭建

主要功能为：输入框类型切换、双向数据绑定、清空输入框、密码明文显示切换

输入框需要绑定v-model，实际上是一个语法糖，等价于：

:value="uname"

@input="uname=$event.target.value"

需要传入的参数：

placeholder：字段预期值的提示信息

type：文本框类型

name：name

disabled：是否禁用

value：值

clearable：是否显示清空按钮

showPassword：密码显示

data中，添加字段 passwordVisiable，控制是否明文显示密码，因为子组件无法直接修改父组件传入的type值

页面效果：

input.vue 具体代码如下，style样式太多，不逐一列出了，可根据需求自己定义：

<template><div class="cat-input" :class="{ 'cat-input--suffix': showSuffix }"><!-- type：先判断是否有传入显示密码，控制输入框类型是文本/密码，然后是type传入的值 --><input:type="showPassword ? (passwordVisiable ? 'text' : 'password') : type"class="cat-input__inner":placeholder="placeholder":name="name":disabled="disabled":class="{ 'is-disabled': disabled }":value="value"@input="handleinput"/><span class="cat-input__suffix" v-if="showSuffix"><iclass="cat-input__icon cat-icon-circle-close"v-if="clearable && value"@click="clear"></i><iclass="cat-input__icon cat-icon-view":class="{ 'cat-icon-view-active': passwordVisiable }"v-if="showPassword"@click="handlepwd"></i></span></div>
</template><script>
export default {name: "CatInput",props: {placeholder: {type: String,default: "",},type: {type: String,default: "text",},name: {type: String,default: "",},disabled: {type: Boolean,default: false,},value: {type: String,default: "",},clearable: {type: Boolean,default: false,},showPassword: {type: Boolean,default: false,},},data() {return {passwordVisiable: false, //控制是否显示密码};},methods: {handleinput(event) {//父组件在绑定v-model时，其实就绑定的input事件，因此父组件不需要再声明事件了this.$emit("input", event.target.value);},clear() {this.$emit("input", "");},handlepwd() {this.passwordVisiable = !this.passwordVisiable;},},computed: {//有清空/显示密码，添加类名、显示spanshowSuffix() {return this.clearable || this.showPassword;},},
};
</script>

App.vue使用input组件：

<template><!-- 输入框需要绑定v-model，实际上是一个语法糖，等价于：:value="uname"@input="uname=$event.target.value"--><div><Cat-inputplaceholder="请输入用户名"type="text"v-model="uname"clearable></Cat-input><br /><Cat-input placeholder="禁用的输入框" disabled></Cat-input><br /><Cat-inputplaceholder="请输入密码"v-model="upwd"show-password></Cat-input></div>
</template><script>
export default {data() {return {uname: "",upwd: "",};},
};
</script><style lang="scss" scoped>
.cat-input {margin-bottom: 10px;
}
</style>

Vue组件封装 ——input 输入框组件相关推荐

elemen-UI 组件：input输入框的样式、代码、效果图对比 - 应用篇
elemen-UI 输入框组件的样式问题:+栅格系统使用可定义宽度等细节处理提示:具体参考项目为准. 效果图对比: 代码如下:(2种) <el-form :model="form& ...
php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
Vue+ElementUI 之 input输入框添加自定义图片
Vue+ElementUI 之 input输入框添加自定义图片效果图如图: <el-form ref="formData" :model="formData&q ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
input change获取改变之前的值和改变之后的值_使用Vue3.0新特性造轮子 WidgetUI3.0 （Input输入框组件）
我们先看看组件效果图: 基本用法 type属性(type="password") 占位符(placeholder="请输入") 带清除按钮(clear) 输入限 ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
Vue组件封装 ——dialog对话框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建dialog.vue组件,可以自己取个名字 <script> export def ...
在uni-app中使用vue语法封装个计数器组件
效果如下: 1.在components中新建个counter.vue 组件 <template><view class="counter ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...

Vue组件封装 ——input 输入框组件

一、基础准备工作

二、input组件结构搭建

Vue组件封装 ——input 输入框组件相关推荐

最新文章

热门文章