gwell-dialog v0.1.9

gwell-dialog

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

使用场景

弹窗组件的封装可以提高代码的复用性和可维护性，使开发者能够更加方便地在不同的场景中使用和管理弹窗，根据弹窗组件规范设计图，通过封装，可以统一弹窗的样式和行为，并提供简洁的接口供其他组件或页面调用，这样，开发者可以更加专注于业务逻辑的实现，而无需重复编写弹窗的代码。弹窗组件中设有默认的头部、内容区和尾部，这三部分分别可使用插槽自定义内容，弹窗内设有默认头部关闭按钮、取消和确定按钮，底部关闭按钮等。

目录结构

├─.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

可传参数

{
    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、第一步安装：

npm install gwell-dialog

或

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、然后 执行编译命令

npm run lib

3、在 npm 官网注册后登录 npm

npm login

4、如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来

npm config set registry http://registry.npmjs.org

5、发布

npm publish

6、修改 npm 包

npm version patch