Popup

说明

下述演示为了视觉效果将 renderInPlace 属性设为了 true 以让弹出层原地渲染，实际使用最好不要添加该属性以让弹出层渲染到 document.body 下避免样式污染问题。

基础用法

一个简易弹窗。

<template>
  <div>
    <button @click="handleButtonClick">打开弹窗</button>

    <d-popup :visible="visible" render-in-place @maskClick="handleMaskClick">
      <div class="dialog">HELLO</div>
    </d-popup>
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
    }),

    methods: {
      handleButtonClick() {
        this.visible = !this.visible;
      },
      handleMaskClick() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .dialog {
    width: 60%;
    background-color: white;
    padding: 20px;
    text-align: center;
  }
</style>

抽屉

将 position 属性设为 left、right、top、bottom 可分别从左侧、右侧、顶部、底部弹出内容。

<template>
  <div>
    <p>
      <button @click="handleButtonClick('left')">打开左侧抽屉</button>
      <button @click="handleButtonClick('right')">打开右侧抽屉</button>
    </p>

    <p>
      <button @click="handleButtonClick('top')">打开顶部抽屉</button>
      <button @click="handleButtonClick('bottom')">打开底部抽屉</button>
    </p>

    <d-popup
      :position="position"
      :visible="visible"
      render-in-place
      @maskClick="handleMaskClick"
    >
      <div :class="['drawer', position]">HELLO</div>
    </d-popup>
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
      position: 'left',
    }),

    methods: {
      handleButtonClick(position) {
        this.position = position;
        this.visible = !this.visible;
      },
      handleMaskClick() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .drawer {
    width: 60%;
    height: 100%;
    background-color: #f7f8fa;
    padding: 20px;
    box-sizing: border-box;

    &.top,
    &.bottom {
      width: 100%;
      height: 40%;
    }
  }
</style>

自定义弹出效果

默认弹出效果是根据 position 属性值自动选择的，但你可以通过 transitionName 属性自定义弹出效果。

<template>
  <div>
    <button @click="handleButtonClick">打开弹窗</button>

    <d-popup
      :visible="visible"
      transition-name="fade-down"
      render-in-place
      @maskClick="handleMaskClick"
    >
      <div class="dialog">HELLO</div>
    </d-popup>
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
    }),

    methods: {
      handleButtonClick() {
        this.visible = !this.visible;
      },
      handleMaskClick() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .dialog {
    width: 60%;
    background-color: white;
    padding: 20px;
    text-align: center;
  }
</style>

透明遮罩

通过 maskTransparent 属性令弹出层的遮罩透明。

<template>
  <div>
    <button @click="handleButtonClick">打开弹窗</button>

    <d-popup
      :visible="visible"
      mask-transparent
      render-in-place
      @maskClick="handleMaskClick"
    >
      <div class="dialog">HELLO</div>
    </d-popup>
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
    }),

    methods: {
      handleButtonClick() {
        this.visible = !this.visible;
      },
      handleMaskClick() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .dialog {
    width: 60%;
    background-color: white;
    padding: 20px;
    text-align: center;
  }
</style>

无遮罩

通过 noMask 属性可不渲染遮罩。

<template>
  <div>
    <button @click="handleButtonClick">打开弹窗</button>
    <button @click="handleButton2Click">无遮罩，打开弹窗后你可以点我</button>

    <d-popup
      :visible="visible"
      no-mask
      transition-name="fade-left"
      render-in-place
      @maskClick="handleMaskClick"
    >
      <div class="dialog">HELLO</div>
    </d-popup>
  </div>
</template>

<script>
  export default {
    data: () => ({
      visible: false,
    }),

    methods: {
      handleButtonClick() {
        this.visible = !this.visible;
      },
      handleButton2Click() {
        alert('hi');
      },
      handleMaskClick() {
        this.visible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .dialog {
    width: 60%;
    background-color: white;
    padding: 20px;
    text-align: center;
  }
</style>

API

属性

名称	说明	类型	默认值
visible	是否显示	boolean	false
position	显示位置	center | top | left | right | bottom	center
transitionName	过渡名称，默认 `auto` 根据显示位置自动选择	auto | fade | fade-up | fade-down | fade-left | fade-right | slide-up | slide-down | slide-left | slide-right | zoom | drop	auto
maskTransparent	是否使用透明遮罩	boolean	false
renderInPlace	是否原地渲染，默认会将弹出层渲染到 document.body 下以避免样式污染	boolean	false
noMask	是否没有遮罩	boolean	false

插槽

无

事件

名称	说明	参数
maskClick	点击遮罩时触发	名称 说明 类型 e 事件对象 object
open	弹出层打开时触发（弹出层已打开但打开效果尚未完成）	无
opend	弹出层打开后触发（弹出层已打开并且打开效果已完成）	无
close	弹出层关闭时触发（弹出层已关闭但关闭效果尚未完成）	无
closed	弹出层关闭后触发（弹出层已关闭并且关闭效果已完成）	无

贡献者

无