Appearance

Input 输入框 ​

用于通过键盘输入内容，是最基础和常用的表单组件 ——该组件泛用性一般，对策性极强 (大杯)

基本使用 ​

使用v-model双向绑定来使用一个最基本的输入框，

基本使用


当前inputValue：
<!-- 输入框基础使用 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input v-model="inputValue" placeholder="请输入..."></utp-input>
    <br>
    <br>
    <i class="dips">当前inputValue：{{ inputValue }}</i>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

输入框组合 ​

预留了四个位置prepend，append，prefix，suffix，可以通过插槽向其中插入需要的内容

输入框组合
prepend
prefixsuffix
append


Https://






.com 
<!-- 组合式输入框 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput, UtpIcon } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input v-model="inputValue" placeholder="组合式输入框">
      <template #prepend>prepend</template>
      <template #prefix>
        <span>prefix</span>
      </template>
      <template #suffix>suffix</template>
      <template #append>append</template>
    </utp-input>
    <br>
    <br>
    <utp-input v-model="inputValue" placeholder="组合式输入框">
      <template #prepend>Https://</template>
    </utp-input>
    <br>
    <br>
    <utp-input v-model="inputValue" placeholder="组合式输入框">
      <template #prefix>
        <utp-icon icon="fa-solid fa-magnifying-glass"></utp-icon>
      </template>
    </utp-input>
    <br>
    <br>
    <utp-input v-model="inputValue" placeholder="组合式输入框">
      <template #suffix>
        <utp-icon icon="fa-solid fa-lock"></utp-icon>
      </template>
    </utp-input>
    <br>
    <br>
    <utp-input class="my-input" v-model="inputValue" placeholder="组合式输入框">
      <template #append>
        .com
      </template>
    </utp-input>
  </div>
</template>

禁用输入框 ​

传入disabled来禁用输入框

禁用输入框


当前inputValue：
<!-- 输入框禁用 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input v-model="inputValue" placeholder="请输入..." disabled></utp-input>
    <br>
    <br>
    <i class="dips">当前inputValue：{{ inputValue }}</i>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

不同尺寸 ​

三种大小，默认为中号，可通过传入size进行调整

不同尺寸




<!-- 输入框大小 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

const inputValue = ref('')
const smallValue = ref('')
const bigValue = ref('')
</script>

<template>
  <div>
    <utp-input size="small" v-model="smallValue" placeholder="这是小号"></utp-input>
    <br>
    <br>
    <utp-input v-model="inputValue" placeholder="这是默认"></utp-input>
    <br>
    <br>
    <utp-input size="big" v-model="bigValue" placeholder="这是大号"></utp-input>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

密码输入框 ​

通过传入showPassword可以显示和隐藏密码，需要配合type属性传入password使用

密码输入框


当前inputValue：
<!-- 输入框显示密码 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input type="password" v-model="inputValue" placeholder="请输入..." showPassword></utp-input>
    <br>
    <br>
    <i class="dips">当前inputValue：{{ inputValue }}</i>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

一键清除 ​

通过传入clearable属性来显示一键清除按钮

一键清除


当前inputValue：
<!-- 输入框一键清除 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input v-model="inputValue" placeholder="请输入..." clearable></utp-input>
    <br>
    <br>
    <i class="dips">当前inputValue：{{ inputValue }}</i>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

文本域 ​

通过type属性传入textarea值来使用文本域

文本域


当前inputValue：
<!-- 文本域 -->
<script setup>
import { ref } from 'vue';
// 导入路径请参考安装部分
import { UtpInput } from '@will1919/utopia-ui';

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

<template>
  <div>
    <utp-input type="textarea" v-model="inputValue" placeholder="请输入..."></utp-input>
    <br>
    <br>
    <i class="dips">当前inputValue：{{ inputValue }}</i>
  </div>
</template>

<style scoped>
.dips {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
</style>

Input API ​

属性 ​

属性说明类型默认值
type设置输入框类型stringtext
size设置选择题提示文本big | small—
disabled禁用输入框booleanfalse
clearable开启一键清空booleanfalse
showPassword密码输入框开启查看按钮，配合password输入框使用booleanfalse
placeholder设置输入框提示文本string—
autocomplete表单自动填充特性提示(同原生input)MDN—
autofocus自动获取焦点(同原生input)MDN—
form将控件联系到表单元素中(同原生input)MDN—
readonly只读(同原生input)MDN—

事件 ​

事件名称说明事件类型
input输入框输入时的回调函数(inputValue: string) => void
change输入框值修改完成时的回调函数(inputValue: string) => void
focus输入框获得焦点时的回调函数(event: FocusEvent) => void
blur输入框失去焦点时的回调函数(event: FocusEvent) => void
clear输入框一键清除时的回调函数() => void

Exposes ​

名称说明类型
ref输入框 html 元素object：HTMLInputElement | object：HTMLTextAreaElement