Element PLUS 弹窗关闭Loading加载

发布时间:2023年12月21日

需要放在before-close事件中

<el-dialog
		v-model="visible"
		width="85%"
		@opened="opened"
		:title="title"
		:append-to-body="false"
		draggable
		:before-close="beforeCloseDialog"
		@close="destoryVideo"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		@destroy-on-close="true"
		class="demo"
	>


</el-dialog>

let demo = ElLoading.service({

? ? target: '.demo',

? ? lock: true,

? ? text: '正在退出预览,请稍后...',

? ? background: 'rgba(0, 0, 0, 0.5)',

? ? customClass: 'close-dialog-style',

? ? // svg: svg,

? ? // svgViewBox: '-10, -10, 50, 50',

? });

?

closePreviewVideo(currentCameraState.value, 'all').then(() => {

? ? demo.close();

? ? done();

? });

?异步任务执行完成后关闭加载框;

加载框样式需要设置全局样式:

<style lang="scss">
.el-loading-spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  /* stroke: var(--el-color-primary); */
  stroke-linecap: round;
  stroke: rgb(240, 228, 188) ;
}
.el-loading-spinner .el-loading-text {
  /* color: var(--el-color-primary); */
  color: rgb(240, 228, 188) ;
  margin: 3px 0;
  font-size: 14px;
}
文章来源:https://blog.csdn.net/BangD/article/details/135134910
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。