hare-ui

Appearance

Return to top
On this page

Input 输入框

基本使用 

<template>
  <h-input placeholder="base input"></h-input>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss"></style>

尺寸

使用 size 属性改变输入框大小。 除了默认大小 middle外，还有另外两个选项： large , small。

<template>
  <div>
    <h-input
      placeholder="small input"
      size="small"
      prefix-icon="user"
    ></h-input>
    <h-input placeholder="middle input" prefix-icon="user"></h-input>
    <h-input placeholder="large input" size="large">
      <template #prefix>
        <h-icon size="large" name="user"></h-icon>
      </template>
    </h-input>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
div {
  margin-top: 15px;
}
</style>

密码框

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

<template>
  <h-input placeholder="please input password" show-password></h-input>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss"></style>

带图标的输入框

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。

图标
<template>
  <div>
    <h-input placeholder="username" prefix-icon="user" type="text"> </h-input>
    <h-input
      placeholder="password"
      prefix-icon="lock"
      type="password"
      show-password
    >
    </h-input>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
div {
  margin-top: 20px;
}
</style>

文本域

图标
<template>
  <div>
    <h-input placeholder="small input" size="small"></h-input>
    <h-input placeholder="middle input"></h-input>
    <h-input placeholder="large input" size="large" type="textarea"></h-input>
    <textarea></textarea>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
div {
  margin-top: 15px;
}
</style>

一键清空

图标
<template>
  <h-input placeholder="please input password" clearable></h-input>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss"></style>

组件 API

Attributes 属性

参数说明类型可选值默认值

Methods 方法

方法名说明参数返回值

Events 事件

事件名说明参数返回值

Slots 插槽

插槽名说明参数