GG

# gg-input-btn 自带按钮的输入框

gg-input-btn

自带按钮的文本输入框，一般和表单配合使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggInputBtn from '@/components/gg-input-btn/gg-input-btn.vue'
export default {
    components: {ggInputBtn}
}
1
2
3
4

在 template 中使用组件

 <gg-nav-group label="输入框">
    <gg-input-btn label="真实姓名" v-model="formData.name" labelWidth="0" placeholder="请输入您的真实姓名" @click="onClick" />
</gg-nav-group>
<gg-nav-group label="[layout=col]的输入框">
    <gg-input-btn label="真实姓名" v-model="formData.name" placeholder="请输入您的真实姓名" layout="col" @click="onClick" />
</gg-nav-group>
<gg-nav-group label="带有tip参数的输入框">
    <gg-input-btn label="姓名" v-model="formData.name" placeholder="请输入您的真实姓名" :tip="tip" @click="onClick" />
</gg-nav-group>
<gg-nav-group label="禁止使用按钮">
    <gg-input-btn label="输入框" v-model="name" placeholder="右侧带有单位的输入框" btnDisabled @click="onClick" />
</gg-nav-group>
1
2
3
4
5
6
7
8
9
10
11
12

# 属性说明

属性名 类型 默认值 说明
placeholder String - 占位符
must Boolen false 是否必填
disabled Boolen false 是否禁止
label String - 字段名
v-model String - 数据双向绑定
maxlength Number -1 输入长度限制
labelWidth Number 60 字段区域宽度，上下排列无效
layout String row 排列方式 ['row','col']
message String - 错误提示
messageDisplay Boolen false 错误提示是否显示
tip String - 字段提示/说明

# 事件说明

事件名 说明 返回值
@click 点击 点击按钮 触发事件

# 插件预览地址

← 一级 →