Easy-Collective-UI

Appearance

Input 输入框 ​

通过鼠标或键盘输入字符

基础用法 ​

s
<template>
    <ec-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

禁用状态 ​

通过 disabled 属性指定是否禁用 input 组件

s
<template>
    <ec-input v-model="input" style="width: 240px" disabled placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

一键清空 ​

使用clearable属性即可得到一个可一键清空的输入框

s
<template>
    <ec-input v-model="input" style="width: 240px" placeholder="Please input" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

密码框 ​

使用show-password属性即可得到一个可切换显示隐藏的密码框

s
<template>
    <ec-input v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

带图标的输入框 ​

带有图标标记输入类型

prefix和suffix命名的插槽能正常工作。

s
<script setup lang="ts">
import { ref } from 'vue'
const input3 = ref('')
const input4 = ref('')
</script>

<template>
    <div class="container">
        <div class="myinput">
            <ec-input v-model="input3" placeholder="Pick a date">
                <template #suffix>
                    <ec-icon icon="calendar"></ec-icon>
                </template>
            </ec-input>
        </div>
        <div class="myinput">
            <ec-input class="myinput" v-model="input4" placeholder="Type something">
                <template #prefix>
                    <ec-icon icon="search"></ec-icon>
                </template>
            </ec-input>
        </div>
    </div>
</template>


<style scoped>
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.myinput {
    width: 380px;
}
</style>

文本域​ ​

用于输入多行文本信息可缩放的输入框。 添加type="textarea"属性来将 input 元素转换为原生的textarea元素。

s
<template>
    <ec-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

尺寸​ 使用size属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。

large:

default:

small:

s
<script lang="ts" setup>
import { ref } from 'vue'
const input1 = ref('')
const input2 = ref('')
</script>


<template>
    <div class="myInput">
        <p>large:</p>
        <ec-input v-model="input1" size="large" placeholder="Please input" />
    </div>
    <div class="myInput">
        <p>default:</p>
        <ec-input v-model="input1" placeholder="Please input" />
    </div>
    <div class="myInput">
        <p>small:</p>
        <ec-input v-model="input2" size="small" placeholder="Please input" />
    </div>
</template>

<style scoped>
.myInput {
    margin-top: 10px;
}
</style>

Input API ​

Prop ​

参数说明类型可选值默认值
id输入框的唯一标识符string——
modelValue绑定值string——
type输入框类型string—text
size输入框尺寸"large" | "small"large、small—
disabled是否禁用输入框boolean—false
clearable是否可清空boolean—false
showPassword是否显示密码切换按钮boolean—false
placeholder输入框占位文本string——
readonly是否只读boolean—false
autocomplete原生属性，自动完成string——
autofocus是否自动获取焦点boolean—false
form原生属性，所属表单的 idstring——

Slot ​

名称说明
prefix输入框头部内容
suffix输入框尾部内容
prepend输入框前置内容
append输入框后置内容

Event ​

事件名说明回调参数
update:modelValue输入值变化时触发(value: string)
input输入时触发(value: string)
change失去焦点且值变化时触发(value: string)
focus输入框获得焦点时触发(event: FocusEvent)
blur输入框失去焦点时触发(event: FocusEvent)
clear点击清除按钮时触发—

Exposes ​

方法名说明参数
focus使输入框获取焦点—
blur使输入框失去焦点—
select选中输入框中的文本内容—
clear清空输入框内容—

Copyright © 2024-present Mzmm