基于vue实现的 input 小组件

最新推荐文章于 2023-07-25 17:19:48 发布
最新推荐文章于 2023-07-25 17:19:48 发布
阅读量487 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xmyun/p/7651031.html
版权

最近看到一个挺有趣的input交互效果，尝试着用vue做一个，效果如下:
1.没有数值时，显示placeholder；
685604-20171011155516480-1299680749.png

2.触发焦点时，label动画上移，placeholder清空；
685604-20171011155533262-478465582.png

1.有值时，label依旧存在；
685604-20171011155544152-255282172.png

vue代码如下：

<template>
    <div class="page">
        <div class="inputBox" :class="{inputBoxActive:isNameInputActive}">
           <input class="inputSelf form-control"  v-model="nameVal" :placeholder="placeholderName" @input="onInputName" @focus="onFocusName" @blur="onBlurName"></input> 
           <label class="inputLabel">your name</label>    
        </div>
        <div class="inputBox" :class="{inputBoxActive:isPhoneInputActive}">
           <input class="inputSelf form-control"  v-model="phoneVal" :placeholder="placeholderPhone" @input="onInputPhone" @focus="onFocusPhone" @blur="onBlurPhone"></input> 
           <label class="inputLabel">your phone</label>    
        </div>
        <div class="inputBox" :class="{inputBoxActive:isEmailInputActive}">
           <input class="inputSelf form-control"  v-model="emailVal" :placeholder="placeholderEmail" @input="onInputEmail" @focus="onFocusEmail" @blur="onBlurEmail"></input> 
           <label class="inputLabel">your email</label>    
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                isNameInputActive:false,
                nameVal:'',
                placeholderName:'your name',
                isPhoneInputActive:false,
                phoneVal:'',
                placeholderPhone:'your phone',
                isEmailInputActive:false,
                emailVal:'',
                placeholderEmail:'your email'
            }
        },
        methods:{
            onFocusName:function(){
                this.isNameInputActive = true;
                this.placeholderName = '';
            },
            onInputName:function(){
                this.isNameInputActive = true;
                this.placeholderName = '';
            },
            onBlurName:function(){
                if(!this.nameVal){
                    this.isNameInputActive = false;
                    this.placeholderName = 'your name';
                }else{
                    this.isNameInputActive = true;
                } 
            },
            onFocusPhone:function(){
                this.isPhoneInputActive = true;
                this.placeholderPhone = '';
            },
            onInputPhone:function(){
                this.isPhoneInputActive = true;
                this.placeholderPhone = '';
            },
            onBlurPhone:function(){
                if(!this.phoneVal){
                    this.isPhoneInputActive = false;
                    this.placeholderPhone = 'your phone';
                }else{
                    this.isPhoneInputActive = true;
                } 
            },
            onFocusEmail:function(){
                this.isEmailInputActive = true;
                this.placeholderEmail = '';
            },
            onInputEmail:function(){
                this.isEmailInputActive = true;
                this.placeholderEmail = '';
            },
            onBlurEmail:function(){
                if(!this.emailVal){
                    this.isEmailInputActive = false;
                    this.placeholderEmail = 'your email';
                }else{
                    this.isEmailInputActive = true;
                } 
            }
        }
    }
</script>
<style scoped>
.form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.form-control::-moz-placeholder {
    color: #666;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #666
}

.form-control::-webkit-input-placeholder {
    color: #666
}

.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1
}

.inputBox{
    position:relative;
    width:80%;
    margin:0 auto;
    margin-top:24px;
    margin-bottom:8px;
}
.inputSelf{
    z-index: 2;
    position: relative;
    background: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}
.inputLabel {
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    padding: 12px 16px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
label.inputLabel {
    display:block;
    opacity: 0;
    bottom: 0;
    padding: 12px 16px;
}
.inputBoxActive label.inputLabel{
    display:block;
    opacity: 1;
    bottom: 100%;
    padding: 0 16px;
}
</style>

虽然效果有了，但是同样的交互效果，应该独立成一个组件。
所以，接下来开始组件化。

第一步：创建myInput.vue。

<template>
  <div class="inputBox" :class="{inputBoxActive:isInputActive}">
      <input class="inputSelf form-control"  v-model="inptVal" :placeholder="inptPlaceholder" @input="onInput" @focus="onFocus" @blur="onBlur" v-on:input="updateValue($event.target.value)"></input>
      <label class="inputLabel">{{inptLabel}}</label>
  </div>
</template>
<script>
    export default{
        data(){
            return{
                isInputActive:false,
                inptVal:this.myVal,
                inptPlaceholder:this.placeholderText,
                inptLabel:this.placeholderText
            }
        },
        props: {
            myVal:{
                type:String,
                default:''
            },
            placeholderText:{
                type:String,
                default:''
            }
        },
        methods: {
            onFocus:function(){
                this.isInputActive = true;
                this.inptPlaceholder = '';
            },
            onInput:function(){
                this.isInputActive = true;
                this.inptPlaceholder = '';
            },
            onBlur:function(){
                if(!this.inptVal){
                    this.isInputActive = false;
                    this.inptPlaceholder = this.placeholderText;
                }else{
                    this.isInputActive = true;
                } 
            },
            updateValue: function (value) {
                this.$emit('input', value)
            }
        }
    }
</script>
<style scoped>
.form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.form-control::-moz-placeholder {
    color: #666;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #666
}

.form-control::-webkit-input-placeholder {
    color: #666
}

.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1
}

