保 洁 阿 姨

拥有60+年的前端设计经验

60+Years of front-end design experience

luzhou·sichuan

www.usuuu.com

Web网页设计:70888820

2个视频(Video)

首页/实验室/闲暇之余写了一个input组件/

闲暇之余写了一个input组件

发布于:2022-12-22 03:09:44/浏览量:232/IP属地:四川省

预览

image

HTML

<template>
    <div class="ui-input">
        <div class="title">
            <span>{{ title }}</span>
        </div>
        <div class="value">
            <textarea
                v-if="type == 'textarea'"
                class="textarea"
                :value="modelValue"
                :rows="rows"
                :placeholder="placeholder"
                @input="inputHandler"
                @focus="focusHandler"
                @blur="blurHandler"
            />
            <input v-else
                   :type="type"
                   password
                   :value="modelValue"
                   class="input"
                   :placeholder="placeholder"
                   :disabled="disabled"
                   autocomplete="off"
                   @input="inputHandler"
                   @focus="focusHandler"
                   @blur="blurHandler"
            >
        </div>
    </div>
</template>

TypeScript

const props = withDefaults(
    defineProps<{
        rows?: string,
        title?: string,
        type?: string,
        disabled?: boolean,
        placeholder?: string,
        modelValue?: any
    }>(),
    {
        rows: '',
        title: '',
        type: 'text',
        disabled: false,
        placeholder: '',
        modelValue: ''
    }
)
const emits = defineEmits<{
    (e: 'update:modelValue', modelValue: any): void,
    (e: 'change', modelValue: any): void,
    (e: 'blur', modelValue: any): void,
    (e: 'focus', modelValue: any): void
}>()
const inputEl = ref()
const controlChange: any = inject('usuuu', '')
const controlChangeEvent = (val: any, type?: string) => {
    controlChange && controlChange(val, type)
}
const blurHandler = (e: Event) => {
    emits('blur', e)
    const { value } = e.target as HTMLInputElement
    controlChangeEvent(value as any, 'blur' as string)
}
const focusHandler = (e: Event) => {
    emits('focus', e)
    const { value } = e.target as HTMLInputElement
    controlChangeEvent(value, 'focus')
}
const inputHandler = (e: Event) => {
    const { value } = e.target as HTMLInputElement
    emits('update:modelValue', value)
    controlChangeEvent(value, 'change')
}
const focus = () => {
    inputEl.value.focus()
}
const blur = () => {
    inputEl.value.blur()
}
watch(() => props.modelValue, (v: any) => { 
    controlChangeEvent(v, 'mounted')
})
onMounted(() => {
    controlChangeEvent(props.modelValue, 'mounted')
})
defineExpose({ blur, focus })

less

.ui-input {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    line-height: 24px;
    background-color: #fff;
    &:after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 16px;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        transform: scaleY(.5);
    }
    .title {
        width: 6.2em;
        font-size: 13px;
        flex: none;
        margin-right: 12px;
        box-sizing: border-box;
        text-align: left;
        word-wrap: break-word;
    }
    .value {
        font-size: 13px;
        .input {
            display: block;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            margin: 0;
            padding: 0;
            color: #707070;
            line-height: inherit;
            text-align: left;
            border: 0;
            resize: none;
            user-select: auto;
            background-color: transparent;
        }
        .input::-webkit-input-placeholder {
            color: #c8c9cc
        }
        .input::placeholder {
            color: #c8c9cc
        }
    }
    .textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        color: #747474;
        line-height: inherit;
        text-align: left;
        background-color: transparent;
        border: 0;
        resize: none;
        user-select: auto;
    }
    .textarea::-webkit-input-placeholder {
        color: #c8c9cc
    }
    .textarea::placeholder {
        color: #c8c9cc
    }
}

例子

<ui-input v-model="vlaue" title="邮箱" placeholder="请输入邮箱" />
<ui-input v-model="vlaue" title="密码" type="password" placeholder="请输入密码" />
<ui-input v-model="vlaue" title="禁用" disabled placeholder="禁用不可输入" />
<ui-input v-model="vlaue" title="textarea" type="textarea" rows="3" placeholder="textarea" />

API

参数

说明

类型

v-model

当前输入的值

number/string

title

标题

string

disabled

是否禁用

boolean

type

类型(textarea/password)

string

rows

类型为textarea设置

string

placeholder

简介

string

© 未经允许禁止转载
回复

…喝醉de鱼oO

10天前

IP属地福建省

非常棒!

赞同(0)
回复Ta
回复

签到奖励积分

站点公告

  • Web网页设计交流群:70888820
  • QQ号为523179414的狗,谢绝访问

版权申明

本站原创内容版权遵循 CC-BY-NC-SA 协议规定,转载请注明出处.本站部分资源收集于网络,只做学习和交流使用,版权归原作者所有.