input.md
1.42 KB
Input 输入框
输入框组件，支持特殊业务场景格式化
8e89ea2d82036f4fb1542170a46dadc46117f85c/examples/views/docs/component/input.md#">基本用法
配置type属性设置类型
::: snippet 支持text, bankCard, password, phone, money, digit，默认为text
<template>
<div>
<div class="input-field">
提交值：{{ model }}
</div>
<div class="input-field">
常规输入：<zui-input v-model="model" placeholder="常规输入" clearable />
</div>
<div class="input-field">
银行卡输入：<zui-input v-model="model" placeholder="银行卡输入" type="bankCard" />
</div>
<div class="input-field">
手机号输入：<zui-input v-model="model" placeholder="手机号输入" type="phone" />
</div>
<div class="input-field">
金额输入：<zui-input v-model="model" placeholder="金额输入" type="money" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
model: ''
}
}
}
</script>
<style>
.input-field {
padding: 10px;
border-bottom: 1px solid rgba(151, 151, 151, 0.1);
}
</style>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value | 值 | String,Number | - | '' placeholder | 值 | String,Number | - | '' type | 类型 | String | text,bankCard,password,phone,money,digit | text clearable | 是否可清除 | Boolean | - | false disabled | 是否禁用 | Boolean | - | false readonly | 是否只读 | Boolean | - | false