common-popup

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

Events

Slots