简介
vodal-hight 是一款基于 Vue.js 和 Vodal.js 开发的弹窗组件库。与传统的弹窗组件相比，vodal-hight 在视觉效果和交互体验上有着更高的要求和更多的功能。
安装
使用 npm 安装 vodal-hight:
npm install vodal-hight --save
使用
基本用法
在项目入口文件中引入 vodal-hight 弹窗组件:
import VodalHight from 'vodal-hight' import Vue from 'vue' Vue.use(VodalHight)
在页面组件中使用：
-- -------------------- ---- -------
----------
-----
------------ ------------
--- -----------------------
-----------
------- ------------- -------------------------------
--------------
------- --------------------------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-----------------------
--
------------ -
------------------------
--
--
-
---------这样就可以在页面中使用 vodal-hight 弹窗了。
高级用法
vodal-hight 提供了很多可定制的属性和事件，让开发者可以灵活地定制弹窗样式和交互体验。
属性
mask-visible：控制弹窗的遮罩层是否可见，可接受 Boolean 类型的值，默认为 true。mask-closable：控制点击遮罩层是否关闭弹窗，可接受 Boolean 类型的值，默认为 true。close-on-esc：控制按下 Esc 键是否关闭弹窗，可接受 Boolean 类型的值，默认为 true。show-close：控制是否显示关闭按钮，可接受 Boolean 类型的值，默认为 true。disable-focus-on-mount：控制弹窗打开时是否禁用焦点，可接受 Boolean 类型的值，默认为 false。content-max-height：控制弹窗内容的最大高度，可接受 String 或 Number 类型的值，默认为 '70%'。disable-resize：控制是否禁用窗口大小改变时自动调整弹窗大小，可接受 Boolean 类型的值，默认为 false。width：控制弹窗的宽度，可接受 String 或 Number 类型的值，默认为 '500px'。height：控制弹窗的高度，可接受 String 或 Number 类型的值，默认为 'auto'。left：控制弹窗的左侧距离，可接受 String 或 Number 类型的值，默认为 'auto'。right：控制弹窗的右侧距离，可接受 String 或 Number 类型的值，默认为 'auto'。top：控制弹窗的顶部距离，可接受 String 或 Number 类型的值，默认为 '20vh'。bottom：控制弹窗的底部距离，可接受 String 或 Number 类型的值，默认为 'auto'。
事件
vodal-hight 提供了多个事件，通过这些事件可以灵活地处理弹窗的交互体验。
open：弹窗打开时触发的事件。opened：弹窗完全打开时触发的事件。close：弹窗关闭时触发的事件。closed：弹窗完全关闭时触发的事件。
示例代码
-- -------------------- ---- -------
----------
-----
------------
-----------
---------------------
----------------------
---------------------
------------------
-------------------------------
---------------------------
-----------------------
--------------
--------------
------------
-------------
-----------
--------------
--------------
------------------
----------------
------------------
-
--- -----------------------
-------------------
------- ------------- -------------------------------
--------------
------- --------------------------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-----------------------
--
------------ -
------------------------
--
-------- -
-------------------
--
---------- -
---------------------
--
--------- -
-------------------
--
---------- -
---------------------
--
--
-
---------总结
vodal-hight 是一款基于 Vue.js 和 Vodal.js 开发的弹窗组件库，提供了灵活的定制属性和事件。通过本文的介绍，您可以轻松上手使用 vodal-hight，并灵活地应用到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac67149