使用场景
用于密码类输入，固定为密码类型。默认 showPassword 为 true；需要禁止显示切换时设置为 false。模型值仍是字符串，示例只使用本地演示数据。
密码与可见性切换
点击眼睛图标切换可见状态。根据登录或设置密码场景配置 autocomplete。
密码与可见性切换
vue
<template>
<div class="example">
<AsamPassword
v-model="password"
v-bind="{ class: 'field', 'aria-label': '演示密码' }"
autocomplete="new-password"
placeholder="请输入密码"
clearable
:maxlength="24"
/>
<AsamPassword
v-model="locked"
v-bind="{ class: 'field', 'aria-label': '无切换密码' }"
:show-password="false"
/>
<output>已输入 {{ password.length }} 个字符</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPasswordBasicExample' });
import { ref } from 'vue';
import { AsamPassword } from '@asam-ui/ui';
const password = ref('demo-password');
const locked = ref('local-demo');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamPassword
v-model="password"
v-bind="{ class: 'field', 'aria-label': '演示密码' }"
autocomplete="new-password"
placeholder="请输入密码"
clearable
:maxlength="24"
/>
<AsamPassword
v-model="locked"
v-bind="{ class: 'field', 'aria-label': '无切换密码' }"
:show-password="false"
/>
<output>已输入 {{ password.length }} 个字符</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPasswordBasicExample' });
import { ref } from 'vue';
import { AsamPassword } from '@asam-ui/ui';
const password = ref('demo-password');
const locked = ref('local-demo');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>自定义密码图标
password-icon 插槽接收 visible，用它切换自定义图标。组件继续处理切换行为；插槽提供图标内容。示例同时组合 prefix、suffix、prepend、append，并显示编辑后的模型值。
自定义密码图标
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamPassword v-model="value" v-bind="{ class: 'field', 'aria-label': '自定义图标密码' }">
<template #prefix>
<Lock style="width: 16px" />
</template>
<template #suffix> 安全 </template>
<template #prepend> 账号 </template>
<template #append> 密码 </template>
<template #password-icon="{ visible }">
<component :is="visible ? View : Hide" style="width: 16px" />
</template>
</AsamPassword>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPasswordIconsExample' });
import { ref } from 'vue';
import { AsamPassword } from '@asam-ui/ui';
import { Lock, View, Hide } from '@asam-ui/icons-vue';
const value = ref('demo-secret');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamPassword v-model="value" v-bind="{ class: 'field', 'aria-label': '自定义图标密码' }">
<template #prefix>
<Lock style="width: 16px" />
</template>
<template #suffix> 安全 </template>
<template #prepend> 账号 </template>
<template #append> 密码 </template>
<template #password-icon="{ visible }">
<component :is="visible ? View : Hide" style="width: 16px" />
</template>
</AsamPassword>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPasswordIconsExample' });
import { ref } from 'vue';
import { AsamPassword } from '@asam-ui/ui';
import { Lock, View, Hide } from '@asam-ui/icons-vue';
const value = ref('demo-secret');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>实例可见状态
passwordVisible 返回实时密码显示状态；focus、select、clear、blur 用于编辑操作。
实例可见状态
vue
<template>
<div class="example">
<AsamPassword
ref="input"
v-model="value"
v-bind="{ class: 'field', 'aria-label': '实例密码' }"
/>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦密码 </AsamButton>
<AsamButton type="default" @click="input?.select()"> 选中密码 </AsamButton>
<AsamButton type="default" @click="input?.clear()"> 清空密码 </AsamButton>
<AsamButton type="default" @click="visible = input?.passwordVisible ?? false">
读取可见状态
</AsamButton>
</div>
<output>可见：{{ visible }}；字符数：{{ value.length }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPasswordInstanceExample' });
import { ref } from 'vue';
import { AsamPassword, AsamButton } from '@asam-ui/ui';
import type { AsamPasswordExpose } from '@asam-ui/ui';
const input = ref<AsamPasswordExpose>();
const value = ref('local-password');
const visible = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamPassword
ref="input"
v-model="value"
v-bind="{ class: 'field', 'aria-label': '实例密码' }"
/>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦密码 </AsamButton>
<AsamButton type="default" @click="input?.select()"> 选中密码 </AsamButton>
<AsamButton type="default" @click="input?.clear()"> 清空密码 </AsamButton>
<AsamButton type="default" @click="visible = input?.passwordVisible ?? false">
读取可见状态
</AsamButton>
</div>
<output>可见：{{ visible }}；字符数：{{ value.length }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPasswordInstanceExample' });
import { ref } from 'vue';
import { AsamPassword, AsamButton } from '@asam-ui/ui';
const input = ref();
const value = ref('local-password');
const visible = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档密度与继承
large / big / default / small 分别为四档密度。显式 size 覆盖继承；省略 size 时按组件、组、表单、ConfigProvider 到 default 解析。通过切换 provider 验证继承响应。
四档密度与继承
vue
<template>
<div class="example">
<div class="row">
<AsamPassword
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
model-value="demo"
/>
<AsamPassword
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
model-value="demo"
/>
<AsamPassword
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
model-value="demo"
/>
<AsamPassword
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
model-value="demo"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamPassword
v-bind="{ class: 'field', 'aria-label': '继承尺寸' }"
model-value="demo"
/>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPasswordSizesExample' });
import { ref } from 'vue';
import { AsamPassword, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="row">
<AsamPassword
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
model-value="demo"
/>
<AsamPassword
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
model-value="demo"
/>
<AsamPassword
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
model-value="demo"
/>
<AsamPassword
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
model-value="demo"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamPassword
v-bind="{ class: 'field', 'aria-label': '继承尺寸' }"
model-value="demo"
/>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPasswordSizesExample' });
import { ref } from 'vue';
import { AsamPassword, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
原单行 Input 的密码配置迁移为独立 AsamPassword：移除 type="password"，保留相应 v-model 与密码属性。showPassword 以及 password-icon 只在本页的专用契约中配置；多行职责见 Textarea。
API 阅读方式
下方 API 来自当前公开类型与运行默认值。默认值标为“未知 / 未声明”时，不代表 false、空值或未支持。省略 size 保留祖先上下文继承。省略 disabled 保留表单禁用继承；validateEvent 控制校验事件，不用 disabled 代替。
模型修饰符与真实更新类型
trim、number、lazy 按原生模型修饰协议承接。启用 number 时 update:modelValue 可能为数字；无法转换的文本仍为字符串。input/change 保留各自事件签名，不能从更新类型中删去合法数字。
模型修饰符与数字更新
vue
<template>
<div class="example">
<AsamPassword
v-model.trim.number.lazy="value"
aria-label="修饰符输入"
@update:model-value="record"
/>
<AsamButton type="default" native-type="button">移出焦点以提交</AsamButton>
<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>
<p class="example-paragraph">
输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy
在提交时更新。
</p>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamPassword } from '@asam-ui/ui';
import type { AsamPasswordEmits } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordModifiersExample' });
const value = ref<string | number>('');
const updates = ref<(string | number)[]>([]);
function record(...[value]: AsamPasswordEmits['update:modelValue']) {
updates.value.push(value);
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div class="example">
<AsamPassword
v-model.trim.number.lazy="value"
aria-label="修饰符输入"
@update:model-value="record"
/>
<AsamButton type="default" native-type="button">移出焦点以提交</AsamButton>
<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>
<p class="example-paragraph">
输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy
在提交时更新。
</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamPassword } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordModifiersExample' });
const value = ref('');
const updates = ref([]);
function record(...[value]) {
updates.value.push(value);
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>五入口表单继承与校验
本完整 TS/JS 组合实际实例化单行、密码、多行、建议和标签五个入口。省略各入口 disabled 以继承表单状态；validateEvent 控制各自 change/blur 自动校验。切换禁用不会清空模型，关闭自动校验不影响编辑。五页注册同一组合源码的自包含副本，复制当前示例即可运行，无需从其他组件页补齐文件。
五入口表单继承与校验
vue
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem
v-model="disabled"
aria-label="禁用五入口表单">禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent" aria-label="五入口自动校验">自动
change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
@validate="record"
>
<AsamFormItem
label="单行"
prop="input"
>
<AsamInput
v-model="model.input"
:validate-event="validateEvent"
aria-label="表单单行"
/>
</AsamFormItem>
<AsamFormItem
label="密码"
prop="password"
>
<AsamPassword
v-model="model.password"
:validate-event="validateEvent"
aria-label="表单密码"
/>
</AsamFormItem>
<AsamFormItem
label="多行"
prop="textarea"
>
<AsamTextarea
v-model="model.textarea"
:validate-event="validateEvent"
aria-label="表单多行"
/>
</AsamFormItem>
<AsamFormItem
label="建议"
prop="autocomplete"
>
<AsamAutocomplete
v-model="model.autocomplete"
:fetch-suggestions="suggestions"
:validate-event="validateEvent"
aria-label="表单建议"
/>
</AsamFormItem>
<AsamFormItem
label="标签"
prop="tags"
>
<AsamInputTag
v-model="model.tags"
:validate-event="validateEvent"
aria-label="表单标签"
/>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" native-type="button" @click="reset">重置模型和校验记录</AsamButton>
<AsamButton type="default" native-type="button">提交编辑</AsamButton>
<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamBaseForm,
AsamFormItem,
AsamInput,
AsamPassword,
AsamTextarea,
AsamAutocomplete,
AsamInputTag
} from '@asam-ui/ui';
import type { AsamBaseFormExpose } from '@asam-ui/ui';
defineOptions({ name: 'AsamFiveInputsFormExample' });
const model = ref({
input: '',
password: '',
textarea: '',
autocomplete: '',
tags: [] as string[]
});
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref<AsamBaseFormExpose>();
const rules = Object.fromEntries(
['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [
key,
[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]
])
);
const suggestions = [{ value: 'Alpha' }];
const validations = ref<{ prop: string; valid: boolean }[]>([]);
function record(prop: string | string[], valid: boolean) {
validations.value.push({ prop: String(prop), valid });
}
function reset() {
model.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };
validations.value = [];
form.value?.clearValidate();
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem
v-model="disabled"
aria-label="禁用五入口表单">禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent" aria-label="五入口自动校验">自动
change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
@validate="record"
>
<AsamFormItem
label="单行"
prop="input"
>
<AsamInput
v-model="model.input"
:validate-event="validateEvent"
aria-label="表单单行"
/>
</AsamFormItem>
<AsamFormItem
label="密码"
prop="password"
>
<AsamPassword
v-model="model.password"
:validate-event="validateEvent"
aria-label="表单密码"
/>
</AsamFormItem>
<AsamFormItem
label="多行"
prop="textarea"
>
<AsamTextarea
v-model="model.textarea"
:validate-event="validateEvent"
aria-label="表单多行"
/>
</AsamFormItem>
<AsamFormItem
label="建议"
prop="autocomplete"
>
<AsamAutocomplete
v-model="model.autocomplete"
:fetch-suggestions="suggestions"
:validate-event="validateEvent"
aria-label="表单建议"
/>
</AsamFormItem>
<AsamFormItem
label="标签"
prop="tags"
>
<AsamInputTag
v-model="model.tags"
:validate-event="validateEvent"
aria-label="表单标签"
/>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" native-type="button" @click="reset">重置模型和校验记录</AsamButton>
<AsamButton type="default" native-type="button">提交编辑</AsamButton>
<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamBaseForm,
AsamFormItem,
AsamInput,
AsamPassword,
AsamTextarea,
AsamAutocomplete,
AsamInputTag
} from '@asam-ui/ui';
defineOptions({ name: 'AsamFiveInputsFormExample' });
const model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref();
const rules = Object.fromEntries(
['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [
key,
[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]
])
);
const suggestions = [{ value: 'Alpha' }];
const validations = ref([]);
function record(prop, valid) {
validations.value.push({ prop: String(prop), valid });
}
function reset() {
model.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };
validations.value = [];
form.value?.clearValidate();
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>密码显隐与修饰符提交
showPassword 的显隐与 modelModifiers 交给原生 底层输入。ASAM 原样转发每次 update:modelValue、input、change、blur 和 clear，不按值去重、不补交通知。原生密码显隐或 lazy 组合可能在一次操作内发出多个通知；消费方应按原生时序处理。
密码显隐与修饰符提交
vue
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamButton type="default" native-type="button" @click="reset('none')">无修饰符</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('trim')">去除空白（trim）</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('number')">转换数字（number）</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('combined')">失焦更新、去除空白并转换数字</AsamButton>
<AsamPassword
v-model="value"
:model-modifiers="modifiers"
clearable
aria-label="密码提交"
@update:model-value="updates.push($event)"
@change="record"
/>
<AsamButton type="default" native-type="button">移出焦点提交密码</AsamButton>
<output>{{ JSON.stringify({ value, updates, changes }) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamPassword } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordCommitExample' });
const value = ref<string | number>('');
const modifiers = ref<{ trim?: true; number?: true; lazy?: true }>({});
const updates = ref<(string | number)[]>([]);
const changes = ref<{ value: string; trusted: boolean | null }[]>([]);
function record(value: string, event?: Event) {
changes.value.push({ value, trusted: event?.isTrusted ?? null });
}
function reset(mode: string) {
modifiers.value =
mode === 'combined'
? { trim: true, number: true, lazy: true }
: mode === 'none'
? {}
: { [mode]: true };
value.value = '';
updates.value = [];
changes.value = [];
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamButton type="default" native-type="button" @click="reset('none')">无修饰符</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('trim')">去除空白（trim）</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('number')">转换数字（number）</AsamButton>
<AsamButton type="default" native-type="button" @click="reset('combined')">失焦更新、去除空白并转换数字</AsamButton>
<AsamPassword
v-model="value"
:model-modifiers="modifiers"
clearable
aria-label="密码提交"
@update:model-value="updates.push($event)"
@change="record"
/>
<AsamButton type="default" native-type="button">移出焦点提交密码</AsamButton>
<output>{{ JSON.stringify({ value, updates, changes }) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamPassword } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordCommitExample' });
const value = ref('');
const modifiers = ref({});
const updates = ref([]);
const changes = ref([]);
function record(value, event) {
changes.value.push({ value, trusted: event?.isTrusted ?? null });
}
function reset(mode) {
modifiers.value =
mode === 'combined'
? { trim: true, number: true, lazy: true }
: mode === 'none'
? {}
: { [mode]: true };
value.value = '';
updates.value = [];
changes.value = [];
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>本入口 formatter/parser
下方完整 TS/JS 示例直接实例化 Password：formatter 添加显示前缀，parser 从真实编辑值移除前缀，v-model 保留原始文本。显隐切换保留格式化显示；“回填密码”从父级更新模型，再经 formatter 显示。此示例演示密码入口自身的编辑、模型与回填协议。
密码 formatter/parser 编辑与回填
vue
<template>
<div class="example">
<AsamPassword
v-model="value"
:formatter="formatter"
:parser="parser"
aria-label="格式化密码"
/>
<AsamButton type="default" @click="value = 'server'">回填密码</AsamButton>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamPassword, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordFormatExample' });
const value = ref<string | number>('seed');
function formatter(value: string | number) {
return 'ID:' + value;
}
function parser(value: string) {
return value.replace(/^ID:/, '');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="example">
<AsamPassword
v-model="value"
:formatter="formatter"
:parser="parser"
aria-label="格式化密码"
/>
<AsamButton type="default" @click="value = 'server'">回填密码</AsamButton>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamPassword, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordFormatExample' });
const value = ref('seed');
function formatter(value) {
return 'ID:' + value;
}
function parser(value) {
return value.replace(/^ID:/, '');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>原生委托与事件记录
下方完整 TS/JS 示例记录模型及事件顺序，并可切换禁用、只读和自动校验状态。 完整说明。
原生委托与事件记录
vue
<template>
<section class="native-comparison">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent">自动校验</AsamCheckboxItem>
<p class="example-paragraph">ASAM</p>
<AsamPassword
v-model="asam"
:disabled="disabled"
:readonly="readonly"
:validate-event="validateEvent"
show-password
aria-label="ASAM 原生委托"
@update:model-value="(...args) => record('ASAM', 'update:modelValue', ...args)"
@input="(...args) => record('ASAM', 'input', ...args)"
@change="(...args) => record('ASAM', 'change', ...args)"
@blur="(...args) => record('ASAM', 'blur', ...args)"
/>
<AsamButton type="default" native-type="button" @click="events = []"
>清空事件记录</AsamButton
>
<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamPassword } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordNativeDelegationExample' });
const asam = ref<string | number>('');
const disabled = ref(false);
const readonly = ref(false);
const validateEvent = ref(true);
const events = ref<{ source: string; event: string; values: unknown[] }[]>([]);
function record(source: string, event: string, ...values: unknown[]) {
events.value.push({
source,
event,
values: values.map((value) => (value instanceof Event ? value.type : value))
});
}
</script>
<style scoped>
.native-comparison {
display: grid;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="native-comparison">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent">自动校验</AsamCheckboxItem>
<p class="example-paragraph">ASAM</p>
<AsamPassword
v-model="asam"
:disabled="disabled"
:readonly="readonly"
:validate-event="validateEvent"
show-password
aria-label="ASAM 原生委托"
@update:model-value="(...args) => record('ASAM', 'update:modelValue', ...args)"
@input="(...args) => record('ASAM', 'input', ...args)"
@change="(...args) => record('ASAM', 'change', ...args)"
@blur="(...args) => record('ASAM', 'blur', ...args)"
/>
<AsamButton type="default" native-type="button" @click="events = []"
>清空事件记录</AsamButton
>
<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamPassword } from '@asam-ui/ui';
defineOptions({ name: 'AsamPasswordNativeDelegationExample' });
const asam = ref('');
const disabled = ref(false);
const readonly = ref(false);
const validateEvent = ref(true);
const events = ref([]);
function record(source, event, ...values) {
events.value.push({
source,
event,
values: values.map((value) => (value instanceof Event ? value.type : value))
});
}
</script>
<style scoped>
.native-comparison {
display: grid;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamPasswordProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
id | 等价于原生 input id 属性 | string | undefined | — |
size | 显式控件密度；省略时继承按钮组、表单和配置提供器。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
disabled | 是否禁用 | boolean | undefined | false |
modelValue | 输入值 | string | number | null | undefined | — |
modelModifiers | v-model 修饰符，参考 Vue 修饰符 | (AsamPasswordProps)["modelModifiers"] | — |
maxlength | 等价于原生 maxlength 属性 | string | number | undefined | — |
minlength | 等价于原生 minlength 属性 | string | number | undefined | — |
autocomplete | 原生输入自动完成；联合类型包含大量字面量时可能触发 TS2590，详见 Vue 问题 10514。 | string | undefined | — |
formatter | 格式化显示内容。 | ((value: string) => string) | undefined | — |
parser | 解析显示内容。 | ((value: string) => string) | undefined | — |
placeholder | 输入框占位文本 | string | undefined | — |
form | 原生输入的表单关联。 | string | undefined | — |
readonly | 原生输入的只读状态。 | boolean | undefined | false |
clearable | 是否显示清除按钮 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamPasswordProps)["clearIcon"] | — |
showPassword | 可切换显示状态的密码输入。 | boolean | undefined | false |
showWordLimit | 字符计数。 | boolean | undefined | false |
wordLimitPosition | 字数统计的位置，仅当 show-word-limit 为 true 时生效。 | enum"outside" | "inside"完整类型："outside" | "inside" | undefined | — |
suffixIcon | 后缀图标。 | (AsamPasswordProps)["suffixIcon"] | — |
prefixIcon | 前缀图标。 | (AsamPasswordProps)["prefixIcon"] | — |
containerRole | 容器角色；原生内部属性用于选择器组件。 | string | undefined | — |
tabindex | 等价于原生 tabindex 属性 | string | number | undefined | — |
validateEvent | 是否触发表单验证 | boolean | undefined | false |
inputStyle | 输入框或文本域元素样式。 | import("vue").StyleValue | false |
autofocus | 原生输入自动聚焦。 | boolean | undefined | false |
ariaLabel | 原生 aria-label属性 | string | undefined | — |
inputmode | 原生虚拟键盘输入模式。 | enum"text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal"完整类型："text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined | — |
name | 原生属性 | string | undefined | — |
countGraphemes | 按字素统计输入长度；设置后不使用原生 maxlength 和 minlength。 | ((value: string) => number) | undefined | — |
事件 AsamPasswordEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: string | number] | — |
input | — | [value: string] | — |
change | — | [value: string, event?: Event | undefined] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
clear | — | [event?: MouseEvent | undefined] | — |
mouseenter | — | [event: MouseEvent] | — |
mouseleave | — | [event: MouseEvent] | — |
keydown | — | [event: Event | KeyboardEvent] | — |
compositionstart | — | [event: CompositionEvent] | — |
compositionupdate | — | [event: CompositionEvent] | — |
compositionend | — | [event: CompositionEvent] | — |
插槽 AsamPasswordSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
prefix | — | (() => unknown) | undefined | — |
suffix | — | (() => unknown) | undefined | — |
prepend | — | (() => unknown) | undefined | — |
append | — | (() => unknown) | undefined | — |
password-icon | — | ((props: { visible: boolean; }) => unknown) | undefined | — |
实例方法与状态 AsamPasswordExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
input | — | HTMLInputElement | undefined | — |
textarea | — | HTMLTextAreaElement | undefined | — |
ref | — | HTMLInputElement | HTMLTextAreaElement | undefined | — |
textareaStyle | — | import("vue").StyleValue | — |
autosize | — | (AsamPasswordExpose)["autosize"] | — |
isComposing | — | boolean | — |
passwordVisible | — | boolean | — |
focus | — | () => void | — |
blur | — | () => void | — |
select | — | () => void | — |
clear | — | (event?: MouseEvent) => void | — |
resizeTextarea | — | () => void | — |
用法与契约补充说明
原生委托与事件记录
下方完整 TS/JS 示例记录模型及事件顺序，并可切换禁用、只读和自动校验状态。省略的基础参数使用原生 defaults；显式 undefined/null/false 原样传入，合法值范围见 API。四档 size 是 ASAM 的视觉桥接；Password 额外固定 type=password，并在省略 showPassword 时启用显隐入口。
关联组件
参数与事件补充说明
参数与事件说明
id
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
modelModifiers
必填：否；声明来源：ASAM 声明。
modelModifiers 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
modelModifiers.lazy:true | undefined— 上游声明枚举：
truemodelModifiers.number:true | undefined— 上游声明枚举：
truemodelModifiers.trim:true | undefined— 上游声明枚举：
true
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
maxlength
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
minlength
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
autocomplete
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'off'（2.14.7；源码事实，未作为 ASAM 运行实测）
formatter
必填：否；声明来源：ASAM 声明。
formatter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
parser
必填：否；声明来源：ASAM 声明。
parser 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
placeholder
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
form
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
readonly
必填：否；声明来源：ASAM 声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：ASAM 声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPasswordProps)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
showPassword
必填：否；声明来源：ASAM 声明。
showPassword 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showWordLimit
必填：否；声明来源：ASAM 声明。
showWordLimit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
wordLimitPosition
必填：否；声明来源：ASAM 声明。
wordLimitPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："outside" / "inside"
默认值与来源
未知 / 未声明固定上游文档默认："inside"（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'inside'（2.14.7；源码事实，未作为 ASAM 运行实测）
suffixIcon
必填：否；声明来源：ASAM 声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPasswordProps)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
prefixIcon
必填：否；声明来源：ASAM 声明。
prefixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPasswordProps)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
containerRole
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
inputStyle
必填：否；声明来源：ASAM 声明。
inputStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable({} as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
autofocus
必填：否；声明来源：ASAM 声明。
autofocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
ariaLabel
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
inputmode
必填：否；声明来源：ASAM 声明。
inputmode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："text" / "email" / "search" / "tel" / "url" / "none" / "numeric" / "decimal"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
countGraphemes
必填：否；声明来源：ASAM 声明。
countGraphemes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): number
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamPasswordProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamPasswordProps, AsamControlSize, AsamPasswordExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPasswordProps
type PublicContract = {
readonly "id"?: string | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "disabled"?: boolean | undefined;
readonly "modelValue"?: string | number | null | undefined;
readonly "modelModifiers"?: (AsamPasswordProps)["modelModifiers"];
readonly "maxlength"?: string | number | undefined;
readonly "minlength"?: string | number | undefined;
readonly "autocomplete"?: string | undefined;
readonly "formatter"?: ((value: string) => string) | undefined;
readonly "parser"?: ((value: string) => string) | undefined;
readonly "placeholder"?: string | undefined;
readonly "form"?: string | undefined;
readonly "readonly"?: boolean | undefined;
readonly "clearable"?: boolean | undefined;
readonly "clearIcon"?: (AsamPasswordProps)["clearIcon"];
readonly "showPassword"?: boolean | undefined;
readonly "showWordLimit"?: boolean | undefined;
readonly "wordLimitPosition"?: "outside" | "inside" | undefined;
readonly "suffixIcon"?: (AsamPasswordProps)["suffixIcon"];
readonly "prefixIcon"?: (AsamPasswordProps)["prefixIcon"];
readonly "containerRole"?: string | undefined;
readonly "tabindex"?: string | number | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "inputStyle"?: import("vue").StyleValue;
readonly "autofocus"?: boolean | undefined;
readonly "ariaLabel"?: string | undefined;
readonly "inputmode"?: "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
readonly "name"?: string | undefined;
readonly "countGraphemes"?: ((value: string) => number) | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
input
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
mouseenter
必填：是；声明来源：ASAM 声明。
mouseleave
必填：是；声明来源：ASAM 声明。
keydown
必填：是；声明来源：ASAM 声明。
compositionstart
必填：是；声明来源：ASAM 声明。
compositionupdate
必填：是；声明来源：ASAM 声明。
compositionend
必填：是；声明来源：ASAM 声明。
AsamPasswordEmits 公开类型视图
ts
import type { AsamPasswordEmits } from '@asam-ui/ui';
// AsamPasswordEmits
type PublicContract = {
"update:modelValue": [value: string | number];
"input": [value: string];
"change": [value: string, event?: Event | undefined];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"clear": [event?: MouseEvent | undefined];
"mouseenter": [event: MouseEvent];
"mouseleave": [event: MouseEvent];
"keydown": [event: Event | KeyboardEvent];
"compositionstart": [event: CompositionEvent];
"compositionupdate": [event: CompositionEvent];
"compositionend": [event: CompositionEvent];
};参数与事件说明
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
suffix
必填：否；声明来源：ASAM 声明。
suffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prepend
必填：否；声明来源：ASAM 声明。
prepend 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
append
必填：否；声明来源：ASAM 声明。
append 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
password-icon
必填：否；声明来源：ASAM 声明。
password-icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { visible: boolean; }): unknown
AsamPasswordSlots 公开类型视图
ts
import type { AsamPasswordSlots } from '@asam-ui/ui';
// AsamPasswordSlots
type PublicContract = {
"prefix"?: (() => unknown) | undefined;
"suffix"?: (() => unknown) | undefined;
"prepend"?: (() => unknown) | undefined;
"append"?: (() => unknown) | undefined;
"password-icon"?: ((props: { visible: boolean; }) => unknown) | undefined;
};响应式实例状态与基础编辑操作。
参数与事件说明
input
必填：是；声明来源：ASAM 声明。
input 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
textarea
必填：是；声明来源：ASAM 声明。
textarea 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
ref
必填：是；声明来源：ASAM 声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
textareaStyle
必填：是；声明来源：ASAM 声明。
textareaStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
autosize
必填：是；声明来源：ASAM 声明。
autosize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
autosize.minRows:number | undefined— 上游声明autosize.maxRows:number | undefined— 上游声明
isComposing
必填：是；声明来源：ASAM 声明。
isComposing 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
passwordVisible
必填：是；声明来源：ASAM 声明。
passwordVisible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
select
必填：是；声明来源：ASAM 声明。
select 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
clear
必填：是；声明来源：ASAM 声明。
clear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: MouseEvent | undefined): void
resizeTextarea
必填：是；声明来源：ASAM 声明。
resizeTextarea 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamPasswordExpose 公开类型视图
ts
import type { AsamPasswordExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPasswordExpose
type PublicContract = {
readonly "input": HTMLInputElement | undefined;
readonly "textarea": HTMLTextAreaElement | undefined;
readonly "ref": HTMLInputElement | HTMLTextAreaElement | undefined;
readonly "textareaStyle": import("vue").StyleValue;
readonly "autosize": (AsamPasswordExpose)["autosize"];
readonly "isComposing": boolean;
readonly "passwordVisible": boolean;
"focus": () => void;
"blur": () => void;
"select": () => void;
"clear": (event?: MouseEvent) => void;
"resizeTextarea": () => void;
};