LamboInputText 普通输入框

介绍

LamboInputText是一个基于vant拓展的输入框的表单组件，支持在表单状态下的输入框的操作。

引入

import Vue from 'vue';
import LamboInputText from '@lambo-design-mobile/lambo-input-text';
 
Vue.use(LamboInputText);

代码演示

基础用法

<van-cell-group>
    <input-text title="普通输入框" v-model="inputText" :maxlength="10" @input="inputChange" border/>
    <input-text title="只读输入框" v-model="readOnlyText" :maxlength="10" :readonly="true" border/>
    <input-text title="必填输入框" v-model="mustText" :maxlength="10" must border/>
</van-cell-group>

import { Toast } from '@lambo-design-mobile/core'
import { CellGroup } from '@lambo-design-mobile/core'
export default {
    name: "index",
    components:{
        vanCellGroup:CellGroup
    },
    data(){
        return{
            inputText:'',
            readOnlyText:'只读',
            mustText:''
        }
    },
    methods:{
        inputChange(value){
            if(value){
                Toast({
                    message:value
                })
                console.log(value)
            }
        }
    }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 左侧标题 | String | '' | - | | type | 输入框类型, 可选值为 tel digit number textarea password 等 | String | text | - | | placeholder | 输入框占位提示文字 | String | '请输入' | - | | v-model (value) | 当前输入的值 | number/String | - | - | | maxlength | 输入的最大字符数 | number/String | 20 | - | | must | 是否必填 | Boolean | false | - | | readonly | 是否只读 | Boolean | false | - | | border | 是否展示内边框 | Boolean | true | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | input | 输入框内容变化时触发 | value: string (当前输入的值) |