BIN-UI-DESIGN

Appearance

On this page

输入框 Input ​

基本表单组件，支持 input 和 textarea

基础用法 ​

输入的内容：
<template>
  <div>
    <div style="margin-bottom: 10px">输入的内容：{{ value }}</div>
    <b-input v-model="value" placeholder="请输入一些文字..." class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div>
    <div style="margin-bottom: 10px">输入的内容：{{ value }}</div>
    <b-input v-model="value" placeholder="请输入一些文字..." class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

图标和清空 ​

设置 clearable 可以开启清空按钮,icon设置icon图标名称

<template>
  <b-space>
    <b-input v-model="value" icon="eye-fill" class="input-item"></b-input>
    <b-input v-model="value1" clearable class="input-item"></b-input>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const value1 = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <b-space>
    <b-input v-model="value" icon="eye-fill" class="input-item"></b-input>
    <b-input v-model="value1" clearable class="input-item"></b-input>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const value1 = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

禁用和只读 ​

设置 disabled 可以禁用，设置 readonly 可以只读

<template>
  <div>
    <b-input v-model="value" placeholder="disabled" disabled class="input-item"></b-input>
    <b-input v-model="value1" placeholder="readonly" readonly class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('禁用的文字')
const value1 = ref('只读的输入')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div>
    <b-input v-model="value" placeholder="disabled" disabled class="input-item"></b-input>
    <b-input v-model="value1" placeholder="readonly" readonly class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('禁用的文字')
const value1 = ref('只读的输入')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

组合使用 ​

提供两种方式来进行插入图标

Props：

 

Slots：

 

prepend/append：

 
  
<template>
  <div>
    <p>Props：</p>
    <div>
      <b-input prefix="bulb-fill" clearable placeholder="Enter name" style="width: auto"></b-input>
      &nbsp;
      <b-input suffix="search" clearable placeholder="Enter text" style="width: auto"></b-input>
    </div>
    <p>Slots：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter name" style="width: auto">
        <template #prefix>
          <b-icon name="bulb-fill"></b-icon>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter text" clearable style="width: auto">
        <template #suffix>
          <b-icon name="search"></b-icon>
        </template>
      </b-input>
    </div>
    <p>prepend/append：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter text" style="width: auto" clearable>
        <template #prepend>
          <b-button>prepend</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #prepend>
          <b-select v-model="type" clearable style="width: 100px">
            <b-option lable="email" value="email"></b-option>
            <b-option lable="phone" value="phone"></b-option>
          </b-select>
        </template>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const type = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div>
    <p>Props：</p>
    <div>
      <b-input prefix="bulb-fill" clearable placeholder="Enter name" style="width: auto"></b-input>
      &nbsp;
      <b-input suffix="search" clearable placeholder="Enter text" style="width: auto"></b-input>
    </div>
    <p>Slots：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter name" style="width: auto">
        <template #prefix>
          <b-icon name="bulb-fill"></b-icon>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter text" clearable style="width: auto">
        <template #suffix>
          <b-icon name="search"></b-icon>
        </template>
      </b-input>
    </div>
    <p>prepend/append：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter text" style="width: auto" clearable>
        <template #prepend>
          <b-button>prepend</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #prepend>
          <b-select v-model="type" clearable style="width: 100px">
            <b-option lable="email" value="email"></b-option>
            <b-option lable="phone" value="phone"></b-option>
          </b-select>
        </template>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const type = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

设置search ​

可以设置查询状态

<template>
  <div>
    <b-input v-model="value" search placeholder="请输入一些文字..." class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div>
    <b-input v-model="value" search placeholder="请输入一些文字..." class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

密码框 ​

输入密码的时候默认需要隐藏显示，这里会开启图标提示

<template>
  <div>
    <b-input v-model="value" show-password-toggle type="password" class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div>
    <b-input v-model="value" show-password-toggle type="password" class="input-item"></b-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

不同尺寸 ​

提供额外3种尺寸进行配置 large small 或 mini三种尺寸

<template>
  <b-row :gutter="10">
    <b-col span="6">
      <b-input size="large" clearable placeholder="large input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input clearable placeholder="default input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="small" clearable placeholder="small input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="mini" clearable placeholder="mini input"></b-input>
    </b-col>
  </b-row>
</template>
<template>
  <b-row :gutter="10">
    <b-col span="6">
      <b-input size="large" clearable placeholder="large input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input clearable placeholder="default input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="small" clearable placeholder="small input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="mini" clearable placeholder="mini input"></b-input>
    </b-col>
  </b-row>
</template>

设置textarea ​

可以设置 type="textarea"开启文本域模式

<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="自动大小，可拖动，最大行数6"
      ></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="4" placeholder="禁用拖动，默认4行" no-resize></b-input>
    </div>
  </div>
</template>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="自动大小，可拖动，最大行数6"
      ></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="4" placeholder="禁用拖动，默认4行" no-resize></b-input>
    </div>
  </div>
</template>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

字数统计 ​

可以设置 show-word-count开启字数统计

0/10
0
<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input :maxlength="10" show-word-count></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="2" no-resize show-word-count></b-input>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>
<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input :maxlength="10" show-word-count></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="2" no-resize show-word-count></b-input>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Props ​

参数说明类型可选值默认值
type输入框类型stringtext、password、textarea、url、email、date、number、tel—
value绑定的值，可使用 v-model 双向绑定String / Number——
size输入框尺寸large、small、default、mini—default
placeholder占位文本String——
clearable是否显示清空按钮Boolean—false
disabled禁用状态Boolean—false
readonly只读模式Boolean—false
maxlength最大输入长度Number——
icon输入框尾部图标，仅在 text 类型下有效String——
prefix输入框头部图标String——
suffix输入框尾部图标String——
search是否显示为搜索型输入框Boolean—false
rows文本域默认行数，仅在 textarea 类型下有效Number—2
autosize自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }Boolean/Object—false
number将用户的输入转换为 Number 类型Boolean—false
autofocus自动获取焦点Boolean—false
autocomplete原生的自动完成功能，可选值为 off 和 onString—off
element-id给表单元素设置 id，详见 Form 用法。String——
wrap原生的 wrap 属性，可选值为 hard 和 soft，仅在 textarea 下生效String—soft
no-resize禁用文本域resize ，仅在 textarea 下生效Boolean—false
show-word-count显示文本字数统计，仅在 textarea 下生效Boolean—false
validateEvent是否触发校验，主要为form表单使用，选择框等也使用到input的内部设置为falseBoolean—true

Input events ​

方法名说明返回值
enter按下回车键时触发无
click设置 icon 属性后，点击图标时触发无
change数据改变时触发event
focus输入框聚焦时触发无
blur输入框失去焦点时触发无
keyup原生的 keyup 事件event
keydown原生的 keydown 事件event
keypress原生的 keypress 事件event
search开启 search 时可用，点击搜索或按下回车键时触发value
clear开启 clearable 时可用，点击清空按钮时触发无

Input slot ​

名称说明
prepend前置内容，仅在 text 类型下有效
append后置内容，仅在 text 类型下有效
prefix输入框头部图标
suffix输入框尾部图标

Input methods ​

方法名说明返回值
focus手动聚焦输入框无

MIT Licensed | Copyright © 2023-present bin-ui-design