gwell-dialog 0.1.2 → 0.1.6

package/README.md

@@ -2,7 +2,7 @@
  * @Author: lengyihan
  * @Date: 2023-11-17 18:05:01
  * @LastEditors: lengyihan
- * @LastEditTime: 2023-12-04 16:40:14
+ * @LastEditTime: 2023-12-13 15:51:04
  * @Description:
  * @FilePath: \gwell-dialog\README.md
 -->
@@ -37,55 +37,197 @@ yarn lint
 
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
+### 使用场景
+
+弹窗组件的封装可以提高代码的复用性和可维护性，使开发者能够更加方便地在不同的场景中使用和管理弹窗，根据弹窗组件规范设计图，通过封装，可以统一弹窗的样式和行为，并提供简洁的接口供其他组件或页面调用，这样，开发者可以更加专注于业务逻辑的实现，而无需重复编写弹窗的代码。弹窗组件中设有默认的头部、内容区和尾部，这三部分分别可使用插槽自定义内容，弹窗内设有默认头部关闭按钮、取消和确定按钮，底部关闭按钮等。
+
 ### 目录结构
 
 ```
-|-- gwell-dialog
-    |-- .env.development
-    |-- .env.production
-    |-- .eslintignore
-    |-- .eslintrc.js
-    |-- .gitignore
-    |-- .npmignore
-    |-- .prettierignore
-    |-- .prettierrc
-    |-- .yarnignore
-    |-- babel.config.js
-    |-- jsconfig.json
-    |-- package-lock.json
-    |-- package.json
-    |-- postcss.config.js
-    |-- README.md
-    |-- vue.config.js
-    |-- yarn.lock
-    |-- examples
-    |   |-- App.vue
-    |   |-- main.js
-    |   |-- assets
-    |   |   |-- css
-    |   |   |   |-- style.scss
-    |   |   |-- images
-    |   |       |-- icon_bottomClose.png
-    |   |       |-- icon_close.png
-    |   |-- router
-    |   |   |-- index.js
-    |   |-- views
-    |       |-- HomeView.vue
-    |-- lib
-    |   |-- demo.html
-    |   |-- gwell-dialog.common.js
-    |   |-- gwell-dialog.common.js.map
-    |   |-- gwell-dialog.css
-    |   |-- gwell-dialog.umd.js
-    |   |-- gwell-dialog.umd.js.map
-    |   |-- gwell-dialog.umd.min.js
-    |   |-- gwell-dialog.umd.min.js.map
-    |-- packages
-    |   |-- index.js
-    |   |-- dialog
-    |       |-- index.js
-    |       |-- main.vue
-    |-- public
-        |-- favicon.ico
-        |-- index.html
+├─.env.development
+├─.env.production
+├─.eslintignore
+├─.eslintrc.js
+├─.gitignore
+├─.npmignore
+├─.prettierignore
+├─.prettierrc
+├─.yarnignore
+├─babel.config.js
+├─examples ------------------------- // 示例
+│ ├─App.vue ------------------------ // 入口文件
+│ ├─assets
+│ │ ├─css
+│ │ │ └─style.scss
+│ │ └─images
+│ │   ├─icon_bottomClose.png
+│ │   └─icon_close.png
+│ ├─main.js ------------------------ // 全局注册文件
+│ └─views
+│   └─HomeView.vue ----------------- // 组件引用示例
+├─jsconfig.json
+├─lib
+│ ├─demo.html
+│ ├─gwell-dialog.common.js
+│ ├─gwell-dialog.common.js.map
+│ ├─gwell-dialog.css
+│ ├─gwell-dialog.umd.js
+│ ├─gwell-dialog.umd.js.map
+│ ├─gwell-dialog.umd.min.js
+│ └─gwell-dialog.umd.min.js.map
+├─package.json
+├─packages
+│ ├─dialog
+│ │ ├─index.js --------------------- // 导出弹窗组件
+│ │ └─main.vue --------------------- // 弹窗组件开发
+│ └─index.js ----------------------- // 整合并导出所有组件，实现组件的全局注册
+├─postcss.config.js ---------------- // 屏幕适配
+├─public
+│ ├─favicon.ico
+│ └─index.html
+├─README.md
+├─vue.config.js -------------------- // 配置入口文件
+└─yarn.lock
+```
+
+### 可传参数
+
+```json
+{
+    showDialog: Boolean, //是否显示弹窗
+    title: String, //弹窗标题
+    closeOnClickOverlay: {
+      //点击弹窗外部可以关闭弹窗
+      type: Boolean,
+      default: true
+    },
+    className: {
+      //自定义内容区域类名
+      type: String,
+      default: '' // centered:居中, veryBottom:最底部弹窗,bottomed:底部, special:特殊类型
+    },
+    buttons: {
+      //自定义按钮
+      type: Array,
+      default: () => [
+        //如果不传按钮则默认显示确定和关闭按钮
+        // {
+        //   label: '', //标题,可以是html类型
+        //   action: Function, //方法
+        //   className: '', //自定义样式 cancelBottom:最底部取消按钮，red:红色按钮，custom:自定义按钮
+        //   style: {}
+        // }
+      ]
+    },
+    removeDefaultBtn: {
+      type: Array, //传入默认按钮defaultBtn的type值就会删除对应的默认按钮，例如：['confirm']
+      default: () => []
+    },
+    isShowDefaultBtn: {
+      //是否显示默认按钮
+      type: Boolean,
+      default: true
+    },
+    cancelButtonText: String, //取消按钮文案
+    confirmButtonText: String, //确认按钮文案
+    cancelButtonColor: String, //取消按钮颜色
+    confirmButtonColor: String, //确认按钮颜色
+    isShowCloseBtn: {
+      //是否显示顶部关闭按钮
+      type: Boolean,
+      default: false
+    },
+    isShowCloseBottomBtn: {
+      //是否显示底部关闭按钮
+      type: Boolean,
+      default: false
+    },
+    overlay: {
+      //是否展示遮罩层
+      type: Boolean,
+      default: true
+    },
+    overlayClass: String, //自定义遮罩层类名
+    overlayStyle: {
+      //自定义遮罩层样式
+      type: Object,
+      default: () => {}
+    },
+    lockScroll: {
+      //锁定背景滚动
+      type: Boolean,
+      default: true
+    },
+    beforeClose: {
+      //关闭前的回调函数
+      type: Function,
+      default: null
+    },
+    transition: {
+      //动画类名
+      type: String,
+      default: 'fade'
+    }
+  }
+```
+
+### 使用教程
+
+1、第一步安装：
+
+```shell
+npm install gwell-dialog
+```
+
+或
+
+```shell
+yarn add gwell-dialog
+```
+
+2、第二步注册组件
+`import GwellDialog from 'gwell-dialog';`
+`import 'gwell-dialog/lib/gwell-dialog.css';`
+`Vue.use(GwellDialog);`
+3、第三步使用
+`<GwellDialog :showDialog.sync="showDialog"></GwellDialog>`
+
+### 配置发布
+
+1、在 package.json 文件的 scripts 中配置 lib 编译 组件库命令
+主要需要四个参数：
+
+1. target: 默认为构建应用，改为 lib 即可启用构建库模式
+2. name: 输出文件名
+3. dest: 输出目录，默认为 dist，这里我们改为** lib**
+4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js
+   例如："lib": "vue-cli-service build --target lib --name gwell-dialog --dest lib packages/index.js"
+   2、然后 执行编译命令
+
+```shell
+npm run lib
+```
+
+3、在 npm 官网注册后登录 npm
+
+```shell
+npm login
+```
+
+4、如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
+
+```shell
+npm config set registry http://registry.npmjs.org
+```
+
+5、发布
+
+```shell
+npm publish
+```
+
+6、修改 npm 包
+
+```shell
+npm version patch
 ```