QinUi

# Input 输入框

统一封装

# 基础用法

<template>
  <qinui-input placeholder="请输入内容" v-model="value" />
</template>

<script>
  export default {
    data() {
      return {
        value: '内容',
      };
    },
  }
</script>

# 可清空内容

设置 :clearable="true"

<template>
  <qinui-input :clearable="true" />
</template>

# 数字键盘

设置 type="number"

<template>
  <qinui-input type="number"></qinui-input>
</template>

# 密码键盘

配合设置 :password="true"

<template>
  <qinui-input :password="true"></qinui-input>
</template>

# 显示下划线

配合设置 border="bottom"

<template>
  <qinui-input border="bottom"></qinui-input>
</template>

# 禁用状态

配合设置 :disabled="true"

<template>
  <qinui-input :disabled="true"></qinui-input>
</template>

# 圆形

设置 shape="circle"

<template>
  <qinui-input shape="circle"></qinui-input>
</template>

# 前后图标

<template>
  <div>
    <qinui-input
      placeholder="前置图标"
      prefixIcon="icon-yuyue"
      :prefixIconStyle="{ fontSize: '44rpx', color: '#909399' }"
    ></qinui-input>
  </div>
  <div style="margin-top: 15px">
    <qinui-input
      placeholder="后置图标"
      suffixIcon="icon-yuyue"
      :suffixIconStyle="{ color: '#909399' }"
    ></qinui-input>
  </div>
</template>

# 前后插槽

<template>
  <div>
    <qinui-input placeholder="前置插槽">
      <template v-slot:prefix>
        <qinui-text content="http://"></qinui-text>
      </template>
    </qinui-input>
  </div>
  <div style="margin-top: 15px">
    <qinui-input placeholder="后置插槽">
      <template #suffix>
        <qinui-code
          ref="uCode"
          @change="codeChange"
          seconds="20"
          changeText="X秒重新获取哈哈哈"
        ></qinui-code>
        <qinui-text @click="getCode" size="24" :content="tips"></qinui-text>
      </template>
    </qinui-input>
  </div>
</template>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue(v-model) 输入内容 String - -
type input 的类型 String - -
disabled 是否禁用输入框 Boolean false -
clearable 是否显示清除控件 Boolean false -
password 是否密码类型 Boolean false -
readonly 是否只读 Boolean false -
disabledColor 禁用状态时的背景色 String rgba(0, 0, 0, 0.25) -
placeholder 输入框为空时的占位符 String - -
maxlength 最大输入长度，设置为 -1 的时候不限制最大长度 String | Number -1 -
border 边框类型，round-四周边框，bottom-底部边框，none-无边框 String round round | bottom | none
shape 输入框形状，circle-圆形，square-方形 String square circle | square
prefixIcon 前缀图标 class 名字 String - -
prefixIconStyle 前缀图标样式 String - -
suffixIcon 后缀图标 class 名字 String - -
suffixIconStyle 后缀图标样式 String - -
placeholderStyle 指定placeholder的样式 String - -
clearStyle 指定 clear 的样式 String - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Events

事件名 说明 回调参数
@change 改变值触发 -

← InputNumber 数字输入框 →