Common-popup NPM

common-popup

用于展示弹窗、信息提示等内容。

引入

通过以下方式来全局注册组件。

import { createApp } from 'vue'
import commonPopup from "common-popup"
const app = createApp()
app.use(commonPopup)

基础用法

1.中间弹出

<CommonPopup 
  v-if="showPopup"
  title="提示"
  contentText="内容内容内容内容"
  :showPopup="showPopup"
  :showPopupClose="true"
  @onClose="onClose"
>
</CommonPopup>              
import { ref } from 'vue';
export default {
  setup() {
    const showPopup = ref(true)
    const onClose = () => {
      showPopup.value = false
    }
    return {
      showPopup,
      onClose
    };
  },
};

示例效果：
中间弹出效果图

2.底部弹出

<CommonPopup
  v-if="showPopup"
  title="提示"
  height="60%"
  :showPopup="showPopup"
  :showPopupClose="true"
  @onClose="onClose"
  :hideCloseButton="true"
  popPosition="bottom"
  :isFixBottom="true"
  >
  <template v-slot:content>
    <div>内容内容内容内容内容内容</div>
  </template>
  <template v-slot:footer>
    <div class="footer">底部固定</div>
  </template>
</CommonPopup>
  import { ref } from 'vue';
  export default {
    setup() {
      const showPopup = ref(true)
      const onClose = () => {
        showPopup.value = false
      }
      return {
        showPopup,
        onClose
      };
    },
  };
<style>
  .footer {
    height: 80px;
    line-height: 80px;
    box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.08);
  }
</style>

示例效果：
底部弹出效果图

API

参数	说明	类型	默认值
showPopup	是否显示弹出层	boolean	false
title	弹窗标题	string	提示
contentText	弹窗内容文本	string	-
width	弹窗宽度	string	中间弹出为90%；否则100%
height	弹窗高度，非中间弹窗时可设置	string	-
showPopupClose	是否显示关闭图标	boolean	false
isOverlayClose	是都可以点击遮罩层时关闭	boolean	false
hideCloseButton	是否隐藏关闭按钮	boolean	false
buttonText	关闭按钮文本	string	知道了
buttonColor	按钮颜色	string	#0099ff
isRound	是否显示圆角	boolean	true
isFixTop	是否固定顶部标题区域（一般用于底部弹出框）	boolean	false
isFixBottom	是否固定底部区域（一般用于底部弹出框）	boolean	false
popPosition	弹出位置，可选值为 top bottom right left	string	center