Passion UI

Appearance

Return to top
On this page

Input

尺寸 size

TIP

size 同 button 的size

WARNING

mini 和 tiny 没什么本质上的不同 mini 的内边距比 tiny 小2px

show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input v-for="item in sizes" :key="item" :size="item" :placeholder="item">
    </p-input>
    <p-input placeholder="输入些什么"></p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput } from 'passion-ui'

</script>
<style scoped>
</style>

圆角 round

show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input v-for="item in sizes" :key="item" round :size="item" :placeholder="item">
    </p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput } from 'passion-ui'

</script>
<style scoped>
</style>

可清除 clearable

show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input clearable placeholder="clearable 可清除的" @clear="onClear" @input="onInput"></p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput, message } from 'passion-ui'
import { ref, watch } from 'vue'
const onInput = (e) => {
  console.log(e)
}
const onClear = (v) => {
  message.info(`清除了:${v}`)
}
</script>
<style scoped>
</style>

加载中 loading

show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input v-model:value="value" loading placeholder="loading 状态"></p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput, message } from 'passion-ui'
import { ref, watch } from 'vue'
const value = ref()

</script>
<style scoped>
</style>

禁用 disabled

show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input v-model:value="value" clearable disabled placeholder="disabled 状态"></p-input>
    <p-input v-model:value="value" clearable placeholder="disabled 状态"></p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput, message } from 'passion-ui'
import { ref, watch } from 'vue'
const value = ref('123')

</script>
<style scoped>
</style>

前缀与后缀

元
show me the code
<template>
  <div class="flex gap-2 flex-wrap">
    <p-input v-model:value="value" disabled loading clearable placeholder="disabled 状态">
      <template #prefix>
        <p-icon icon="line-md:search"></p-icon>
      </template>
      <template #suffix>
        元
      </template>
    </p-input>
  </div>
</template>

<script setup lang='ts'>
import { sizes, PInput, message, PIcon } from 'passion-ui'
import { ref, watch } from 'vue'
const value = ref('123')

</script>
<style scoped>
</style>