vue-pubilc-layer

# 在需要使用弹框的地方写下如下代码即可

# 最简配置-- type: "html"

this.$dialog.open({
  title: "我是标题---html",
  content: {
    type: "html",
    subCom: "<h1>我是html</h1>",
  },
});

# 打开 vue 组件并且向子组件传递数据-- type: "vue"

import test from "./test.vue";
this.$dialog.open({
  title: "我是标题---vue",
  content: {
    type: "vue",
    subCom: test,
    subData: "我是外部传递的数据",
  },
});

# 打开 Dom 对象对话框-- type: "dom"

this.$dialog.open({
  title: "我是标题---dom",
  content: {
    type: "dom",
    subCom: this.$el,
  },
});

# 打开指定弹框大小-- area

this.$dialog.open({
  title: "我是标题",
  area: {
    height: "400px",
    width: "800px",
  },
  content: {
    type: "html",
    subCom: "<h1>宽800px，高400px</h1>",
  },
});

# 有遮罩，点击遮罩不关闭弹框-- shade

this.$dialog.open({
  title: "我是标题---html",
  shade: true,
  content: {
    type: "html",
    subCom: "<h1>shade: true</h1>",
  },
});

# 有遮罩，点击遮罩即可关闭弹框-- shade，blank

this.$dialog.open({
  title: "我是标题---html",
  shade: true,
  blank: true,
  content: {
    type: "html",
    subCom: "<h1>shade: true,blank:true</h1>",
  },
});

# 可以拖动的弹框-- move

this.$dialog.open({
  title: "我是标题---html",
  move: true,
  content: {
    type: "html",
    subCom: "<h1>move: true</h1>",
  },
});

# 无头部的弹框-- hasHead

this.$dialog.open({
  title: "我是标题---html",
  hasHead: false,
  content: {
    type: "html",
    subCom: "<h1>hasHead: false</h1>",
  },
});

# 无最小化的弹框-- hasMin

this.$dialog.open({
  title: "我是标题---html",
  hasMin: false,
  content: {
    type: "html",
    subCom: "<h1>hasMin: false</h1>",
  },
});

# 无最大化的弹框-- hasMin

this.$dialog.open({
  title: "我是标题---html",
  hasMax: false,
  content: {
    type: "html",
    subCom: "<h1>hasMax: false</h1>",
  },
});

# 仅有关闭按钮的弹框-- hasMin、hasMax

this.$dialog.open({
  title: "我是标题---html",
  hasMin: false,
  hasMax: false,
  content: {
    type: "html",
    subCom: "<h1>  hasMin: false,hasMax: false</h1>",
  },
});

# 弹框最小化距离底部距离-- bottomOff

this.$dialog.open({
  title: "我是标题---html",
  bottomOff: 500,
  content: {
    type: "html",
    subCom: "<h1>bottomOff: 500</h1>",
  },
});

# 弹框最小化距离左部距离-- leftOff

this.$dialog.open({
  title: "我是标题---html",
  leftOff: 500,
  content: {
    type: "html",
    subCom: "<h1>leftOff: 500</h1>",
  },
});

# 设置最小化高度-- minHight

this.$dialog.open({
  title: "我是标题---html",
  minHight: 30,
  content: {
    type: "html",
    subCom: "<h1>  minHight: 30,</h1>",
  },
});

# 设置最小化宽度-- minWidth

this.$dialog.open({
  title: "我是标题---html",
  minWidth: 400,
  content: {
    type: "html",
    subCom: "<h1>   minWidth: 400,</h1>",
  },
});

# 设置最小化宽度行间距-- rowGap

this.$dialog.open({
  title: "我是标题---html",
  minWidth: 400,
  rowGap: 50,
  content: {
    type: "html",
    subCom: "<h1>rowGap:50,,</h1>",
  },
});

# 设置最小化宽度列间距-- colGap

this.$dialog.open({
  title: "我是标题---html",
  minWidth: 400,
  colGap: 50,
  content: {
    type: "html",
    subCom: "<h1>colGap:50,,</h1>",
  },
});

# 我是自定义头部-- customHead

this.$dialog.open({
  title: "我是标题---vue",
  move: true,
  customHead: {
    type: "vue",
    subCom: testHead,
    subData: "我是传递的数据",
  },
  content: {
    type: "html",
    subCom: "<h1>我是自定义头部</h1>",
  },
});

# 我是单弹框模式-- multiple

this.$dialog.open({
  title: "我是标题---html",
  multiple: false,
  content: {
    type: "html",
    subCom: "<h1> multiple: false,,</h1>",
  },
});

# 我是自定义主题-- theme

this.$dialog.open({
  title: "我是标题---html",
  theme: "theme_my",
  content: {
    type: "html",
    subCom: "<h1>  theme: theme_my,</h1>",
  },
});

# 我是深蓝主题-- theme

this.$dialog.open({
  title: "我是标题---html",
  theme: "theme-lan",
  content: {
    type: "html",
    subCom: "<h1>  theme: theme-lan</h1>",
  },
});

# 我是墨绿主题-- theme

this.$dialog.open({
  title: "我是标题---html",
  theme: "theme-lv",
  content: {
    type: "html",
    subCom: "<h1>  theme: theme-lv</h1>",
  },
});

# 我带有打开成功回调-- success

this.$dialog.open({
  title: "我是标题---html",
  success: () => {
    alert("打开成功");
  },
  content: {
    type: "html",
    subCom: "<h1>  success: function,</h1>",
  },
});

# 我带有关闭成功回调-- cancel

this.$dialog.open({
  title: "我是标题---html",
  cancel: () => {
    alert("关闭成功");
  },
  content: {
    type: "html",
    subCom: "<h1>  cancel: function,</h1>",
  },
});

# 我带有最小化成功回调-- minBack

this.$dialog.open({
  title: "我是标题---html",
  minBack: () => {
    alert("最小化成功");
  },
  content: {
    type: "html",
    subCom: "<h1>  minBack: function,</h1>",
  },
});

# 我带有最大化成功回调-- maxBack

this.$dialog.open({
  title: "我是标题---html",
  maxBack: () => {
    alert("最大化成功");
  },
  content: {
    type: "html",
    subCom: "<h1>  maxBack: function,</h1>",
  },
});

# 我带有复原成功回调-- restore

this.$dialog.open({
  title: "我是标题---html",
  restore: () => {
    alert("复原成功");
  },
  content: {
    type: "html",
    subCom: "<h1>  restore: function,</h1>",
  },
});

# 我带有混淆功能-- mixin

this.$dialog.open({
  title: "我是标题---html",
  mixin: {
    created() {
      alert("我是混淆执行的成功");
    },
  },
  content: {
    type: "html",
    subCom: "<h1>  mixin: Object,</h1>",
  },
});

← API →