# gwell-dialog

> the dialog based on vue.js that can insert tags

Latest version **0.1.9** (published 2024-03-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install gwell-dialog
pnpm add gwell-dialog
yarn add gwell-dialog
bun add gwell-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2024-03-29 |
| First published | 2023-11-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 463 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | lengleng |
| Maintainers | lenglengaaa |

## Links

- npm: https://www.npmjs.com/package/gwell-dialog
- npm.io page: https://npm.io/package/gwell-dialog

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [postcss-px-to-viewport](https://npm.io/package/postcss-px-to-viewport.md) ^1.1.1

## Recent versions

- 0.1.9 (latest) — 2024-03-29
- 3.0.0 (vue3) — 2026-09-08
- 0.1.8 — 2024-01-26
- 0.1.6 — 2024-01-18
- 0.1.3 — 2023-12-05
- 0.1.2 — 2023-12-04
- 0.1.1 — 2023-12-04
- 0.1.0 — 2023-11-17

## README

<!--
 * @Author: lengyihan
 * @Date: 2023-11-17 18:05:01
 * @LastEditors: lengyihan
 * @LastEditTime: 2023-12-13 15:51:04
 * @Description:
 * @FilePath: \gwell-dialog\README.md
-->

# 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](https://cli.vuejs.org/config/).

### 使用场景

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

### 目录结构

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

---
_Source: https://npm.io/package/gwell-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._