element ui dialog弹窗增加放大缩小按钮

Shiki2147

已于 2024-12-06 10:23:56 修改

阅读量512

点赞数 2

文章标签： ui vue.js elementui javascript

于 2024-12-06 10:23:34 首次发布

本文链接：https://blog.youkuaiyun.com/Shiki2147/article/details/144283485

版权

在这里插入图片描述

<el-dialog :visible.sync="visible"
	width="18rem"
	:show-close="false"
	:fullscreen="fullscreen"
	draggable
	overflow>
	<div slot="title" class="flex-between">
		<div class="el-dialog__title">调控详情</div>
		<div class="flex">
		<div class="full-screen fd" @click="changeFullScreen" v-if="!fullscreen"></div>
		<div class="full-screen sx" @click="changeFullScreen" v-else></div>
		<i class="el-icon-close" @click="close"></i>
		</div>
	</div>
</el-dialog>


changeFullScreen() {			
	this.fullscreen = !this.fullscreen;
},
close() {
	this.visible = false;
	this.$emit("close");
}


.full-screen {
  cursor: pointer;
  font-size: 22px;
  display: block;
  color: #666666;
  width: 22px;
  height: 22px;
  margin-right: 10px;
}
.full-screen.fd {
  background-image: url("../img/main/fd.png");
  background-size: 100% 100%;
}
.full-screen.sx {
  background-image: url("../img/main/sx.png");
  background-size: 100% 100%;
}