✨(input): 新增 prefix-icon 与 suffix-icon 属性
更新文档
This commit is contained in:
parent
11bb97ca96
commit
dae5a0c53a
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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 允许清空
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user