Ai UI

Appearance

Input 输入框 ​

通过鼠标或键盘输入字符。

基础用法 ​

输入值: 

<template>
  <div class="demo-input">
    <AiInput v-model="value1" placeholder="请输入内容" />
    <p style="margin-top: 12px; color: var(--ai-color-text-secondary)">输入值: {{ value1 }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

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

<style scoped>
.demo-input {
  width: 300px;
}
</style>

禁用状态 ​

<template>
  <AiInput v-model="value" disabled placeholder="禁用状态" style="width: 300px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

const value = ref('已禁用')
</script>

一键清空 ​

使用 clearable 属性即可得到一个可一键清空的输入框。

<template>
  <AiInput v-model="value" clearable placeholder="请输入内容" style="width: 300px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

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

密码框 ​

使用 show-password 属性即可得到一个可切换显示状态的密码框。

<template>
  <AiInput
    v-model="password"
    type="password"
    show-password
    placeholder="请输入密码"
    style="width: 300px"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

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

尺寸 ​

可通过 size 属性指定输入框的尺寸。除了默认的大小外，还有 sm、md、lg 三种尺寸。

<template>
  <div class="demo-inputs">
    <AiInput v-model="v1" size="lg" placeholder="Large" />
    <AiInput v-model="v2" placeholder="Default" />
    <AiInput v-model="v3" size="sm" placeholder="Small" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

const v1 = ref('')
const v2 = ref('')
const v3 = ref('')
</script>

<style scoped>
.demo-inputs > * {
  margin-bottom: 12px;
  width: 300px;
}
</style>

带图标的输入框 ​

可以通过 prefix-icon 和 suffix-icon 属性添加图标，也可以通过 prefix 和 suffix 插槽自定义内容。

<🔍>
<📅>
🔍
📅

<template>
  <div class="demo-inputs">
    <AiInput v-model="v1" placeholder="前缀图标" prefix-icon="🔍" />
    <AiInput v-model="v2" placeholder="后缀图标" suffix-icon="📅" />
    <AiInput v-model="v3" placeholder="使用插槽">
      <template #prefix>
        <span>🔍</span>
      </template>
    </AiInput>
    <AiInput v-model="v4" placeholder="使用插槽">
      <template #suffix>
        <span>📅</span>
      </template>
    </AiInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

const v1 = ref('')
const v2 = ref('')
const v3 = ref('')
const v4 = ref('')
</script>

<style scoped>
.demo-inputs > * {
  margin-bottom: 12px;
  width: 300px;
}
</style>

复合型输入框 ​

可前置或后置内容，通常为标签或按钮。

Http://
.com

<template>
  <div class="demo-inputs">
    <AiInput v-model="v1" placeholder="请输入内容">
      <template #prepend>Http://</template>
    </AiInput>
    <AiInput v-model="v2" placeholder="请输入内容">
      <template #append>.com</template>
    </AiInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiInput } from '@axin666/ai-ui'

const v1 = ref('')
const v2 = ref('')
</script>

<style scoped>
.demo-inputs > * {
  margin-bottom: 12px;
  width: 400px;
}
</style>

Props ​

参数说明类型可选值默认值
modelValue / v-model绑定值string / number——
type类型stringtext / password / textarea / numbertext
size尺寸stringsm / md / lgmd
placeholder输入框占位文本string——
disabled禁用状态boolean—false
readonly是否只读boolean—false
clearable是否可清空boolean—false
show-password是否显示密码切换图标boolean—false
prefix-icon前缀图标string / Component——
suffix-icon后缀图标string / Component——
autofocus原生 autofocus 属性boolean—false
form原生 form 属性string——
autocomplete原生 autocomplete 属性string—off
tabindex原生 tabindex 属性string / number——

Events ​

事件名称说明回调参数
update:modelValue绑定值变化时触发(value: string | number)
input在 Input 值改变时触发(value: string | number)
change仅在输入框失去焦点或用户按下回车时触发(value: string | number)
focus在 Input 获得焦点时触发(event: FocusEvent)
blur在 Input 失去焦点时触发(event: FocusEvent)
clear在点击清空按钮时触发—

Slots ​

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

Methods ​

方法名说明参数
focus使 input 获取焦点—
blur使 input 失去焦点—
select选中 input 中的文字—