简介
mobi-plugin-show-hide-on-mobile是一款用于前端开发的npm包，主要用于控制PC版和移动版页面元素的可见性。
安装
使用npm安装该插件:
npm install mobi-plugin-show-hide-on-mobile --save
使用方法
该插件有两种使用方式。
一、基本使用方法
该插件提供了一个全局变量mobiPluginShowHideOnMobile来控制页面元素的可视状态。
1. 引入插件
在需要使用该插件的代码文件中引入mobi-plugin-show-hide-on-mobile。
import mobiPluginShowHideOnMobile from 'mobi-plugin-show-hide-on-mobile';
2. 调用方法
使用mobiPluginShowHideOnMobile的hideOnPC()和hideOnMobile()方法分别控制PC版和移动版页面元素的可见性。方法接收两个参数：元素id和元素class。
// 隐藏PC版元素id为'my-pc-element'的元素
mobiPluginShowHideOnMobile.hideOnPC('my-pc-element');
// 隐藏移动版元素class为'my-mobile-element'的元素
mobiPluginShowHideOnMobile.hideOnMobile('.my-mobile-element');二、高级使用方法
该插件还提供了一种高级使用方式，能够使用CSS媒体查询自定义页面元素的可视状态。
1. 引入插件
在需要使用该插件的代码文件中引入mobi-plugin-show-hide-on-mobile。
import mobiPluginShowHideOnMobile from 'mobi-plugin-show-hide-on-mobile';
2. 配置插件
使用mobiPluginShowHideOnMobile的config()方法配置插件：
mobiPluginShowHideOnMobile.config({
pcQueryStr: '(min-width: 992px)',
mobileQueryStr: '(max-width: 991px)',
});该方法有两个参数：
pcQueryStr: PC版媒体查询字符串。当该查询条件成立时，PC版元素将显示，移动版元素将隐藏。mobileQueryStr: 移动版媒体查询字符串。当该查询条件成立时，移动版元素将显示，PC版元素将隐藏。
3. CSS样式
在需要控制的元素的CSS样式中添加媒体查询相关CSS样式：
-- -------------------- ---- -------
-- ----------- --
---------------
-------- ------
-
-- ------- --
------ ----------- -------
---------------
-------- -----
-
-
-- ----------- --
-------------------
-------- -----
-
-- ------- --
------ ----------- -------
-------------------
-------- ------
-
-示例代码
-- -------------------- ---- -------
-- ----
------ -------------------------- ---- ----------------------------------
-- -------------------------------------------------------------------
-----------------------------------
----------- ------------ --------
--------------- ------------ --------
---
-- ----------------------------
-----------------------------------------------------
-- -----------------------------------
--------------------------------------------------------------总结
mobi-plugin-show-hide-on-mobile是一款非常实用的npm包，能够方便地控制PC版和移动版页面元素的可见性，帮助我们更好地开发响应式网站。希望通过本文的介绍和示例代码能够让读者更好地了解和使用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc52b5cbfe1ea0612755