12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <div class="_loading" v-if="visible">
- <div class="wind-loading">
- <div class="wind-loading-bg"></div>
- <div class="wind-loading-dialog">
- <div class="wind-loading-content">
- <slot name="content">
- <i class="el-icon-loading"></i>
- <div class="content-text" v-html="message"></div>
- </slot>
- </div>
- <div class="wind-loading-btn" @click="close">{{btnName}}</div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { defineComponent, ref } from 'vue'
- // 组件介绍:本组件是可关闭的loading加载组件,一般适用于耗时比较长接口连接调用
- export default defineComponent({
- name: 'CipCancelLoading',
- props: {
- message: { type: String, default: 'loading' },
- btnName: { type: String, default: '退出' },
- onCancel: { type: Function, default: () => {} }
- },
- emits: ['vanish'],
- setup (props, { emit }) {
- const visible = ref(false)
- const close = () => {
- visible.value = false
- emit('vanish')
- }
- return {
- visible,
- close
- }
- }
- })
- </script>
- <style scoped>
- .wind-loading-dialog {
- top: 50%;
- left: 50%;
- opacity: 1;
- position: fixed;
- transform: translate(-50%, -50%);
- color: #000;
- z-index: 99999;
- }
- .wind-loading-bg {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.3;
- display: block;
- position: fixed;
- z-index: 9999;
- background-color: #000;
- }
- .wind-loading-content {
- text-align: center;
- }
- .el-icon-loading {
- font-size: 100px;
- margin-right: 40px;
- }
- .content-text {
- font-size: 16px;
- text-align: left;
- }
- .wind-loading-btn {
- 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;
- }
- </style>
|