mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
3387031d21
* feat(components): [input] add `password-icon` slot * Update docs/en-US/component/input.md * docs: simply example * docs: improve example --------- Co-authored-by: rzzf <cszhjh@gmail.com>
41 lines
791 B
Vue
41 lines
791 B
Vue
<template>
|
|
<div class="input-group">
|
|
<el-input
|
|
v-model="input"
|
|
style="width: 240px"
|
|
type="password"
|
|
placeholder="Please input password"
|
|
show-password
|
|
/>
|
|
<el-input
|
|
v-model="input"
|
|
style="width: 240px"
|
|
type="password"
|
|
placeholder="Please input password"
|
|
show-password
|
|
>
|
|
<template #password-icon="{ visible }">
|
|
<el-icon :size="16">
|
|
<Unlock v-if="visible" />
|
|
<Lock v-else />
|
|
</el-icon>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { Lock, Unlock } from '@element-plus/icons-vue'
|
|
|
|
const input = ref('')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1em;
|
|
}
|
|
</style>
|