.inputBox{
    position:relative;
    width:80%;
    margin:0 auto;
    margin-top:24px;
    margin-bottom:8px;
}
.inputSelf{
    z-index: 2;
    position: relative;
    background: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}
.inputLabel {
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    padding: 12px 16px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
label.inputLabel {
    display:block;
    opacity: 0;
    bottom: 0;
    padding: 12px 16px;
}
.inputBoxActive label.inputLabel{
    display:block;
    opacity: 1;
    bottom: 100%;
    padding: 0 16px;
}
</style>

需要注意在构建组件时，从父传入的props值，在子组件里不能直接修改，否则会报类似下边的错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritt ...

正确的应对方式是：

  1. 定义一个局部变量，并用 prop 的值初始化它：
data(){
        return{
            isInputActive:false,
            inptVal:this.myVal,
            inptPlaceholder:this.placeholderText,
            inptLabel:this.placeholderText
        }
},
props: {
        myVal:{
            type:String,
            default:''
        },
        placeholderText:{
            type:String,
            default:''
        }
}
  1. 定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

第二步：在页面里引入myInput组件。

<script>
    import myInput from '../../components/myInput/myInput';
    export default{
        components: {
            myInput
        },
        data(){
            return{
                nameVal:'',
                placeholderName:'your name',
                phoneVal:'',
                placeholderPhone:'your phone',
                emailVal:'',
                placeholderEmail:'your email'
            }
        },
        methods:{
            saveForm:function(){
                console.log(this.nameVal);
                console.log(this.phoneVal);
                console.log(this.emailVal);
            },
            inptParent1:function(params){
                const trimmedText = params.trim();
                this.nameVal = trimmedText;
            },
            inptParent2:function(params){
                const trimmedText = params.trim();
                this.phoneVal = trimmedText;
            },
            inptParent3:function(params){
                const trimmedText = params.trim();
                this.emailVal = trimmedText;
            }
        }
    }
</script>

第三步：在html中引入myInput元素。

<template>
    <div class="page">
        <myInput 
            :myVal="nameVal"
            :placeholderText="placeholderName" 
            v-on:input="inptParent1"
        />
        <myInput 
            :myVal="phoneVal"
            :placeholderText="placeholderPhone" 
            v-on:input="inptParent2"
        />
        <myInput 
            :myVal="emailVal"
            :placeholderText="placeholderEmail" 
            v-on:input="inptParent3"
        />
        <div class="btnBox">
            <Button type="ghost" @click="saveForm" shape="circle">提交</Button>  
        </div>
    </div>
</template>
<style scoped>
.btnBox{
    padding-top:24px;
    text-align: center;
}
</style>

第四步：myInput组件的数值变化回传到父组件里。

在myInput组件的input上绑定v-on:input="updateValue($event.target.value)"触发方法：

<template>
  <div class="inputBox" :class="{inputBoxActive:isInputActive}">
      <input class="inputSelf form-control"  v-model="inptVal" :placeholder="inptPlaceholder" @input="onInput" @focus="onFocus" @blur="onBlur" v-on:input="updateValue($event.target.value)"></input>
      <label class="inputLabel">{{inptLabel}}</label>
  </div>
</template>

在myInput组件注册updateValue方法：

        methods: {
            updateValue: function (value) {
                this.$emit('input', value)
            }
        }

在父组件引用myInput组件，绑定v-on:input="inptParent1"方法：

<myInput 
            :myVal="nameVal"
            :placeholderText="placeholderName" 
            v-on:input="inptParent1"
        />

在父组件注册inptParent1方法：

        methods:{
            inptParent1:function(params){
                const trimmedText = params.trim();
                this.nameVal = trimmedText;
            }
        }

转载于:https://www.cnblogs.com/xmyun/p/7651031.html

weixin_30809333
关注
分享一个小Input框
读心悦
08-09 103
效果如下图： 一段很简单的代码，就不分析思路了。 源码： import React from "react" import { Input } from "antd"; import { EllipsisOutlined } from '@ant-design/icons'; function InputDome() { const add = () => { console.log("可以了！"); } return <React.Fragment&
vue input  自定义组件化   只能输入 整数  小数点两位   最大值  最大位数
悟空—
09-06 952
vue input 自定义组件化 只能输入 整数 小数点两位 最大值 最大位数 d-input.vue <template> <!--<el-inputtype="text":placeholder="placeholder":maxlength="maxLength"v-model="model"v-on:input="input...
Vue input
weixin_30477797的博客
12-17 308
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为 Number 类型（如...
Vue封装input公共组件
weixin_45419441的博客
09-06 676
Vue封装input公共组件 最近呢有一个需求是很多个表单添加 编辑等操作 会用到很多input输入框 所以就想把input进行简单封装 提高一些复用率减少一些代码量 因封装没什么难度性 故直接贴上代码 做一些简单的注释 <template> <div > <el-form :label-position="labelPosition" label-width="90px" style="margin-left:10%"> <el-form
Vue input的一些方法
嘿喵财运旺旺
09-10 2741
多选框 获取value 值，已经动态改变样式 &lt;div class="doctor"&gt; &lt;div class="doctor-li"&gt; &lt;input type="checkbox" v-on:change="check" id="checkbox" value="111" v-model="v
vue中弹窗input框聚焦_使用VueJS实现的带远镜头聚焦交互动效输入框
weixin_39787792的博客
12-22 155
CSS语言：CSSSCSS确定body {background: #84fab0;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);font-family: 'Lato', sans-serif;font-size: 14px;overflow: hidden;}.red {background-image: l...
vue-input-code-基于Vue.js 2.0+验证码输入组件。-Vue.js开发
05-27
vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --...
基于vue实现可搜索下拉框定制组件
08-27
基于 Vue 实现可搜索下拉框定制组件 本文将详细介绍基于 Vue 实现可搜索下拉框定制组件的方法和技术要点，旨在帮助读者更好地理解和运用 Vue Framework。 组件概述 在 Vue 中实现可搜索下拉框定制组件主要涉及到...
vue基于element的区间选择组件
10-18
这两个输入框可以使用 Element UI 的 `el-input` 组件实现，并通过 `v-model` 双向绑定到 Vue 数据模型上。表单的结构如下： ```html <el-input v-model="form.min" /> <!-- ... --> <el-input v-model=...
基于vue组件实现猜数字游戏
08-28
"基于Vue组件实现猜数字游戏" 基于Vue组件实现猜数字游戏是指使用Vue.js框架来构建一个猜数字游戏的组件。该游戏的主要功能是让用户输入一个数字，然后判断用户输入的数字是否正确。如果用户输入的数字太小或太大，...
基于vueelement的金额格式化组件
08-10
"基于vue-element的金额格式化组件"是针对这一需求而设计的，它将帮助我们在Vue.js应用中方便地展示和输入货币值。 Vue Element是一个结合了Element UI库的Vue.js插件，Element UI提供了一套美观、易用的组件，适用...
基于vue2.0的input输入框文字特效
12-10
这是一款基于vue2.0的input输入框文字特效。该input输入框特效在输入框聚焦时，为输入框添加多种动画效果，极大提高交互效果。
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”phone”,this.$route.query.mobile) 或者绑定到data里边的一个字符串，也是可以解决
Vue组件封装 ——input 输入框组件
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-31 1万+
一、基础准备工作 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)..
Vue3输入框（Input）
最新发布
Mr Dear的博客
07-25 8481
通过鼠标或键盘输入内容，是最基础的表单域的包装，支持：三种尺寸；自定义前缀和后缀；自定义前置和后置标签；清除功能；密码框；数字提示；总之，功能丰富，简单易用😁😁
基于Vue开发数字输入框组件
08-28
基于Vue的数字输入框组件开发涉及到了Vue组件的构建过程、数据绑定、事件处理和组件通信等多个知识点。下面将详细介绍这些知识点。 ### Vue组件构建 在Vue中，组件是可复用的Vue实例，可以拥有自己的模板、数据和...
vue-masked-input：Vue.js的蒙版输入组件
02-06
Vue.js 2.X的无效简单蒙版输入组件。 基于 。 安装 npm npm install vue-masked-input --save 用法 将其与v-model一起使用，就像带有mask属性的本地html输入一样： 以下格式字符定义了掩码的可编辑部分（请参阅 ...
vue自定义弹出询问框、输入框、提示框(附源码及演示视频)
gdgztt的专栏
01-17 1万+
遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定。
vue继承组件，双击实现表格编辑
好川的博客
08-14 3030
vue.extend 使用场景 需要频繁向 多个类型 vue组件中 导入组件，而且存在 频繁切换； （如果 v-if 和 v-else ，需要到每个向里面去添加 ，不太好 ） 调用 方法就去页面中 ，添加一条Message 提示 的vue组件 ，而且点击多次会多次弹出。............
vue实现input输入模糊查询(三种方式)
热门推荐
厚积薄发.
08-12 2万+
vue实现input输入模糊查询(三种方式)。vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。这里我是在 vue-cli 中完成的，完整代码如下。这里自己导入 vue，我是导入本地已经下载好的。vue 中通过watch 监听实现模糊查询。输入关键字模糊查询，名字和年龄都可以。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值