尧图网站建设 
shadcn-vue Textarea 组件完全指南安装、属性解析与表单集成实战【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue导读Textarea 是 shadcn-vue 中用于展示多行文本输入的表单组件它在原生textarea之上封装了完整的主题样式与受控值绑定能力开箱即用地支持占位符、禁用态、焦点环以及 v-model 双向绑定。本文以 textarea.md 为骨架结合仓库中default与new-york两套风格的源码实现完整讲解安装方式、核心 API、六种常用场景的示例代码并深入剖析其基于useVModel的受控原理与配合 vee-validate 表单校验的落地写法。Textarea 是什么Textarea 组件是对原生textarea元素的样式化封装核心目标有两个统一样式通过 Tailwind CSS 类组合出与 shadcn-vue 其他表单组件Input、Select 等一致的视觉体系简化受控逻辑通过modelValue/update:modelValue实现 Vue 标准的v-model双向绑定无需开发者手动维护value事件。在仓库中Textarea 的组件源码位于 Textarea.vuedefault 风格与 Textarea.vuenew-york 风格两套实现的脚本逻辑完全相同仅样式类存在差异。配套的示例代码位于 examples 目录 下覆盖文档中列出的全部场景。安装文档提供了两种安装方式CLI 自动安装与手动复制。方式一CLI 安装推荐在项目根目录执行npx shadcn-vuelatest add textarea该命令会自动完成依赖安装、组件文件生成与路径别名配置。shadcn-vue 的 CLI 是 Vue 生态中 shadcn-ui 的命令行实现add子命令会从组件注册表拉取 Textarea 组件及其依赖。方式二手动安装手动安装分两步第一步安装运行依赖npm install reka-ui从源码 Textarea.vue 可以看到Textarea 实际还依赖vueuse/core提供useVModel与项目内的cn工具函数通常位于src/lib/utils.ts因此完整的依赖还包括npm install reka-ui vueuse/core同时需要保证项目中存在基于clsx与tailwind-merge的cn工具函数cn用于合并默认样式与外部传入的class。第二步复制组件代码将 Textarea.vue 复制到项目的src/components/ui/textarea/Textarea.vue并确认路径别名指向srcVite 或 Nuxt 配置中通常已定义。基本用法安装完成后在组件中按如下方式引入使用script setup langts import { Textarea } from /components/ui/textarea /script template Textarea / /templateTextarea支持原生textarea的全部标准属性包括placeholder、disabled、id、rows、maxlength等均会透传到内部的原生元素上。组件 API 与源码解析完整阅读 Textarea.vue 的script setup部分可以提炼出该组件的完整公开 APIPropsProp类型说明classHTMLAttributes[class]追加到组件根元素上的自定义样式类经cn合并modelValuestring \| numberv-model绑定的值defaultValuestring \| number非受控模式下的初始默认值Emits事件载荷类型说明update:modelValuestring \| numberv-model更新事件受控绑定原理源码中的关键逻辑是useVModel的使用const modelValue useVModel(props, modelValue, emits, { passive: true, defaultValue: props.defaultValue, })这是vueuse/core提供的v-model封装其作用双向绑定内部v-modelmodelValue直接绑定到原生textarea用户输入会自动触发update:modelValue事件实现与props.modelValue的同步受控/非受控双模式当外部传入modelValue时为受控模式未传入时回退到defaultValue成为非受控组件与 React 生态中 defaultValue 的设计思路一致passive 优化passive: true表示组件不会在外部主动同步 props而是依赖 Vue 的响应式系统减少不必要的性能开销。两套风格差异对比 default 版 与 new-york 版 的类名可以看到defaultmin-h-2080px 最小高度、bg-background不透明背景、focus-visible:ring-2双层焦点环new-yorkmin-h-[60px]60px 最小高度、bg-transparent透明背景、focus-visible:ring-1单层焦点环并附带shadow-sm。两套风格共享的基础样式包括flex w-full rounded-md border border-input px-3 py-2 text-sm placeholder:text-muted-foreground以及禁用态样式disabled:cursor-not-allowed disabled:opacity-50。选择哪套风格取决于你初始化项目时指定的样式选项可在 shadcn-vue 初始化时配置。示例详解文档列出的六个示例在仓库中均有完整实现以下逐一讲解。默认示例Default源码TextareaDemo.vuescript setup langts import { Textarea } from /registry/default/ui/textarea /script template Textarea placeholderType your message here. / /template最基础的用法仅通过placeholder属性给出输入提示文案。禁用态Disabled源码TextareaDisabled.vuetemplate Textarea placeholderType your message here. disabled / /template通过原生disabled属性禁用输入。从源码类名disabled:cursor-not-allowed disabled:opacity-50可知禁用态会自动呈现不可点击光标并降低 50% 透明度。带标签With Label源码TextareaWithLabel.vuetemplate div classgrid w-full gap-1.5 Label formessageYour message/Label Textarea idmessage placeholderType your message here. / /div /template配合 shadcn-vue 的 Label 组件使用。关键在于Label的for与Textarea的id必须一致点击标签文本即可聚焦输入框这也是无障碍a11y的最佳实践。带说明文本With Text源码TextareaWithText.vuetemplate div classgrid w-full gap-1.5 Label formessage-2Your message/Label Textarea idmessage-2 placeholderType your message here. / p classtext-sm text-muted-foreground Your message will be copied to the support team. /p /div /template在标签与输入框下方追加一段辅助说明文字使用text-sm text-muted-foreground样式呈现为弱化的次级文案适合描述输入规则或用途。带按钮With Button源码TextareaWithButton.vuetemplate div classgrid w-full gap-2 Textarea placeholderType your message here. / ButtonSend message/Button /div /template典型的输入 提交组合布局常用于消息发送、评论表单等场景。注意这里 Button 未显式设置type在实际表单中如需提交应写为typesubmit。表单集成Form源码TextareaForm.vuenew-york 风格同款见 TextareaForm.vue这是最完整的实战示例演示了 Textarea 与vee-validate zod的深度集成script setup langts import { toTypedSchema } from vee-validate/zod import { useForm } from vee-validate import { h } from vue import * as z from zod import { Button } from /registry/default/ui/button import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from /registry/default/ui/form import { Textarea } from /registry/default/ui/textarea import { toast } from /registry/default/ui/toast const formSchema toTypedSchema(z.object({ bio: z .string() .min(10, { message: Bio must be at least 10 characters. }) .max(160, { message: Bio must not be longer than 30 characters. }), })) const { handleSubmit } useForm({ validationSchema: formSchema }) const onSubmit handleSubmit((values) { toast({ title: You submitted the following values:, description: h(pre, { class: mt-2 w-[340px] rounded-md bg-slate-950 p-4 }, h(code, { class: text-white }, JSON.stringify(values, null, 2))), }) }) /script template form classw-full space-y-6 submitonSubmit FormField v-slot{ componentField } namebio FormItem FormLabelBio/FormLabel FormControl Textarea placeholderTell us a little bit about yourself classresize-none v-bindcomponentField / /FormControl FormDescription You can spanmention/span other users and organizations. /FormDescription FormMessage / /FormItem /FormField Button typesubmit Submit /Button /form /template该示例的关键要点zod schema 定义校验规则bio字段要求 10160 个字符toTypedSchema将 zod schema 转换为 vee-validate 的类型化 schemav-bindcomponentField打通表单绑定FormField提供的componentField包含了modelValue、onUpdate:modelValue等事件通过v-bind一次性透传给 Textarea无需手动编写绑定代码resize-none禁用拖拽缩放给class传入 Tailwind 类即可覆盖默认样式体现了cn合并机制的灵活性完整表单反馈FormDescription展示辅助说明FormMessage自动渲染校验错误信息toast展示提交结果。整个流程清晰展示了 Textarea 在真实表单场景中的标准姿势FormField负责取字段状态FormControl包裹控件componentField完成值绑定错误信息由FormMessage自动呈现。样式定制建议Textarea 的默认样式通过cn()与props.class合并因此自定义样式有两种途径直接传class如示例中的classresize-none追加的 Tailwind 类会覆盖同属性默认值tailwind-merge保证后传入的类优先修改组件源码直接编辑 Textarea.vue 中的默认类名例如调整最小高度min-h-20、圆角rounded-md或焦点环样式。若想全局统一调整 Textarea 风格建议通过修改components/ui/textarea/Textarea.vue并配合设计系统的 CSS 变量如--input、--ring、--background、--muted-foreground实现主题联动。小结Textarea 组件虽然代码量不大但集中体现了 shadcn-vue 的设计哲学样式与逻辑分离、开箱即用的受控绑定、以及与表单体系的平滑集成。掌握本文内容后你可以通过 CLI 或手动方式快速集成 Textarea 组件理解modelValue/defaultValue/class三个核心属性及useVModel的底层绑定原理灵活组合 Label、Button、Form 等组件搭建完整的多行文本输入场景使用 vee-validate zod 为多行文本添加校验逻辑。如需进一步了解相关组件可继续阅读 input.md、form.md 与 label.md 等文档。【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 shadcn-vue Textarea 组件完全指南：安装、属性解析与表单集成实战
shadcn-vue Textarea 组件完全指南安装、属性解析与表单集成实战【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue导读Textarea 是 shadcn-vue 中用于展示多行文本输入的表单组件它在原生textarea之上封装了完整的主题样式与受控值绑定能力开箱即用地支持占位符、禁用态、焦点环以及 v-model 双向绑定。本文以 textarea.md 为骨架结合仓库中default与new-york两套风格的源码实现完整讲解安装方式、核心 API、六种常用场景的示例代码并深入剖析其基于useVModel的受控原理与配合 vee-validate 表单校验的落地写法。Textarea 是什么Textarea 组件是对原生textarea元素的样式化封装核心目标有两个统一样式通过 Tailwind CSS 类组合出与 shadcn-vue 其他表单组件Input、Select 等一致的视觉体系简化受控逻辑通过modelValue/update:modelValue实现 Vue 标准的v-model双向绑定无需开发者手动维护value事件。在仓库中Textarea 的组件源码位于 Textarea.vuedefault 风格与 Textarea.vuenew-york 风格两套实现的脚本逻辑完全相同仅样式类存在差异。配套的示例代码位于 examples 目录 下覆盖文档中列出的全部场景。安装文档提供了两种安装方式CLI 自动安装与手动复制。方式一CLI 安装推荐在项目根目录执行npx shadcn-vuelatest add textarea该命令会自动完成依赖安装、组件文件生成与路径别名配置。shadcn-vue 的 CLI 是 Vue 生态中 shadcn-ui 的命令行实现add子命令会从组件注册表拉取 Textarea 组件及其依赖。方式二手动安装手动安装分两步第一步安装运行依赖npm install reka-ui从源码 Textarea.vue 可以看到Textarea 实际还依赖vueuse/core提供useVModel与项目内的cn工具函数通常位于src/lib/utils.ts因此完整的依赖还包括npm install reka-ui vueuse/core同时需要保证项目中存在基于clsx与tailwind-merge的cn工具函数cn用于合并默认样式与外部传入的class。第二步复制组件代码将 Textarea.vue 复制到项目的src/components/ui/textarea/Textarea.vue并确认路径别名指向srcVite 或 Nuxt 配置中通常已定义。基本用法安装完成后在组件中按如下方式引入使用script setup langts import { Textarea } from /components/ui/textarea /script template Textarea / /templateTextarea支持原生textarea的全部标准属性包括placeholder、disabled、id、rows、maxlength等均会透传到内部的原生元素上。组件 API 与源码解析完整阅读 Textarea.vue 的script setup部分可以提炼出该组件的完整公开 APIPropsProp类型说明classHTMLAttributes[class]追加到组件根元素上的自定义样式类经cn合并modelValuestring \| numberv-model绑定的值defaultValuestring \| number非受控模式下的初始默认值Emits事件载荷类型说明update:modelValuestring \| numberv-model更新事件受控绑定原理源码中的关键逻辑是useVModel的使用const modelValue useVModel(props, modelValue, emits, { passive: true, defaultValue: props.defaultValue, })这是vueuse/core提供的v-model封装其作用双向绑定内部v-modelmodelValue直接绑定到原生textarea用户输入会自动触发update:modelValue事件实现与props.modelValue的同步受控/非受控双模式当外部传入modelValue时为受控模式未传入时回退到defaultValue成为非受控组件与 React 生态中 defaultValue 的设计思路一致passive 优化passive: true表示组件不会在外部主动同步 props而是依赖 Vue 的响应式系统减少不必要的性能开销。两套风格差异对比 default 版 与 new-york 版 的类名可以看到defaultmin-h-2080px 最小高度、bg-background不透明背景、focus-visible:ring-2双层焦点环new-yorkmin-h-[60px]60px 最小高度、bg-transparent透明背景、focus-visible:ring-1单层焦点环并附带shadow-sm。两套风格共享的基础样式包括flex w-full rounded-md border border-input px-3 py-2 text-sm placeholder:text-muted-foreground以及禁用态样式disabled:cursor-not-allowed disabled:opacity-50。选择哪套风格取决于你初始化项目时指定的样式选项可在 shadcn-vue 初始化时配置。示例详解文档列出的六个示例在仓库中均有完整实现以下逐一讲解。默认示例Default源码TextareaDemo.vuescript setup langts import { Textarea } from /registry/default/ui/textarea /script template Textarea placeholderType your message here. / /template最基础的用法仅通过placeholder属性给出输入提示文案。禁用态Disabled源码TextareaDisabled.vuetemplate Textarea placeholderType your message here. disabled / /template通过原生disabled属性禁用输入。从源码类名disabled:cursor-not-allowed disabled:opacity-50可知禁用态会自动呈现不可点击光标并降低 50% 透明度。带标签With Label源码TextareaWithLabel.vuetemplate div classgrid w-full gap-1.5 Label formessageYour message/Label Textarea idmessage placeholderType your message here. / /div /template配合 shadcn-vue 的 Label 组件使用。关键在于Label的for与Textarea的id必须一致点击标签文本即可聚焦输入框这也是无障碍a11y的最佳实践。带说明文本With Text源码TextareaWithText.vuetemplate div classgrid w-full gap-1.5 Label formessage-2Your message/Label Textarea idmessage-2 placeholderType your message here. / p classtext-sm text-muted-foreground Your message will be copied to the support team. /p /div /template在标签与输入框下方追加一段辅助说明文字使用text-sm text-muted-foreground样式呈现为弱化的次级文案适合描述输入规则或用途。带按钮With Button源码TextareaWithButton.vuetemplate div classgrid w-full gap-2 Textarea placeholderType your message here. / ButtonSend message/Button /div /template典型的输入 提交组合布局常用于消息发送、评论表单等场景。注意这里 Button 未显式设置type在实际表单中如需提交应写为typesubmit。表单集成Form源码TextareaForm.vuenew-york 风格同款见 TextareaForm.vue这是最完整的实战示例演示了 Textarea 与vee-validate zod的深度集成script setup langts import { toTypedSchema } from vee-validate/zod import { useForm } from vee-validate import { h } from vue import * as z from zod import { Button } from /registry/default/ui/button import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from /registry/default/ui/form import { Textarea } from /registry/default/ui/textarea import { toast } from /registry/default/ui/toast const formSchema toTypedSchema(z.object({ bio: z .string() .min(10, { message: Bio must be at least 10 characters. }) .max(160, { message: Bio must not be longer than 30 characters. }), })) const { handleSubmit } useForm({ validationSchema: formSchema }) const onSubmit handleSubmit((values) { toast({ title: You submitted the following values:, description: h(pre, { class: mt-2 w-[340px] rounded-md bg-slate-950 p-4 }, h(code, { class: text-white }, JSON.stringify(values, null, 2))), }) }) /script template form classw-full space-y-6 submitonSubmit FormField v-slot{ componentField } namebio FormItem FormLabelBio/FormLabel FormControl Textarea placeholderTell us a little bit about yourself classresize-none v-bindcomponentField / /FormControl FormDescription You can spanmention/span other users and organizations. /FormDescription FormMessage / /FormItem /FormField Button typesubmit Submit /Button /form /template该示例的关键要点zod schema 定义校验规则bio字段要求 10160 个字符toTypedSchema将 zod schema 转换为 vee-validate 的类型化 schemav-bindcomponentField打通表单绑定FormField提供的componentField包含了modelValue、onUpdate:modelValue等事件通过v-bind一次性透传给 Textarea无需手动编写绑定代码resize-none禁用拖拽缩放给class传入 Tailwind 类即可覆盖默认样式体现了cn合并机制的灵活性完整表单反馈FormDescription展示辅助说明FormMessage自动渲染校验错误信息toast展示提交结果。整个流程清晰展示了 Textarea 在真实表单场景中的标准姿势FormField负责取字段状态FormControl包裹控件componentField完成值绑定错误信息由FormMessage自动呈现。样式定制建议Textarea 的默认样式通过cn()与props.class合并因此自定义样式有两种途径直接传class如示例中的classresize-none追加的 Tailwind 类会覆盖同属性默认值tailwind-merge保证后传入的类优先修改组件源码直接编辑 Textarea.vue 中的默认类名例如调整最小高度min-h-20、圆角rounded-md或焦点环样式。若想全局统一调整 Textarea 风格建议通过修改components/ui/textarea/Textarea.vue并配合设计系统的 CSS 变量如--input、--ring、--background、--muted-foreground实现主题联动。小结Textarea 组件虽然代码量不大但集中体现了 shadcn-vue 的设计哲学样式与逻辑分离、开箱即用的受控绑定、以及与表单体系的平滑集成。掌握本文内容后你可以通过 CLI 或手动方式快速集成 Textarea 组件理解modelValue/defaultValue/class三个核心属性及useVModel的底层绑定原理灵活组合 Label、Button、Form 等组件搭建完整的多行文本输入场景使用 vee-validate zod 为多行文本添加校验逻辑。如需进一步了解相关组件可继续阅读 input.md、form.md 与 label.md 等文档。【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考