cip-components/cip-cancel-loading/index.vue

<template>
  <div class="cip-cancel-loading" v-if="visible">
    <div class="cip-cancel-loading__mark"></div>
    <div class="cip-cancel-loading__dialog">
      <div class="cip-cancel-loading__content">
        <slot name="content">
          <i class="el-icon-loading"></i>
          <div class="cip-cancel-loading__text" v-html="message"></div>
        </slot>
      </div>
      <div class="cip-cancel-loading__button" @click="close">{{btnName}}</div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { generateProps } from '../helper/component-util'
import { componentScheme } from './component.scheme'
// 组件介绍：本组件是可关闭的loading加载组件，一般适用于耗时比较长接口连接调用
export default defineComponent({
  name: 'CipCancelLoading',
  props: generateProps(componentScheme),
  emits: ['vanish'],
  setup (props, { emit }) {
    const visible = ref(false)
    const close = () => {
      visible.value = false
      emit('vanish')
    }
    return {
      visible,
      close
    }
  }
})
</script>

<style lang="less">
.cip-cancel-loading{
  &__dialog {
     top: 50%;
     left: 50%;
     opacity: 1;
     position: fixed;
     transform: translate(-50%, -50%);
     color: #000;
     z-index: 99999;
   }
  &__mark {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    display: block;
    position: fixed;
    z-index: 9999;
    background-color: #000;
  }
  &__content {
    text-align: center;
  }
  &__text {
    font-size: 16px;
    text-align: center;
  }
  &__button {
    color: #000;
    border-radius: 4px;
    border: 1px solid #000;
    padding: 10px 30px;
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    width: 140px;
  }
  .@{elNamespace}-icon-loading {
    font-size: 100px;
  }
}
</style>