input组件

组件基本代码

<template>
    <div class="tls-input" :class="{'tls-input-suffix':showSuffix}">
        <input
            :class="{'is-disabled':disabled}"
            :type="showPassword?(passwordVisible?'text':'password'):type"
            class="tls-input__inner"
            :placeholder="placeholder"
            :name="name"
            :disabled="disabled"
            @input="handleInput"
            :value="value"
        />
        <span class="tls-input__suffix" v-if="showSuffix">
            <i class="tls-icon-delete" v-if="showClearIcon" @click="clear"></i>
            <i
                class="tls-icon-browse"
                v-if="showPasswordIcon&&!passwordVisible"
                @click="handlePasswordVisible"
            ></i>
            <i
                class="tls-icon-browse_fill"
                v-if="showPasswordIcon&&passwordVisible"
                @click="handlePasswordVisible"
            ></i>
        </span>
    </div>
</template>

组件可接受的参数props

value（这个是input组件最重要的点），input组件要接收父组件传过来的值，而且要可以用v-model来传值。这时候组件的value默认就是父组件v-model绑定的值

value: [String, Number],

name（为了后期集成写表单做的）

        name: {
            type: String,
            default: ""
        }

placeholder

        type: {
            type: String,
            default: ""
        }

type

        type: {
            type: String,
            default: "text"
        }

disabled

        disabled: {
            type: Boolean,
            default: false
        }

clearable

        clearable: {
            type: Boolean,
            default: false
        }

showPassword(是否显示密码)

        showPassword: {
            type: Boolean,
            default: false
        }

计算属性

这个学过vue的朋友基本都知道，具体使用就不提了，有需要可以直接看官网文档，这里我是只是用来让html代码看齐来比较简洁而已，也可以不使用

    computed: {
        //是否显示清除icon或者显示密码icon的外层样式
        showSuffix() {
            return this.clearable || this.showPassword;
        },
        //是否显示清除icon
        showClearIcon() {
            return this.clearable && this.value;
        },
        //是否显示显示密码icon
        showPasswordIcon() {
            return this.showPassword && this.value;
        }
    }

<div class="tls-input" :class="{'tls-input-suffix':showSuffix}">
</div>

上面的也可以改写成（效果一样）

<div class="tls-input" :class="{'tls-input-suffix':clearable || showPassword}">
</div>

组件事件

handleInput（用户改变值要传到父组件）,这里为什么不能直接去修改父组件传过来的值大家应该知道吧。

        handleInput(e) {
            this.$emit("input", e.target.value);
        },

clear（清除文本）

        clear() {
            this.$emit("input", "");
        },

上面组件基本代码有这一行，这里解释一下，就是组件如果没有传是否显示密码的值就是默认使用props的值，如果有传，我们就通过passwordVisible来控制，而不是直接用父组件传的type

:type="showPassword?(passwordVisible?'text':'password'):type"

handlePasswordVisible（是否显示密码）本质就是切换input的type类型，但是我们又不能直接去修改父组件传过来的type，所以我们需要在子组件内部自己定义一个变量来控制input的type

    data() {
        return {
            passwordVisible: false
        };
    },

        handlePasswordVisible() {
            // 切换type类型
            this.passwordVisible = !this.passwordVisible;
        }

组件样式

这里样式比较麻烦在我看来只有设置icon的，我这里就贴关于icon，其他的css欢迎自取

.tls-input-suffix {
    .tls-input__inner {
        padding-right: 30px;
    }
    .tls-input__suffix {
        position: absolute;
        height: 100%;
        right: 10px;
        top: 0;
        line-height: 40px;
        text-align: center;
        color: #c0c4cc;
        transition: all 0.3s;
        z-index: 900;
        i {
            color: #c0c4cc;
            font-size: 14px;
            cursor: pointer;
            transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
    }
}

怎么用

        <tls-input v-model="num" style="width:300px" clearable placeholder="请输入用户名称"></tls-input>
        <tls-input
            v-model="num1"
            style="width:300px"
            type="password"
            placeholder="请输入用户名称"
            show-password
        ></tls-input>

日常吐槽

写完了一篇关于vue如何进行服务端渲染之后，终于回到我亲爱的组件库，哈哈哈哈哈.....