Spicomps

Appearance

Input 输入框 ​

输入字符

基础用法 ​

<template>
  <div class="demo-container">
    <sp-input v-model="inputValue" placeholder="彦祖，吃了没" />
  </div>

  <div class="demo-container">
    <sp-input v-model="inputValue" type="textarea" placeholder="走，一起" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref('')
</script>

禁用状态 ​

disabled: true

<template>
  <div class="demo-container">
    <sp-input v-model="inputValue" disabled />
  </div>

  <div class="demo-container">
    <sp-input v-model="inputValue" type="textarea" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref('adsadsa')
</script>

一键清除 ​

clearable: true

<template>
  <div class="demo-container">
    <sp-input v-model="inputValue" placeholder="彦祖，吃了没" clearable />
  </div>

  <div class="demo-container">
    <sp-input
      v-model="inputValue"
      type="textarea"
      placeholder="走，一起"
      clearable
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref('啊！我要被清除掉啦！救命！help！！！')
</script>

密码框 ​

通过show-password可以切换密码显示

<template>
  <div class="demo-container">
    <sp-input
      v-model="inputValue"
      type="password"
      show-password
      placeholder="密码框"
      clearable
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref('')
</script>

调整尺寸 ​

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。 使用 size 属性额外配置尺寸，可使用 large和small两种值。

<template>
  <div class="demo-container">
    <sp-input v-model="inputValue" size="large" placeholder="彦祖，吃了没" />
  </div>
  <div class="demo-container">
    <sp-input v-model="inputValue" placeholder="走，一起" />
  </div>
  <div class="demo-container">
    <sp-input v-model="inputValue" size="small" placeholder="走，一起" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref('')
</script>

API ​

属性名说明类型默认值
size大小'large'| 'small'—
type类型'input' | 'password' | 'textarea'input
show-password是否显示密码booleanfalse
loading加载中状态booleanfalse
disabled禁用booleanfalse
clearable清除booleanfalse
autofocus原生 autofocus 属性booleanfalse