Pixel UI

Input 输入框 ​

通过鼠标或键盘输入字符

DANGER

Input 为受控组件, 它 总会显示 Vue 绑定值。

在正常情况下, input 的输入事件应该被正常响应。它的处理程序应该更新组件的绑定值 (或使用 v-model)。否则, 输入框的值将不会改变。

基础用法 ​

<template>
  <px-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>

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

禁用状态 ​

通过 disabled 属性设置禁用状态

<template>
  <px-input
    v-model="input"
    style="width: 240px"
    disabled
    placeholder="Please input"
  />
</template>

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

一键清空 ​

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

<template>
  <px-input
    v-model="input"
    style="width: 240px"
    placeholder="Please input"
    clearable
  />
</template>

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

密码框 ​

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

<template>
  <px-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

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

带图标的输入框 ​

带有图标标记输入类型

要在输入框中添加图标, 可通过 prefix 和 suffix 具名插槽来实现。

<template>
  <div class="flex gap-4">
    <px-text size="12">Using Slots</px-text>
    <px-input v-model="input1" style="width: 240px" placeholder="Pick a date">
      <template #suffix>
        <px-icon icon="calender-solid" />
      </template>
    </px-input>
    <px-input
      v-model="input2"
      style="width: 240px"
      placeholder="Type something"
    >
      <template #prefix>
        <px-icon icon="search" />
      </template>
    </px-input>
  </div>
</template>

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

文本域​ ​

用于输入多行文本信息可缩放的输入框。添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

<template>
  <px-input
    v-model="textarea"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="Please input"
  />
</template>

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

复合型输入框​ ​

可以在输入框中前置或后置一个元素, 通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

WARNING

待 px-select 组件开发完成后补充

<template>
  <div>
    <px-input
      v-model="input1"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #prepend>Http://</template>
    </px-input>
  </div>
  <div class="mt-4">
    <px-input
      v-model="input2"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #append>.com</template>
    </px-input>
  </div>
  <div class="mt-4">
    <px-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <px-select v-model="select" placeholder="Select" style="width: 115px">
          <px-option label="Restaurant" value="1" />
          <px-option label="Order No." value="2" />
          <px-option label="Tel" value="3" />
        </px-select>
      </template>
      <template #append>
        <px-button icon="search" />
      </template>
    </px-input>
  </div>
  <div class="mt-4">
    <px-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <px-button icon="search" />
      </template>
      <template #append>
        <px-select v-model="select" placeholder="Select" style="width: 115px">
          <px-option label="Restaurant" value="1" />
          <px-option label="Order No." value="2" />
          <px-option label="Tel" value="3" />
        </px-select>
      </template>
    </px-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
</script>

<style>
.input-with-select .px-input__append,
.input-with-select .px-input__prepend {
  padding: 0;
  margin: 0;
}
</style>

尺寸 ​

通过 size 属性设置 Input 的尺寸。

<template>
  <div class="flex items-center gap-8 mb-8">
    <px-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
    />
    <px-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
    />
    <px-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
    />
  </div>
  <div class="flex items-center gap-8 mb-8">
    <px-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
    />
    <px-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
    />
    <px-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
    />
  </div>
  <div class="flex items-center gap-8">
    <px-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
    />
    <px-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
    />
    <px-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
    />
  </div>
</template>

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

API_Table插件测试 ​

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Input API

Props

NameDescriptionTypeDefault
id输入框唯一标识string-
modelValue输入框绑定值string-
type输入框类型stringtext
size输入框尺寸enumdefault
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
showPassword是否显示切换密码图标booleanfalse
placeholder输入框占位符string-
readonly原生readonly属性, 是否只读booleanfalse
autocomplete原生autocomplete属性stringoff
autofocus原生autofocus属性, 是否自动获取焦点booleanfalse
form原生form属性, 指定输入框所属的表单string-

Events

NameDescriptionType
update:modelValue输入框值改变时触发function
input在 Input 值改变时触发function
change仅当 modelValue 改变时, 当输入框失去焦点或用户按 Enter 时触发function
focus输入框获得焦点时触发function
blur输入框失去焦点时触发function
clear点击清除按钮时触发function

Slots

NameDescription
prefix输入框头部内容
suffix输入框尾部内容
prepend输入框前置内容
append输入框后置内容

Expose

NameDescriptionType
ref获取原生输入框元素object
focus获取焦点function
blur失去焦点function
select选中输入框内容function
clear清空输入框内容function
本站访客数 人次 本站总访问量 次