Dialog
| npm package | npm downloads | github |
|---|---|---|
 |  |  |
组件库母版系统 NU-system 弹窗组件 VUE 实现。
nu-vue-dialog 本身不会输出任何样式，基础样式来自于 nu-dialog ,
怎么用？
$ yarn add @_nu/vue-dialog @_nu/css-dialog
- @_nu/vue-dialog： 逻辑组件;
- @_nu/css-dialog: 样式组件;
二次封装
<!-- @components/Dialog/index.vue -->
<script>
import NuDialog from "@_nu/vue-dialog";
export default NuDialog;
</script>
<!--样式引用-->
<style src="@_nu/css-dialog"></style>
<style src="@_nu/css-dialog/css/position/middle.css"></style>
<!--
<style src="@_nu/css-dialog/css/position/top.css"></style>
<style src="@_nu/css-dialog/css/position/left.css"></style>
<style src="@_nu/css-dialog/css/position/right.css"></style>
<style src="@_nu/css-dialog/css/position/bottom.css"></style>
-->
不建议直接在项目页面中通过 import "@_nu/vue-dialog" 的方式使用 nu-dialog，而是把 nu-dialog 当作一个 dialog 组件的构建工具，在自己的 components/ 的文件夹中，通过上述方式 "二次封装"，然后 export 属于自己项目的 Dialog 组件。
对于自己全局的 Dialog 逻辑就可以写在这个逻辑里面了。
使用
<template>
<div id="app">
<button type="button" @click="dialogOpen = true">打开弹窗</button>
<Dialog :open.sync="dialogOpen" :position="dialogPosition">
<select @change="handlePosition">
<option value="middle">居中显示</option>
<option value="top">居上显示</option>
<option value="left">居左显示</option>
<option value="right">居右显示</option>
<option value="bottom">居下显示</option>
</select>
</Dialog>
</div>
</template>
<script>
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;
}
}
};
</script>
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 结构
<div v-if="render" class="nu_dialog_wrap" :class="computedClass">
<slot name="mask">
<label class="nu_dialog_mask" @click="handleClickMask"/>
</slot>
<slot name="dialog">
<div class="nu_dialog">
<slot name="close">
<label class="nu_dialog_close" @click="handleClickClose">
<slot name="close-icon">×</slot>
</label>
</slot>
<slot></slot>
</div>
</slot>
</div>
nu-dialog-vue 几乎所有都子组件都可以用 slot 重写。