SlunceUI

Appearance

On this page

Input 输入框 ​

数据输入框类型，通过键盘输入字符

基础用法 ​

输入框的基本使用

显示代码
html
<template>
  <sl-input v-model="value1" placeholder="基本使用"></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value1 = ref('')
</script>

禁用状态 ​

input 的禁用状态，通过 disabled 属性限制输入及操作

显示代码
html
<template>
  <sl-input v-model="value2" placeholder="禁用状态" disabled></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value2 = ref('')
</script>

可清空数据 ​

input 的 value 可快捷清空，通过 clearable 属性启用

显示代码
html
<template>
  <sl-input v-model="value3" placeholder="可清空" clearable></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value3 = ref('')
</script>

带图标 ​

可使用 leftIcon 或者 rightIcon 来定义显示图标并确定显示的位置。需要注意的是如果定义了右侧显示图标，那 clearable 将不再起作用

显示代码
html
<template>
  <sl-input type="text" placeholder="带左侧图标" v-model="value4" iconPos="left" iconName="search"></sl-input>
  <sl-input type="text" placeholder="带右侧图标" v-model="value5" iconPos="right" iconName="search"></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value4 = ref('')
  let value5 = ref('')
</script>

自定义 Focus 颜色 ​

通过 focusColor 属性自定义 input 在获取焦点后的颜色

显示代码
html
<template>
    <sl-input type="text" placeholder="Focus 颜色自定义" v-model="value6" focusColor="#53ae26"></sl-input>
    <sl-input type="text" placeholder="Focus 颜色自定义" v-model="value6" focusColor="#f56c6c"></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value6 = ref('')
</script>

密码类型 ​

密码类型的输入框，可通过 showPassword 来启用是否开启显示密码

显示代码
html
<template>
    <sl-input type="password" placeholder="密码" v-model="value7" showPassword></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value7 = ref('')
</script>

不同尺寸 ​

可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 small 和 mini 三种尺寸。

显示代码
html
<template>
    <sl-input type="text" placeholder="普通尺寸" v-model="value8"></sl-input>
    <sl-input type="text" placeholder="小尺寸" v-model="value8" size="small"></sl-input>
    <sl-input type="text" placeholder="迷你尺寸" v-model="value8" size="mini"></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value8 = ref('')
</script>

输入长度限制 ​

maxlength 用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。

0/5
显示代码
html
<template>
  <sl-input type="text" placeholder="限制了字数" v-model="value9" maxlength="5"></sl-input>
</template>

<script setup>
  import { ref } from 'vue'
  let value9 = ref('')
</script>