PmDialog

基础用法

<template>
  <el-button @click="show">显示弹框</el-button>
  <pm-dialog ref="myDialog" :visible.sync="visible" title="标题">
      <div>centext</div>
  </pm-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    }
  }
}
</script>

自定义footer

<template>
  <el-button @click="show">显示弹框</el-button>
  <pm-dialog ref="myDialog" :visible.sync="visible" :showFooter="true" title="标题">
      <div>centext</div>
      <el-button-group slot="footer">
        <el-button @click="hidden" size="mini">关闭</el-button>
        <el-button @click="hidden" size="mini" type="primary">确定</el-button>
      </el-button-group>
  </pm-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.$refs.myDialog.show()
    },
    hidden() {
      this.$refs.myDialog.hidden()
    }
  }
}
</script>

可拖拽

<template>
  <el-button @click="show">显示弹框</el-button>
  <pm-dialog ref="myDialog" :visible.sync="visible" :showFooter="true" title="标题">
      <div>centext</div>
  </pm-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.$refs.myDialog.show()
    },
    hidden() {
      this.$refs.myDialog.hidden()
    }
  }
}
</script>

全屏

<template>
  <el-button @click="show">显示弹框</el-button>
  <pm-dialog ref="myDialog" :showFullScreenButton="true" :visible.sync="visible" :showFooter="true" title="标题">
      <div>centext</div>
  </pm-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.$refs.myDialog.show()
    },
    hidden() {
      this.$refs.myDialog.hidden()
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
title	dialog标题	string	-	-
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	-	false
appendToBody	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	-	true
closeOnClickModal	是否可以通过点击 modal 关闭 Dialog	boolean	-	false
draggable	是否可拖拽	boolean	-	true
fullscreen	全屏	boolean	-	false
footerHeight	底部插槽所占高度	number	-	60
showFooter	是否显示底部内容	boolean	-	true
showFullScreenButton	是否显示全屏控件	boolean	-	true
showClose	是否显示关闭按钮	boolean	-	true

Slot

Name	Description
—	dialog body
icon	用于控制是否全屏的图标
footer	dialog底部