@whitesev/pops 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,243 @@
+# 弹窗库
+
+```js
+npm i @whitesev/pops
+```
+
+## pops.isPhone
+
+判断是否是手机访问
+
+```js
+pops.iPhone()
+-> true
+```
+
+## pops.alert
+
+普通信息框
+
+```js
+pops.alert({
+    content: {
+        text: "普通信息框",
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi72wJ1.png](https://s11.ax1x.com/2023/12/23/pi72wJ1.png)
+
+## pops.confirm
+
+询问框
+
+```js
+pops.confirm({
+    content: {
+        text: "询问框",
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi720Rx.png](https://s11.ax1x.com/2023/12/23/pi720Rx.png)
+
+## pops.drawer
+
+抽屉层
+
+```js
+pops.drawer({
+    content: {
+        text: "抽屉层",
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi72rQK.png](https://s11.ax1x.com/2023/12/23/pi72rQK.png)
+
+## pops.folder
+
+文件夹层
+
+```js
+pops.folder({
+    title: {
+        text: "文件夹层",
+    },
+    folder: [{
+        fileName: "测试文件.apk",
+        fileSize: 30125682,
+        fileType: "apk",
+        createTime: 1702036410440,
+        latestTime: 1702039410440,
+        isFolder: false,
+        index: 1,
+        clickEvent() {
+            console.log("下载文件：", this.fileName);
+            return "https://update.greasyfork.org/scripts/456485/pops.js";
+        },
+    }],
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi72ssO.png](https://s11.ax1x.com/2023/12/23/pi72ssO.png)
+
+## pops.iframe
+
+iframe层
+
+```js
+pops.iframe({
+    url: window.location.href,
+    title: {
+        text: "iframe层"
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi722od.png](https://s11.ax1x.com/2023/12/23/pi722od.png)
+![pi72cee.png](https://s11.ax1x.com/2023/12/23/pi72cee.png)
+![pi72gdH.png](https://s11.ax1x.com/2023/12/23/pi72gdH.png)
+
+## pops.loading
+
+加载层
+
+```js
+pops.loading({
+    parent: document.body,
+    content: {
+        text: "加载中...",
+        icon: "loading",
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![pi72IQf.png](https://s11.ax1x.com/2023/12/23/pi72IQf.png)
+
+## pops.panel
+
+面板层
+
+```js
+pops.panel({
+    title: {
+        text: "面板层",
+    },
+    content: [{
+        id: "whitesev-panel-config",
+        title: "菜单配置",
+        headerTitle: "菜单配置",
+        isDefault: true,
+        forms: []
+    }],
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![o7kyTc.png](https://vip.helloimg.com/i/2024/03/17/65f68c239ece4.png)
+
+## pops.prompt
+
+输入框
+
+```js
+pops.prompt({
+    content: {
+        text: "输入框的内容",
+    },
+    mask: {
+        enable: true,
+        clickEvent:{
+            toClose: true
+        }
+    },
+});
+```
+
+![o7rGnT.png](https://vip.helloimg.com/i/2024/03/17/65f68c25cf459.png)
+
+## pops.rightClickMenu
+
+右键菜单层
+
+```js
+pops.rightClickMenu({
+    target: document.documentElement,
+    data: [{
+        icon: pops.config.iconSVG.search,
+        iconIsLoading: false,
+        text: "右键菜单",
+        callback(event) {
+            console.log("点击：" + this.text, event);
+        },
+    },]
+});
+```
+
+![o7r5Uq.png](https://vip.helloimg.com/i/2024/03/17/65f68c281dcb0.png)
+
+## pops.tooltip
+
+提示框
+
+```js
+pops.tooltip({
+    target: document.querySelector("#user-container"),
+    content: "鼠标悬浮提示内容",
+});
+```
+
+![o7rCFr.png](https://vip.helloimg.com/i/2024/03/17/65f68c299c729.png)
+
+## pops.searchSuggestion
+
+```js
+let suggestion = pops.searchSuggestion({
+    target: document.querySelector("input"),
+})
+suggestion.init();
+```
+
+## 详情参数请看代码