简介
vue-tingle 是一个基于 Vue.js 的移动端组件库，包含丰富的 UI 组件，如 Modal、Popover、Toast 等等。
安装
在使用 vue-tingle 前，需要先安装它。可以使用 npm 命令进行安装。
npm install vue-tingle --save
引入
在使用 vue-tingle 前，需要在项目中引入它。
import Vue from 'vue' import Tingle from 'vue-tingle' import 'vue-tingle/dist/tingle.css' Vue.use(Tingle)
引入 vue-tingle 的方式主要包含三个步骤。首先使用 import 导入，之后在 Vue 中调用 Vue.use(Tingle) 来注册插件，最后引入 vue-tingle 的样式文件。
使用
在引入 vue-tingle 后，就可以在 Vue 中使用它提供的 UI 组件了。
Modal
Modal 组件用于在视口中居中显示一块浮动的界面，常用于显示弹出框、对话框、提示框等等。
-- -------------------- ---- -------
----------
-----
------- ----------------------- --------------
------------- ---------------
---- ----- -- ---
---------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -----
-
--
-------- -
----------- -
--------- - ----
-
-
-
---------在 Modal 组件中使用 v-model 来控制 Modal 是否展示，当 v-model 绑定的值为真时，Modal 显示，否则不显示。
Popover
Popover 组件用于在关联元素上方或下方显示一块内容，常用于显示提示信息、下拉菜单、选项卡等等。
-- -------------------- ---- -------
----------
-----
------- ---------------------------------- ----------------
--------------- --------------
---- ------- -- ---
---- ---------------------
------ ------- -------
------
-----------------
------
-----------
--------
------ ------- -
----------- -
-------- -
-------- -------- ------ -
----- ------- - ---------------------------
---------------- --------
-
-
-
-
---------使用 v-popover 指令来关联 Popover 和触发 Popover 显示的元素，当触发元素被点击时，Popver 将显示在目标元素上方或下方。
Toast
Toast 组件用于在页面底部显示一条消息，常用于显示操作结果、成功提示、错误提示等等。
-- -------------------- ---- -------
----------
-----
------- ----------------------- --------------
------
-----------
--------
------ ------- -
-------- -
----------- -
---------------- ----- -----
-
-
-
---------使用 $toast 方法来显示 Toast，传入参数为要显示的 Toast 内容。
总结
vue-tingle 提供了多个常用的 UI 组件，可以大大提高我们的开发效率和界面质量。在使用中，需要注意控制组件的显隐和与其他组件的关联，以避免出现 UI 交互问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d481e8991b448d6257