Element PLUS 弹窗关闭Loading加载

最新推荐文章于 2024-12-03 21:33:10 发布

原创最新推荐文章于 2024-12-03 21:33:10 发布 · 1.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

本文介绍了在Vue组件中使用ElementUI的el-dialog进行对话框展示，特别关注了如何在异步任务完成后优雅地关闭对话框，并设置了全局的加载框样式，包括SVGspinner的动画效果。

需要放在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;
}