element-plus/docs/examples/input/with-icon.vue
Xc 48a056b051
docs: modify layout style (#10514)
* docs: modify layout style

* docs: modify nav padding

* docs: update style

* feat: update

* docs: upadte

* docs: update

* docs: modify layout style

* docs: update style

* feat: update

* docs: upadte

* docs: update

* docs: update

* docs: update

* docs: remove empty script

* docs: update

---------

Co-authored-by: kooriookami <bingshuanglingluo@163.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
2024-02-19 20:10:44 +08:00

44 lines
1.0 KiB
Vue

<template>
<div class="flex gap-4 mb-4">
<span>Using attributes</span>
<el-input
v-model="input1"
style="width: 240px"
placeholder="Pick a date"
:suffix-icon="Calendar"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Type something"
:prefix-icon="Search"
/>
</div>
<div class="flex gap-4">
<span>Using slots</span>
<el-input v-model="input3" style="width: 240px" placeholder="Pick a date">
<template #suffix>
<el-icon class="el-input__icon"><calendar /></el-icon>
</template>
</el-input>
<el-input
v-model="input4"
style="width: 240px"
placeholder="Type something"
>
<template #prefix>
<el-icon class="el-input__icon"><search /></el-icon>
</template>
</el-input>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
</script>