介绍
本文档主要用于描述 ShadcnInput 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const input = ref('')
</script>清空 (clearable)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" clearable :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" size="small" :dark="darkMode" />
<ShadcnInput v-model="input" placeholder="Input" size="default" :dark="darkMode" />
<ShadcnInput v-model="input" placeholder="Input" size="large" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>字数统计 (word-count)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" word-count :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>最大统计值 (max-count)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" word-count :max-count="100" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>前缀 & 后缀 (prefix & suffix)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" :dark="darkMode">
<template #prefix>
<span class="text-xs text-gray-300">P</span>
</template>
<template #suffix>
<span class="text-xs text-gray-300">S</span>
</template>
</ShadcnInput>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" disabled :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>密码 (password)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" type="password" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>多行文本 (textarea)
查看代码
vue
<template>
<ShadcnInput v-model="input" placeholder="Input" type="textarea" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const input = ref('Hello View Shadcn UI')
</script>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<ShadcnInput v-model="inputValue" glass :dark="isDark" placeholder="请输入内容" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const inputValue = ref('')
</script>