mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 04:37:47 +08:00
f78407a409
* fix(components): empty icon component judgment * revert: globals components * fix(components): el-icon missing import * fix: use shallowRef for icon components * refactor: remove shallowRef * fix: remove unused code * fix: social-link icon size * fix: time picker icon * fix: v-if judge
58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<div class="demo-input-suffix">
|
|
<span class="demo-input-label">Using attributes</span>
|
|
<el-row :gutter="20">
|
|
<el-input
|
|
v-model="input1"
|
|
placeholder="Pick a date"
|
|
:suffix-icon="Calendar"
|
|
/>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-input
|
|
v-model="input2"
|
|
placeholder="Type something"
|
|
:prefix-icon="Search"
|
|
/>
|
|
</el-row>
|
|
</div>
|
|
<div class="demo-input-suffix">
|
|
<span class="demo-input-label">Using slots</span>
|
|
<el-row :gutter="20">
|
|
<el-input v-model="input3" placeholder="Pick a date">
|
|
<template #suffix>
|
|
<el-icon class="el-input__icon"><calendar /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-input v-model="input4" placeholder="Type something">
|
|
<template #prefix>
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Calendar, Search } from '@element-plus/icons'
|
|
const input1 = ref('')
|
|
const input2 = ref('')
|
|
const input3 = ref('')
|
|
const input4 = ref('')
|
|
</script>
|
|
|
|
<style>
|
|
.demo-input-label {
|
|
display: inline-block;
|
|
width: 130px;
|
|
}
|
|
|
|
.demo-input-suffix {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|