输入框
基本使用
vue
<template>
<jp-input v-model="value" placeholder="请输入内容"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
</script>
prefixIcon
vue
<template>
<jp-input v-model="value" prefix-icon="jp-icon-search" placeholder="请输入内容" @iconClick="prefixIconClick"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
const prefixIconClick = () => {
console.log('prefixIconClick')
}
</script>
suffixIcon
vue
<template>
<jp-input v-model="value" suffix-icon="jp-icon-search" placeholder="请输入内容" @iconClick="suffixIconClick"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
const suffixIconClick = () => {
console.log('suffixIconClick')
}
</script>
disabled
vue
<template>
<jp-input v-model="value" disabled placeholder="请输入内容"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
</script>
密码框
vue
<template>
<jp-input v-model="value" type="password" placeholder="请输入密码"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
</script>
maxlength
vue
<template>
<jp-input v-model="value" :maxlength="5" placeholder="请输入内容"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
</script>
number
vue
<template>
<jp-input v-model="value" type="number" placeholder="请输入内容"></jp-input>
</template>
<script lang="ts" setup>
const value = ref()
</script>
digit 是否小数点
输入框类型:type <<< ../src/pages/cmp/jp-input/digit.vue
textarea
多行文本自动高度:auto-height <<< ../src/pages/cmp/jp-input/textarea.vue
props
| 属性名 | 描述 | 示例值 |
|---|---|---|
| value | 输入内容 | |
| type | 输入框的类型（默认 text） | text，textarea，password，... |
| clearable | 是否显示右侧清空内容的图标控件，点击可清空输入框内容（默认 true） | true |
| autoHeight | 是否自动增高输入区域，type 为 textarea 时有效（默认 true） | true |
| placeholder | 输入框的提示文字 | |
| placeholderStyle | placeholder 的样式(内联样式，字符串)，如"color: #ddd" | |
| focus | 是否自动获得焦点（默认 false） | false |
| disabled | 是否禁用（默认 false） | false |
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度（默认 140） | 140，-1 |
| confirmType | 设置键盘右下角按钮的文字，仅在 type="text"时生效（默认 done） | done |
| clearSize | 清除图标的大小，单位 px（默认 15） | 15 |
| prefixIcon | 输入框头部图标 | |
| suffixIcon | 输入框尾部图标 | |
| trim | 是否自动去除两端的空格 | both，left，right，start，end，all，none |
| inputBorder | 是否显示 input 输入框的边框（默认 true） | true |
| passwordIcon | type=password 时是否显示小眼睛图标 | |
| styles | 自定义颜色 |
| 事件名 | 描述 |
|---|---|
| input | 输入框内容发生变化时触发 |
| focus | 输入框获得焦点时触发 |
| blur | 输入框失去焦点时触发 |
| confirm | 点击完成按钮时触发 |
| iconClick | 点击图标时触发 |