12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <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>
|