gd-ui-vite

Input输入框

基础用法 

<template>
  <GInput placeholder="请输入用户名" />
</template>

禁用状态

disabled属性用于控制输入，禁用用户输入，禁用状态下无法进行清除操作(如果存在)、以及无法看到输入长度限制(如果存在)
<template>
  <GInput placeholder="请输入用户名" disabled />
  <GInput placeholder="请输入用户名" disabled show-word-limit :max-length="10" v-model="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello'
    }
  }
}
</script>

只读状态

5 / 10
readonly属性用于控制输入，无法写入, 只读状态下无法看到清空操作(如果存在)，可以看到输入限制
<template>
  <GInput placeholder="请输入用户名" readonly />
  <GInput placeholder="请输入用户名" readonly show-word-limit :max-length="10" v-model="msg" clearable />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello'
    }
  }
}
</script>

可清空

清空操作仅在指定clearable、非禁用、非只读状态、非密码框、框内有内容(值)的情况下，悬浮/聚焦到该输入框上才会显示清空操作按钮

使用clearable属性可以得到一个可以执行清空操作的输入框
<template>
  <GInput placeholder="请输入用户名" clearable />
</template>

密码框

使用show-password属性可以创建一个密码输入框
<template>
  <GInput placeholder="请输入密码" show-password />
</template>

文本域

用于输入多行文本信息，通过将type属性值设置为textarea. 使用rows属性可以指定文本域的行数

指定type属性为textarea可以创建一个文本域，用于输入长文本
<template>
  <GInput placeholder="请输入密码" type="textarea" :rows="5" clearable />
</template>

尺寸

三种尺寸可供选择

指定size为small、medium(默认)、large，可以修改输入框的大小
<template>
  <GInput placeholder="small尺寸文本框" size="small" clearable />
  <GInput placeholder="默认尺寸文本框" clearable />
  <GInput placeholder="large尺寸文本框" size="large" clearable />
</template>

输入最大长度限制

通过max-length属性可控制输入的最大字符个数

11 / 12
21 / 30
maxlength是原生属性，用于限制输入框字符长度，字符长度是用JavaScript字符串长度统计的。对于text和textarea的输入框，通过指定show-word-limit可以展示字数统计.
<template>
  <GInput
    v-model="name"
    placeholder="请输入文本"
    :max-length="12"
    show-word-limit
    clearable
  />
  <GInput
    v-model="content"
    placeholder="请输入内容"
    type="textarea"
    :max-length="30"
    show-word-limit
    clearable 
  />
</template>

<script>
export default {
  data() {
    return {
      name: "gzdl-strive",
      content: "这是一个组件库项目，用于学习......."
    }
  }
}
</script>

API

参数说明类型可选值默认值
type类型stringtext/textarea/hidden...text
v-model绑定值string————————
placeholder输入框占位文本string————请输入
disabled禁用输入框boolean————false
readonly输入框只读boolean————false
clearable是否可清空boolean————false
show-password切换为密码框boolean————false
size尺寸stringsmall/medium/largemedium
max-length最大输入长度number————-1
show-word-limit是否显示字数统计boolean————false