输入框 Input

这是一个基本数据录入组件，也是一个表单组件，并在原生控件基础上进行了功能扩展，可以组合使用

基本用法

input的基本用法，通过v-model实现双向数据绑定

<template>
  <div>
    <sb-input v-model="tel" placeholder="请输入内容">ss</sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>

禁用状态

禁用输入框

<template>
  <div>
    <sb-input v-model="tel" disabled="true" placeholder="请输入内容">ss</sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>

尺寸属性

输入框尺寸类型包括mini, small, medium, 默认为medium大小

<template>
  <div class="input-demo">
    <sb-input v-model="tel" size="mini" placeholder="请输入内容"></sb-input>
    <div style="height: 10px;"></div>
    <sb-input v-model="tel" size="medium" placeholder="请输入内容"></sb-input>
    <div style="height: 10px;"></div>
    <sb-input v-model="tel" size="small" placeholder="请输入内容"></sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

基本属性

继承了原生的input的type属性，比如button, radio, submit, text等

<template>
  <div class="input-demo">
    <sb-input v-model="tel" type="button"></sb-input>
    <sb-input v-model="tel" type="checkbox"></sb-input>
    <sb-input v-model="tel" type="radio"></sb-input>
    <div style="height: 10px;"></div>
    <sb-input v-model="tel" type="image"></sb-input>
    <sb-input v-model="tel" type="file"></sb-input>
    <div style="height: 10px;"></div>
    <sb-input v-model="tel" type="submit"></sb-input>
    <sb-input v-model="tel" type="reset"></sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

可清空属性

设置clearable属性, 通过sb-input的值是否为空以及是否鼠标是否移入来判断是否需要显示可清空图标。

<template>
  <div class="input-demo">
    <sb-input v-model="tel" clearable="true" placeholder="请输入内容"></sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

密码框

设置show-password属性可以得到一个可切换显示隐藏的密码框。

<template>
  <div class="input-demo">
    <sb-input v-model="tel" show-password="true" placeholder="请输入内容"></sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

可自适应高度文本域

通过设置autosize属性来开启自适应高度，同时autosize也可以传对象形式来指定最小minRows和最大行高maxRows

<template>
  <div class="input-demo">
    <sb-input v-model="tel" type="textarea" :autosize="{ minRows: 2 }" placeholder="请输入内容" style="width: 150px;"></sb-input>
  </div>
  <div class="input-demo">
    <sb-input v-model="text" type="textarea" :autosize="{ maxRows: 2 }" placeholder="请输入内容" style="width: 150px;"></sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
  const text = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

复合型输入框

通过slot插槽来对输入框进行前置输入设置和后置输入设置。

http://

.com

<template>
  <div class="input-demo">
      <sb-input v-model="tel" placeholder="请输入内容" style="width: 200px;">
      <template #prepend>
          http://
      </template>
      </sb-input>
      <sb-input v-model="text" placeholder="请输入内容" style="width: 200px;">
      <template #append>
          .com
      </template>
      </sb-input>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const tel = ref("");
  const text = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

API

`<Input>` Props

参数名	描述	类型	默认值
modelValue (v-model)	双向数据绑定值	`String	Number`
disabled	是否禁用	`boolean`	`false`
size	输入框的大小	`'mini' \| 'medium' \| 'small'`	`medium`
type	输入框的的基本属性	`'button' \| 'radio' \| 'submit' \| ...`	`'text'`
clearable	是否可以清空输入框内容	`boolean`	`'false'`
show-password	输入框的内容是否为密码形式	`boolean`	`false
autosize	可自适应高度输入框	`Object`	`-`

`<Input>` Events

事件名	描述	参数
change	输入框中的值改变时触发	value: `string`
update:modelValue	更新双向数据绑定的值	value: `string`

`<Input>` Slots

插槽名	描述	参数
prepend	复合插入槽，输入框的前缀内容	-
append	复合插入槽，输入框的后缀内容	-

输入框 Input #

基本用法 #

禁用状态 #

尺寸属性 #

基本属性 #

可清空属性 #

密码框 #

可自适应高度文本域 #

复合型输入框 #

API #

<Input> Props #

<Input> Events #

<Input> Slots #