什么是独立组件?
在构建前端应用程序时,更建议以将应用程序组件分解为小的、独立的和可重用的部分的思维方式进行开发。这将有助于管理代码库,因为它知道在出现问题时应该去哪里。
在前端开发中,自包含组件是指一个模块化代码单元,它封装了呈现用户界面特定部分所需的视觉元素(HTML 或 JSX)、样式 (CSS) 和行为 (JavaScript)。这些组件被设计成独立的和可重用的,使它们成为创建复杂用户界面的基本构建块。该组件允许配置并接受数据作为道具。
从上图中,有几点需要注意:
-
输入:有两个数据输入字段;数据在第一个输入中作为 prop 传递给组件,而第二个是用户输入数据。
-
组件:它是独立的、模块化的和可重用的。通过 props 接受数据并将其传递给内部配置进行处理。
-
内部配置:组件通常可以接受道具或配置选项来定制它们的外观或行为。这种灵活性使他们能够在不修改底层代码的情况下适应不同的用例;所有工作都在组件内完成。
在此示例中,我们将使用 VueJs 创建一个可重用的输入字段、一个下拉选择和一个模式弹出组件。这些组件是我们在开发本系列的项目阶段时将使用的组件。该组件不是可访问的输入,因为它缺少一些重要的可访问性功能,例如键盘控制和 wai-aria 角色。
这是为了以简短明了的方式向读者解释这个概念而创建的。但是,在构建生产环境时,应该努力使自己的应用程序易于访问。
构建可重复使用的表单输入
要在 Vue 中构建一个独立的组件,您可以按照以下步骤操作:
注意:我们使用的是第 1 部分中设置的现有 Vue 项目。
第一步:新建一个文件夹,比如命名为common。在您的组件目录中。
该文件夹将包含我们所有的可重用组件
第 2 步:创建一个新的组件文件。
在您的项目目录中,导航到 src/components/common 文件夹(如果不存在则创建它)。为您的组件创建一个新文件,例如 CustomInput.vue。
第 3 步:定义组件
在您首选的代码编辑器中打开 CustomInput.vue 文件,并使用 Vue 的单文件组件语法定义您的组件。
src/components/common/CustomInput.vue
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">template</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">form-control</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">label</span> <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">show</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">isLabel</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-declaration-color)">for</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">IdName</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{{</span> <span style="color:var(--syntax-name-color)">labelValue</span> <span style="color:var(--syntax-text-color)">}}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/label</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">input</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">CustomType</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">custom__inputs</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">placeholder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">PlaceHolder</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">value</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">readonly</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">readOnly</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">IdName</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">autofocus</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">setFocus</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">autocomplete</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">setAutocomplete</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">@</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onInput</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">p</span> <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">show</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">withValidation</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{{</span> <span style="color:var(--syntax-name-color)">errorMsg</span> <span style="color:var(--syntax-text-color)">}}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/p</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/template</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">script</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">CustomInput</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Label</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">CustomType</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">text</span><span style="color:var(--syntax-string-color)">'</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">readOnly</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">IdName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">setFocus</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">setAutocomplete</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">methods</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">onInput</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">){</span>
<span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">$emit</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">input</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/script</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">style</span> <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">scss</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">//component styles</span>
<span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">form</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">control</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">direction</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">column</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">align</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">items</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">start</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">margin</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">bottom</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">rem</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-error-color)">&</span> <span style="color:var(--syntax-name-color)">label</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)">&</span> <span style="color:var(--syntax-name-color)">p</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">14</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-name-color)">e74e3c</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">custom__inputs</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">10</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">16</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-name-color)">solid</span> #<span style="color:var(--syntax-name-color)">eee</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">border</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">100</span><span style="color:var(--syntax-error-color)">%</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-error-color)">&</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">focus</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-name-color)">solid</span> #<span style="color:var(--syntax-literal-color)">67679</span><span style="color:var(--syntax-name-color)">ac5</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/style</span>>
</code></span></span>
第 4 步:使用组件。
要使用您的自定义输入组件,您可以将其导入另一个 Vue 组件并将其包含在模板中。比如进入同一个src文件夹下的view文件夹,使用Home.vue中的组件,如下:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">template</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">home</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)"><!--</span> <span style="color:var(--syntax-name-color)">render</span> <span style="color:var(--syntax-name-color)">emit</span> <span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-error-color)">--></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">form</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">form__container</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">action</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">CustomInputVue</span>
<span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">model</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">firstName</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">firstName</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'Firstname'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'required'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'FirstName'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-error-color)">/></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">CustomInputVue</span>
<span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">model</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'hello@example'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'required'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'Email'</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-error-color)">/></span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">button</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">btn</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-name-color)">submit</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/button</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/form</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/template</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">script</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">// @ is an alias to /src</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">CustomInputVue</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@/components/common/CustomInput.vue</span><span style="color:var(--syntax-string-color)">'</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">HomeView</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">components</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">CustomInputVue</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">(){</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">parentData</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">You are learning about props in this article</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">newMsg</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">hello</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/script</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">style</span> <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">scss</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">form__container</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">40</span><span style="color:var(--syntax-error-color)">%</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0</span> <span style="color:var(--syntax-name-color)">auto</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">btn</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-literal-color)">0000</span><span style="color:var(--syntax-name-color)">ff</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-name-color)">fff</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">18</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">7</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">15</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">border</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/style</span>>
</code></span></span>
这个组件的使用有几点需要注意
labelValue
:它接受字符串数据;它用于传递输入的标签标题。设置为 true 时应与 isLabel 一起使用。
isLabel
:它接受布尔数据;默认为 false;如果要使用内部标签,请将其设置为 true;否则,它应该是错误的。
CustomType
:它接受字符串数据;您可以将需要使用的输入类型传递给它。
PlaceHolder
: 它接受字符串数据。
value
:它接受字符串数据;
readOnly
:它接受布尔数据;如果您需要将表单输入设置为只读,则应将其设置为 true。
IdName
:这是为了将 id 传递给表单输入,它接受一串数据。
setFocus
:接受一个布尔值,这是为了控制输入字段的焦点。
setAutocomplete
:这是为了在文本输入时设置 HTML 自动完成。
withValidation
: 这个默认是false,但是如果你想给props添加验证信息,可以设置为true。
errorMsg
:接受一串数据;作为错误消息,应将“with validation”设置为 true。
最终结果的图像: