https://github.com/nu-system/vue-dialog

NU 「 no-ui 」 组件库系统 nu-system，按钮组件 VUE 实现
https://github.com/nu-system/vue-dialog

dialog dialog-vue nu-dialog vue-components vue-dialog

Last synced: 3 months ago
JSON representation

NU 「 no-ui 」 组件库系统 nu-system，按钮组件 VUE 实现

• Host: GitHub
• URL: https://github.com/nu-system/vue-dialog
• Owner: nu-system
• License: mit
• Created: 2019-06-25T02:34:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-09-02T12:10:49.000Z (over 5 years ago)
• Last Synced: 2025-02-09T05:15:41.685Z (3 months ago)
• Topics: dialog, dialog-vue, nu-dialog, vue-components, vue-dialog
• Language: JavaScript
• Homepage: https://nu-system.github.io/vue/dialog/
• Size: 43 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Dialog

[![npm package](https://img.shields.io/npm/v/@_nu/vue-dialog.svg)](https://www.npmjs.org/package/@_nu/vue-dialog)

[![github](https://img.shields.io/github/stars/nu-system/vue-dialog.svg?style=social)](https://github.com/nu-system/vue-dialog)

组件库母版系统 [NU-system](https://nu-system.github.io/) 弹窗组件 VUE 实现。

`nu-vue-dialog` 本身不会输出任何样式，基础样式来自于 [nu-dialog](https://nu-system.github.io/vanilla/dialog/) , 

## 怎么用？

```bash

$ yarn add @_nu/vue-dialog @_nu/vanilla-dialog

```

### 二次封装

```vue

  import NuDialog from "@_nu/vue-dialog"

  export default NuDialog;

```

### 使用

```vue

  
    

    打开弹窗            

    

      

        居中显示

        居上显示

        居左显示

        居右显示

        居下显示

      

    

  


  import Dialog from "@components/Dialog";

  

  export default {

    name: 'app',

    data() {

      return {

        dialogOpen: false,

        dialogPosition: 'middle'

      }

    },

    components: {

      Dialog

    },

    methods: {

        handlePosition(e) {

         this.dialogPosition = e.target.value;

        }

    }

}

```

nu-dialog-vue 会动态的把弹窗添加到 `body` 标签之后。

## Api

| props   |      类型      | 默认值  |功能 |

|:----------|:-------------|:------:|------:|

| :open.sync |  boolean | - | 显示弹窗|

| :position |  strong | 'middle' | 弹窗位置|

| :beforeClose |  Func | - | 在关闭之前要做的事 |

| :isPortal | boolean | 'true' | 是否需要传送门 |

| :speed | Number | 200 | 动画时长 |

**position 可选值**: `middle`,`top`,`right`,`left`,`bottom`;

**beforeClose**: 如果返回值为 `false` 那么弹窗不会关闭;

## Dom 结构

```vue



  

    

  

  

    


      

        

          ×

        

      

      

    

  



```


`nu-dialog-vue` 几乎所有都子组件都可以用 `slot` 重写。