一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
注：往往项目上有些弹窗就会被要求可最大化最小化操作，所以今天封装了一个弹窗最大化最小化关闭的一个组件封装，废话不多说，下面直接上代码了：
首先封装一个最大化最小化关闭的dialogHeader子组件
<!--最大化最小化组件封装-->
<template>
<div class="header-title">
<span class="title-name">{{ dialogTittle }}</span>
<span
style="float: right; color: #909399; cursor: pointer;"
class="el-icon-close"
@click="() => closed"></span>
<span
style="float: right; margin-right: 10px; color:#909399; cursor: pointer;"
:class="flodIconClass"
@click="() => isFullscreen"></span>
</div>
</template>
<script>
export default {
props: {
dialogTittle: {
type: String,
default: () => ''
},
fullscreen: {
type: Boolean,
default: () => false
}
},
data () {
return {
header_box: {
'display': 'flex',
'align-items': 'center'
}
}
},
computed: {
flodIconClass() {
return this.fullscreen ? 'el-icon-full-screen' : 'el-icon-copy-document';
},
isFullscreen() {
this.$emit('is-fullscreen', !this.fullscreen);
},
closed() {
this.$emit('handle-closed', 2)
}
},
created() {
},
methods: {
},
mounted() {
},
}
</script>
dialogHeaderpage主页面引用dialogHeader子组件使用
<template>
<div class="hello">
<el-button type="primary" size="small" @click="addProject">新增项目</el-button>
<el-dialog title="新增" :class="isFullscreen ? '' : 'dialogClass_his'"
custom-class="handleDialogClass" width="73.4%" :fullscreen="isFullscreen" v-if="dialogVisible_add"
:visible.sync="dialogVisible_add" :show-close="false" :close-on-click-modal="false"
:close-on-press-escape="false">
<dialog-header slot="title" dialog-tittle="新增" :fullscreen="isFullscreen" @handle-closed="dialogClose"
@is-fullscreen="onFullscreen"></dialog-header>
<div>弹窗内容</div>
</el-dialog>
</div>
</template>
<script>
import dialogHeader from '@/components/dialogHeader'
export default {
components:{
'dialog-header':dialogHeader,
},
data () {
return {
dialogVisible_add: false,
isFullscreen: false,
}
},
methods: {
//弹出弹窗显示
addProject(){
this.dialogVisible_add = true;
},
//是否为全屏函数
onFullscreen(fullscreen) {
this.isFullscreen = fullscreen;
},
//关闭事件
dialogClose() {
this.dialogVisible_add = false;
},
},
mounted() {
},
}
</script>
注:
custom-class: Dialog 的自定义类名(string)
fullscreen：是否为全屏 Dialog(boolean)
show-close：是否显示关闭按钮(boolean)
close-on-click-modal: 是否可以通过点击 modal 关闭 Dialog(boolean)
close-on-press-escape: 是否可以通过按下 ESC 关闭 Dialog(boolean)
效果图如下：
文章首发掘金，未经允许禁止转载~~
具体效果可以直接复制代码到本地看哦~ 欢迎阅读点赞给个支持⭐️⭐️⭐️
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
