Material Design 是 Google 推出的一种新的视觉设计语言，致力于创造出干净、简单且直观的用户体验。在前端开发中，如何高效、简单地实现 Material Design 风格的表单控件呢？Vue.js 可以帮你实现这个目标。
Vue.js 简介
Vue.js 是一个轻量级、高效、灵活以及渐进性的 JavaScript 框架，用于构建用户界面。Vue.js 的核心库只关注视图层，通过简单的 API 可以实现组件化、模块化、路由管理、状态管理等功能。
Material Design 风格的表单控件
Material Design 风格的表单控件具备清晰明了、色彩丰富、直观易用等特点。本文将介绍如何通过 Vue.js 实现这种风格的表单控件。
1. 文本框
文本框是表单控件的基础。在 Material Design 风格中，文本框具有鲜明的圆角、浅色底色、悬浮标签和数个状态：
- 正常状态
- 激活状态
- 普通错误状态
- 严重错误状态
示例代码：
----------
---- -------------------
------ ---------------------------
------
--------
------------
--------------
--------------------------
-------------------
---------------------
-
---- --------------------------------------------
------
-----------
--------
------ ------- -
------ -
--- -------
------ -------
----- -------
------ -------
------------ -------
--------- --------
--
---- -- -
------ -
---------- ------
------------- --
-
--
-------- -
----------- -- -
-------------- - -----
--------------------
--
------------ -- -
-------------- - ----
--
------------- -- -
-- -------------- -- --------------------------- -
----------------- - -------- ------
- ---- -
----------------- - --
-
-
-
-
---------
------ -------
----------- -
--------- ---------
-------------- -----
-
----- -
--------- ---------
----- --
---- --
---------- -----
------ --------
----------- --------- --- ------------
-
----- -
------ -----
------- -----
-------- ---- --
---------- -----
------ -----
----------------- ------------
------- -----
-------------- ----
-------------- --- ----- --------
----------- --- --- ------------
-
----------- ------------
----------- ----------------------------- -
------------- --------
-
----------- ----------- - ------
----------- ----------------------------- - ----- -
---------- -----
---- ------
------ --------
-
-------------- -
------ --------
---------- -----
----------- ----
-
--------2. 单选框和复选框
在 Material Design 风格中，单选框和复选框的圆角都是四分之一。针对不同状态，单选框和复选框可渲染选中、未选中和禁用三种状态。
示例代码：
----------
---- -----------------
------ ----------
------
--------
------------
--------------
--------------------
---------------------- -----------------------
-
--
----------
--------- ------------- ---------- -------------- ---------- --
---------------------- ---------- -- -------------
-----
---------
--------
------
-----------
--------
------ ------- -
------ -
--- -------
------ -------
----- -------
------ --------
--------- -------
--
--------- -
--------- -- -
------ ----------
--
---------- -- -
------ -------------
-
-
-
---------
------ -------
--------- -
-------- -----
------------ -------
-------------- -----
-
--- -
--------- ---------
-------- -------------
------ -----
------- -----
------------- -----
--------------- -------
-------------- ----
------- --- ----- --------
----------- --- ---- ---------
-
---------- -
-------- ---
--------- ---------
---- --
----- --
------ -----
------- -----
-------------- ----
----------- --------
---------- ---------
----------------- ------ -------
----------- --- --- ------------
-
----------- -
------------- --------
-
------------------ -
---------- ---------
-
------------ -
----------- --------
------------- --------
--------------- -----
------- ------------
-
------------------- -
----------- --------
-
--------3. 下拉框
在 Material Design 风格中，下拉框与普通文本框类似，同样具有悬浮标签、圆角和水波纹效果，下拉框还具有箭头展开和收缩的样式。
示例代码：
----------
---- ---------------
------ ---------------------------
---- ------------- ------------------------
------
--------
--------------
--------------------------
---------------
-
-- ------------------
------
---- ---------------- --------- ----- ------ ---
----
--- --------------- ------ -- -------- ------------ ------------------------------
----------------
-----
-----
------
------
-----------
--------
------ ------- -
------ -
--- -------
------ -------
------ -------
------------ -------
-------- ------
--------- --------
--
---- -- -
------ -
------- ------
------------- --
-
--
-------- -
-------------- -- -
----------- - ------------
--
------------ -------- -
------------------- -------------
----------- - -----
--
------------- -- -
-- -------------- -- --------------------------- -
----------------- - -------- ------
- ---- -
----------------- - --
-
-
-
-
---------
------ -------
------- -
--------- ---------
-------------- -----
-
----- -
--------- ---------
----- --
---- --
---------- -----
------ --------
----------- --------- --- ------------
-
------ -
--------- ---------
-------- -----
------------ -------
---------------- --------------
------ -----
------- -----
-------- ---- --
----------------- ------------
------- -----
-------------- ----
-------------- --- ----- --------
------- --------
-
------------------- -
------------- --------
-------- -----
-
------ ------- -
--------- ---------
-------- -------------
------ -----
------- -----
------------- ----
--------------- -------
------- -----
-------- -----
----------------- ------------
------------ --- ----- --------
---------- ------------- ---------------- ----------------
----------- --- --- ------------
-
--------- -
--------- ---------
---- -----
----- --
------ -----
-------- -----
----------- ------
--------- -----
----------------- -----
-------------- ----
----------- - --- --- ---------------- - - - --- ----------------
----------- --- --- ------------
-
-------------- -
-------- ------
-
--------- -- -
------- -----
------------ -----
---------- -----
-------- - -----
------- --------
------------ -----
----------- --- --- ------------
-
--------- -------- -
----------------- --------
-
--------- --------- -
----------------- --------
------ -----
-
--------- -------------------- -
----------------- --------
-
--------- ------------------- -
----------------- --------
-
--------- -------------------- -
----------------- --------
------ --------
-------------------------- ----
--------------------------- ----
-
--------- ------------- -
-------------------------- ----
--------------------------- ----
-
--------- -------- -
-------- -----
-
--------结论
通过 Vue.js，我们可以较为简单地实现 Material Design 风格的表单控件，并能够对其进行定制化和扩展。对于前端开发来说，Vue.js 是一个轻量、优秀的框架，它不仅可以提升前端开发的效率，也能够帮助开发者创造出更佳优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ed408eedcc8a97c8af4b3