lb-vue-ui

Appearance

Input 输入框 ​

输入框组件，用于获取用户输入。

代码示例 ​

基础用法 ​

通过 v-model 绑定输入值。

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

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

const value = ref("");
</script>

禁用状态 ​

通过 disabled 属性禁用输入框。

<template>
  <lb-input v-model="value" placeholder="禁用状态" disabled />
</template>

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

const value = ref("");
</script>

可清空 ​

通过 clearable 属性可清空输入内容。

<template>
  <lb-input v-model="value" placeholder="可清空输入框" clearable />
</template>

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

const value = ref("");
</script>

密码框 ​

通过 type="password" 设置密码输入框，show-password 属性可切换密码可见性。

<template>
  <lb-input
    v-model="password"
    type="password"
    placeholder="请输入密码"
    show-password
  />
</template>

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

const password = ref("");
</script>

带图标的输入框 ​

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <lb-input v-model="value" placeholder="带前缀图标的输入框">
      <template #prefix>
        <lb-icon>
          <Search />
        </lb-icon>
      </template>
    </lb-input>

    <lb-input v-model="value" placeholder="带后缀图标的输入框">
      <template #suffix>
        <lb-icon>
          <Search />
        </lb-icon>
      </template>
    </lb-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@vicons/ionicons5";
const value = ref("");
</script>

复合型输入框框 ​

通过 prepend、append、prefix 和 suffix 插槽实现丰富的输入体验。

Https://
<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <lb-input v-model="value" placeholder="复合型输入框">
      <template #prepend>
        <span>Https://</span>
      </template>
      <template #append>
        <lb-button round>
          <lb-icon>
            <Search />
          </lb-icon>
        </lb-button>
      </template>
    </lb-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search } from "@vicons/ionicons5";
const value = ref("");
</script>

文本域 ​

通过 type="textarea" 设置多行文本输入。

<template>
  <lb-input
    v-model="content"
    type="textarea"
    placeholder="请输入多行文本"
    :rows="3"
  />
</template>

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

const content = ref("");
</script>

自适应高度文本域 ​

通过 autosize 属性设置文本域自适应高度，可以传入布尔值或配置对象 { minRows: number, maxRows: number }。

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <lb-input
      v-model="content"
      type="textarea"
      placeholder="自适应高度文本域"
      :autosize="{ minRows: 2, maxRows: 4 }"
    />

    <lb-input
      v-model="content2"
      type="textarea"
      placeholder="简单自适应"
      autosize
      class="mt-4"
    />
  </div>
</template>

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

const content = ref("");
const content2 = ref("");
</script>

LbInput Props ​

属性名说明类型可选值默认值
modelValue绑定值string | number-''
type输入框类型stringtext/password/textarea/number'text'
placeholder占位文本string--
disabled是否禁用boolean-false
clearable是否可清空boolean-false
showPassword是否显示切换密码按钮boolean-false
autofocus是否自动获取焦点boolean-false
autosize文本域自适应高度boolean | { minRows: number, maxRows: number }-false
size输入框尺寸stringlarge/default/small'default'
rows文本域行数number | string-2
maxlength最大输入长度number | string--
minlength最小输入长度number | string--
showWordLimit是否显示字数统计boolean-false

LbInput Events ​

事件名说明回调参数
change输入值变化时触发(value: string)
focus获取焦点时触发(event: FocusEvent)
blur失去焦点时触发(event: FocusEvent)
clear点击清空按钮时触发-

LbInput Slots ​

插槽名说明
prepend复合型输入框前置内容
append复合型输入框后置内容
prefix输入框头部内容
suffix输入框尾部内容