Ghuo Design

简体中文

English

简体中文

English

Appearance

Input 输入框 ​

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用 ​

  • 需要用户输入表单域内容时。
  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

基本使用 ​

基本使用。

vue
<template>
  <g-input v-model:value="value" placeholder="Basic usage" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref('')
    
    return {
      value
    }
  }
}
</script>

三种大小 ​

我们为 <Input /> 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

vue
<template>
  <div class="components-input-demo-size">
    <g-input v-model:value="value1" size="large" placeholder="large size" />
    <g-input v-model:value="value2" placeholder="default size" />
    <g-input v-model:value="value3" size="small" placeholder="small size" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    
    return {
      value1,
      value2,
      value3
    }
  }
}
</script>

<style>
.components-input-demo-size .g-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
</style>

前置/后置标签 ​

用于配置一些固定组合。

vue
<template>
  <div>
    <div style="margin-bottom: 16px;">
      <g-input addon-before="Http://" addon-after=".com" default-value="mysite" />
    </div>
    <div style="margin-bottom: 16px;">
      <g-input default-value="mysite">
        <template #addonBefore>
          <g-select v-model:value="selectBefore" style="width: 90px;">
            <g-select-option value="Http://">Http://</g-select-option>
            <g-select-option value="Https://">Https://</g-select-option>
          </g-select>
        </template>
        <template #addonAfter>
          <g-select v-model:value="selectAfter" style="width: 80px;">
            <g-select-option value=".com">.com</g-select-option>
            <g-select-option value=".jp">.jp</g-select-option>
            <g-select-option value=".cn">.cn</g-select-option>
            <g-select-option value=".org">.org</g-select-option>
          </g-select>
        </template>
      </g-input>
    </div>
    <div style="margin-bottom: 16px;">
      <g-input default-value="mysite">
        <template #addonAfter>
          <g-icon type="setting" />
        </template>
      </g-input>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selectBefore = ref('Http://')
    const selectAfter = ref('.com')
    
    return {
      selectBefore,
      selectAfter
    }
  }
}
</script>

搜索框 ​

带有搜索按钮的输入框。

vue
<template>
  <div>
    <g-input-search
      v-model:value="value1"
      placeholder="input search text"
      enter-button
      @search="onSearch"
    />
    <br />
    <br />
    <g-input-search
      v-model:value="value2"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <br />
    <br />
    <g-input-search
      v-model:value="value3"
      placeholder="input search text"
      @search="onSearch"
    >
      <template #enterButton>
        <g-button>
          <template #icon><g-icon type="search" /></template>
          Custom
        </g-button>
      </template>
    </g-input-search>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    
    const onSearch = (searchValue) => {
      console.log('use search', searchValue)
    }
    
    return {
      value1,
      value2,
      value3,
      onSearch
    }
  }
}
</script>

文本域 ​

用于多行输入。

vue
<template>
  <div>
    <g-textarea
      v-model:value="value"
      placeholder="Basic usage"
      :rows="4"
    />
    <br />
    <br />
    <g-textarea
      v-model:value="value"
      placeholder="Autosize height based on content lines"
      auto-size
    />
    <br />
    <br />
    <g-textarea
      v-model:value="value"
      placeholder="Autosize height with minimum and maximum number of lines"
      :auto-size="{ minRows: 2, maxRows: 6 }"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref('')
    
    return {
      value
    }
  }
}
</script>

输入框组合 ​

输入框的组合展现。

vue
<template>
  <div>
    <g-input-group size="large">
      <g-row :gutter="8">
        <g-col :span="5">
          <g-input v-model:value="value1" />
        </g-col>
        <g-col :span="8">
          <g-input v-model:value="value2" />
        </g-col>
      </g-row>
    </g-input-group>
    <br />
    <g-input-group compact>
      <g-input v-model:value="value3" style="width: 20%" />
      <g-input v-model:value="value4" style="width: 30%" />
    </g-input-group>
    <br />
    <g-input-group compact>
      <g-select v-model:value="value5">
        <g-select-option value="Zhejiang">Zhejiang</g-select-option>
        <g-select-option value="Jiangsu">Jiangsu</g-select-option>
      </g-select>
      <g-input v-model:value="value6" style="width: 50%" />
    </g-input-group>
    <br />
    <g-input-group compact>
      <g-input v-model:value="value7" style="width: 50%" />
      <g-date-picker v-model:value="value8" style="width: 50%" />
    </g-input-group>
    <br />
    <g-input-group compact>
      <g-select v-model:value="value9">
        <g-select-option value="Option1">Option1</g-select-option>
        <g-select-option value="Option2">Option2</g-select-option>
      </g-select>
      <g-input v-model:value="value10" style="width: 50%" />
    </g-input-group>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    const value4 = ref('')
    const value5 = ref('Zhejiang')
    const value6 = ref('')
    const value7 = ref('')
    const value8 = ref('')
    const value9 = ref('Option1')
    const value10 = ref('')
    
    return {
      value1,
      value2,
      value3,
      value4,
      value5,
      value6,
      value7,
      value8,
      value9,
      value10
    }
  }
}
</script>

密码框 ​

密码框。

vue
<template>
  <div>
    <g-input-password
      v-model:value="password"
      placeholder="input password"
    />
    <br />
    <br />
    <g-input-password
      v-model:value="password"
      placeholder="input password"
      :visibility-toggle="false"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const password = ref('')
    
    return {
      password
    }
  }
}
</script>

