(input): 新增 prefix-icon 与 suffix-icon 属性

更新文档
This commit is contained in:
就眠儀式 2022-06-11 00:26:39 +08:00
parent 11bb97ca96
commit dae5a0c53a
3 changed files with 41 additions and 8 deletions

View File

@ -22,7 +22,7 @@
border-style: solid; border-style: solid;
display: inline-flex; display: inline-flex;
border-color: var(--input-border-color); border-color: var(--input-border-color);
border-radius: var(--input-border-radius); border-radius: var(--input-border-radius);
} }
.layui-input-wrapper:focus-within { .layui-input-wrapper:focus-within {
@ -33,7 +33,6 @@
display: flex; display: flex;
flex: none; flex: none;
align-items: center; align-items: center;
padding-left: 8px;
} }
.layui-input-suffix { .layui-input-suffix {
@ -42,12 +41,18 @@
align-items: center; align-items: center;
} }
.layui-input-prefix-icon,
.layui-input-suffix-icon {
width: 38px;
text-align: center;
}
.layui-input-clear { .layui-input-clear {
flex: none; flex: none;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 10px; padding-right: 10px;
color: rgba(0, 0, 0, 0.45) color: rgba(0, 0, 0, 0.45);
} }
.layui-input:hover { .layui-input:hover {
@ -60,4 +65,4 @@
.layui-input::-webkit-input-placeholder { .layui-input::-webkit-input-placeholder {
line-height: 1.3; line-height: 1.3;
} }

View File

@ -21,6 +21,8 @@ export interface LayInputProps {
allowClear?: boolean; allowClear?: boolean;
autofocus?: boolean; autofocus?: boolean;
autocomplete?: string; autocomplete?: string;
prefixIcon?: string;
suffixIcon?: string;
} }
const props = withDefaults(defineProps<LayInputProps>(), { const props = withDefaults(defineProps<LayInputProps>(), {
@ -74,8 +76,9 @@ const classes = computed(() => {
<template> <template>
<div class="layui-input-wrapper"> <div class="layui-input-wrapper">
<span class="layui-input-prefix" v-if="slots.prefix"> <span class="layui-input-prefix" v-if="slots.prefix || props.prefixIcon">
<slot name="prefix"></slot> <slot name="prefix" v-if="slots.prefix"></slot>
<lay-icon v-else :type="props.prefixIcon" class="layui-input-prefix-icon"></lay-icon>
</span> </span>
<input <input
:type="type" :type="type"
@ -93,8 +96,9 @@ const classes = computed(() => {
@blur="onBlur" @blur="onBlur"
@change="onChange" @change="onChange"
/> />
<span class="layui-input-suffix" v-if="slots.suffix"> <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
<slot name="suffix"></slot> <slot name="suffix" v-if="slots.suffix"></slot>
<lay-icon v-else :type="props.suffixIcon" class="layui-input-suffix-icon"></lay-icon>
</span> </span>
<span class="layui-input-clear" v-if="allowClear && hasContent"> <span class="layui-input-clear" v-if="allowClear && hasContent">
<lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon> <lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>

View File

@ -83,6 +83,30 @@ export default {
::: :::
::: title 设置图标
:::
::: demo
<template>
<lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
</lay-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 允许清空 ::: title 允许清空
::: :::