什么是模态对话框，模态对话框的操作方法？-营销圈

什么是模态对话框，模态对话框的操作方法？

用户投稿 • 2022年5月26日 pm4:06 • 网络资讯 • 阅读 499

今天给小伙伴们分享一款超赞的Vue多形态弹出窗口组件VDialogs。

什么是模态对话框，模态对话框的操作方法？

v-dialogs 基于 vue.js 简洁易用的弹出对话框插件，包含了 模态窗口(Modal)、消息对话框(Alert)、遮罩(Mask)、弱提示框(Toast) 等功能。

什么是模态对话框，模态对话框的操作方法？

安装

$ npm i -S v-dialogs

使用插件

// 在main.js中引入
import Vue from 'vue'
import vDialogs from 'v-dialogs'
Vue.use(vDialogs, { global config options... })

Modal 模态窗口

import myComponent from './myComponent.vue'
export default {
  methods: {
    open(){
      this.$dlg.modal(myComponent, {
        width: 350,
        height: 450,
        params: {
          name: 'Terry Zeng'
        },
        // modal dialog close callback
        // data: inner component call 'this.$emit.('close', data)'
        callback: data=>{
          this.$dlg.alert(`You selected ${data.companyName} company`)
        }
      })
    }
  }
}

什么是模态对话框，模态对话框的操作方法？

Modal – 模态窗口

Alert 弹出消息对话框

包含 info, warning, error, success, confirm 等类型。

// Alert
this.$dlg.alert(message, [callback], [options])

this.$dlg.alert('Data saved successfully!')

// show message with close callback
this.$dlg.alert('Data saved successfully!', function(){
  ...
})

// show message with options
this.$dlg.alert('Data saved successfully!', {
  messageType: 'success',
  language: 'en'
})

// show message with close callback and options
this.$dlg.alert('Data saved successfully!', function(){
  ...
}, {
  messageType: 'success',
  language: 'en'
})

// confirm type alert dialog have cancel button
this.$dlg.alert('Do you really want to leave?', {
  messageType: 'confirm',
  cancelCallback: function(){
    ...
  }
})

Alert – 消息通知窗口

Mask 全屏遮罩层

// Mask
this.$dlg.modal(message, [callback], [options])

this.$dlg.mask('form data saving', function(){
  ...
})

什么是模态对话框，模态对话框的操作方法？

Mask – 全屏遮罩框

Toast 边角提示框

包含 4 种消息类型和 6 个角落位置。

// Toast
this.$dlg.toast(message, [callback], [options])

this.$dlg.toast('you got a new message!')

// show message with close callback
this.$dlg.toast('you got a new message!', function(){
  ...
})

// show message with options
this.$dlg.toast('you got a new message!', {
  messageType: 'success',
  closeTime: 3
})

// show message with close callback and options
this.$dlg.toast('you got a new message!', function(){
  ...
}, {
  messageType: 'warning',
  closeTime: 3
})

什么是模态对话框，模态对话框的操作方法？

Toast – 边角提示框什么是模态对话框，模态对话框的操作方法？

Message type: warning

# 文档地址
https://terryz.gitee.io/vue/#/dialog

# 仓库地址
https://github.com/terryz/v-dialogs

ok，就介绍到这里。如果大家在项目开发中用的上的话，不妨去看看哈。

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！

什么是模态对话框，模态对话框的操作方法？

相关推荐