npm package npm downloads github
npm package npm downloads github

Dialog component of vue.


$ yarn add @_nu/vue-dialog @_nu/css-dialog
  • @_nu/vue-dialog: logic component;
  • @_nu/css-dialog: style component;


<!-- @components/Dialog/index.vue -->
  import NuDialog from "@_nu/vue-dialog"
  export default NuDialog;

<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> 

It is not recommended to use nu-dialog directly in the project page by import "@_nu/vue-dialog".

Instead, @_nu/vue-dialog is used as the construction tool of a dialog component. In the folder of its components/,

it is "repackaged" in the above way, and then 'export' belongs to the dialog component of its own project.

The Dialog logic for its own global Dialog can be written in this logic.


  <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>

  import Dialog from "@components/Dialog";
  export default {
    name: 'app',
    data() {
      return {
        dialogOpen: false,
        dialogPosition: 'middle'
    components: {
    methods: {
        handlePosition(e) {
         this.dialogPosition = e.target.value;

the dom will portal to the body.


props type default function
:open.sync boolean - show
:position strong 'middle' position of dialog
:beforeClose Func - before on close
:isPortal boolean 'true' is need portal
:speed Number 200 time speed

position [option]: middle,top,right,left,bottom;

beforeClose: is false the dialog will not close;


<div v-if="render" class="nu_dialog_wrap" :class="computedClass">
  <slot name="mask">
    <label class="nu_dialog_mask" @click="handleClickMask"/>
  <slot name="dialog">
    <div class="nu_dialog">
      <slot name="close">
        <label class="nu_dialog_close" @click="handleClickClose">
          <slot name="close-icon">&times;</slot>

nu-dialog-vue all the sub component can rewrite by slot

Last Updated: 5/16/2020, 3:33:45 PM