带图标的输入框 ​

带有图标的输入框。

vue
<template>
  <div>
    <g-input v-model:value="value1" placeholder="Enter your username">
      <template #prefix>
        <g-icon type="user" style="color: rgba(0,0,0,.25)" />
      </template>
    </g-input>
    <br />
    <br />
    <g-input v-model:value="value2" placeholder="Enter your username">
      <template #suffix>
        <g-tooltip title="Extra information">
          <g-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
        </g-tooltip>
      </template>
    </g-input>
    <br />
    <br />
    <g-input v-model:value="value3" placeholder="Enter your username">
      <template #prefix>
        <g-icon type="user" style="color: rgba(0,0,0,.25)" />
      </template>
      <template #suffix>
        <g-tooltip title="Extra information">
          <g-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
        </g-tooltip>
      </template>
    </g-input>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    
    return {
      value1,
      value2,
      value3
    }
  }
}
</script>

数字输入框 ​

数字输入框。

vue
<template>
  <div>
    <g-input-number
      v-model:value="value1"
      :min="1"
      :max="10"
      :default-value="3"
      @change="onChange"
    />
    <br />
    <g-input-number
      v-model:value="value2"
      :min="0"
      :max="10"
      :step="0.1"
      :default-value="3"
      @change="onChange"
    />
    <br />
    <g-input-number
      v-model:value="value3"
      size="small"
      :min="1"
      :max="10"
      :default-value="3"
      @change="onChange"
    />
    <br />
    <g-input-number
      v-model:value="value4"
      size="large"
      :min="1"
      :max="10"
      :default-value="3"
      @change="onChange"
    />
    <br />
    <g-input-number v-model:value="value5" disabled />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref(3)
    const value2 = ref(3)
    const value3 = ref(3)
    const value4 = ref(3)
    const value5 = ref(3)
    
    const onChange = (value) => {
      console.log('changed', value)
    }
    
    return {
      value1,
      value2,
      value3,
      value4,
      value5,
      onChange
    }
  }
}
</script>

API ​

Input ​

参数说明类型默认值版本
addonAfter带标签的 input，设置后置标签string | slot-
addonBefore带标签的 input，设置前置标签string | slot-
allowClear可以点击清除图标删除内容boolean-
bordered是否有边框booleantrue4.5.0
defaultValue输入框默认内容string-
disabled是否禁用状态，默认为 falsebooleanfalse
id输入框的 idstring-
maxlength最大长度number-
prefix带有前缀图标的 inputstring | slot-
showCount是否展示字符数booleanfalse4.0.0
size控件大小。注：标准表单内的输入框大小限制为 large。large | middle | small-
suffix带有后缀图标的 inputstring | slot-
type声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。stringtext
value(v-model)输入框内容string-

Input 事件 ​

事件名称说明回调参数
blur失去焦点时触发function(e)
change输入框内容变化时的回调function(e)
focus获得焦点时触发function(e)
pressEnter按下回车的回调function(e)

Input.TextArea ​

参数说明类型默认值版本
allowClear可以点击清除图标删除内容boolean-
autoSize自适应内容高度，可设置为 true | false 或对象：boolean | objectfalse
bordered是否有边框booleantrue4.5.0
defaultValue输入框默认内容string-
maxlength内容最大长度number-
rows输入框行数number2
showCount是否展示字符数booleanfalse
value(v-model)输入框内容string-

Input.TextArea 事件 ​

事件名称说明回调参数
pressEnter按下回车的回调function(e)
resizeresize 回调function({ width, height })
参数说明类型默认值
enterButton是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。boolean | slotfalse
loading搜索 loadingbooleanfalse

Input.Search 事件 ​

事件名称说明回调参数
search点击搜索或按下回车键时的回调function(value, event)

其余属性和 Input 一致。

Input.Group ​

参数说明类型默认值
compact是否用紧凑模式booleanfalse
sizeInput.Group 中所有的 Input 的大小，可选 large default smallstringdefault

Input.Password ​

参数说明类型默认值版本
iconRender自定义切换按钮(visible) => VNode(visible) => (visible ? : )1.5.0
visibilityToggle是否显示切换按钮booleantrue

Input.Number ​

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
bordered是否有边框booleantrue4.5.0
controls是否显示增减按钮booleantrue4.17.0
decimalSeparator小数点string-
defaultValue初始值number-
disabled禁用booleanfalse
formatter指定输入框展示值的格式function(value: number | string): string-
keyboard是否启用键盘快捷行为booleantrue4.12.0
max最大值numberInfinity
min最小值number-Infinity
parser指定从 formatter 里转换回数字的方式，和 formatter 搭配使用function( string): number-
precision数值精度number-
readOnly只读booleanfalse
size输入框大小large | middle | small-
step每次改变步数，可以为小数number | string1
stringMode字符值模式，开启后支持高精度小数。同时 change 事件将返回 string 类型booleanfalse4.13.0
value(v-model)当前值number-

Input.Number 事件 ​

事件名称说明回调参数版本
blur失去焦点时回调function-
change变化回调Function(value: number | string)-
focus获得焦点时回调function-
pressEnter按下回车的回调function(e)-
step点击上下箭头的回调(value: number, info: { offset: number, type: 'up' | 'down' }) => void4.7.0

方法 ​

名称说明
blur()移除焦点
focus()获取焦点

Released under the MIT License.

Copyright © 2024 Ghuo Design