From 6461f5659505768e7a90594c3aab47f90d9ee213 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 22 Aug 2022 00:37:40 +0800 Subject: [PATCH] 弹窗添加可移动 --- src/components/swichLabel/main1-home.vue | 154 +++++++++++++++++++-------------------------------- 1 files changed, 57 insertions(+), 97 deletions(-) diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue index d88d368..3ac5f97 100644 --- a/src/components/swichLabel/main1-home.vue +++ b/src/components/swichLabel/main1-home.vue @@ -1,14 +1,16 @@ <template> <div> - <MyModal ref="myModal"></MyModal> - <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal> + <MyModal ref="myModal" /> + <MyPreviewModal ref="MyPreviewModal" /> + <MyMessage ref="MyMessage" v-if="openMessage" /> + <MyLink ref="MyLink" v-if="openLinkAdd" /> <div class="blog-drawer"> - <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" - :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300 + <a-drawer placement="left" :closable="false" :visible="visibleDrawer" :getContainer="'body'" + :after-visible-change="afterVisibleChange" @close="onCloseDrawer" :zIndex="90" :width="300" :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}"> - <boxLeft></boxLeft> + <boxLeft @click="closeDrawer()"></boxLeft> <boxRight></boxRight> </a-drawer> </div> @@ -23,23 +25,25 @@ </a-col> </keep-alive> - <a-col v-bind="colApiMain "> + <a-col v-bind="colApiMain"> <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}"> - <a-affix :offset-top="600"> - <a-button @click="showDrawer1" style="padding:0px 10px"> + <a-affix :offset-top="500"> + <a-button @click="showDrawer" style="padding:0px 10px"> <a-icon type="left-circle" /> + </a-button> + <a-button @click="showMessage" style="margin-top:10px;padding:0px 10px"> + <a-icon type="message" /> </a-button> </a-affix> </a-col> <keep-alive> - <router-view class="fade"></router-view> + <router-view></router-view> </keep-alive> </a-col> - <a-col v-bind="colApiRight" ref="myDrawer"> - <!-- <boxRight></boxRight> --> - <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1" - @showScreen="showScreen"></tool> + <a-col v-bind="colApiRight"> + <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" + @showMessage="showMessage" @addLink="addLink" /> </a-col> </a-row> </div> @@ -50,40 +54,43 @@ <script> import boxLeft from "../group/boxLeft.vue" import boxRight from "../group/boxRight.vue" - import articleListScorll from "../group/articleListScorll.vue" import tool from "../group/tool.vue" import MyModal from "../group/MyModal.vue" import MyPreviewModal from "../group/MyPreviewModal.vue" + import MyMessage from "../group/MyMessage.vue" + import MyLink from "../group/MyLink.vue" + + import screenConfig from "../../config/screenConfig.js" export default { components: { boxLeft, boxRight, - articleListScorll, tool, MyModal, MyPreviewModal, + MyMessage, + MyLink, }, methods: { showScreen() { - if (this.screen) { + if (this.scale) { //缩小 - this.colApiLeft.xxl.span = 0; - this.colApiLeft.xxl.offset = 0; - - this.colApiMain.xxl.span = 17; - this.colApiMain.xxl.offset = 4; + this.colApiLeft = screenConfig.colApiLeftScale; + this.colApiMain = screenConfig.colApiMainScale; } else { //放大 - this.colApiLeft.xxl.span = 4; - this.colApiLeft.xxl.offset = 3; - - this.colApiMain.xxl.span = 11; - this.colApiMain.xxl.offset = 2; + this.colApiLeft = screenConfig.colApiLeft; + this.colApiMain = screenConfig.colApiMain; } - this.screen = !this.screen; - + this.scale = !this.scale; + }, + addLink() { + this.openLinkAdd = true + this.$nextTick(function() { + this.$refs.MyLink.showModal(); + }) }, showModal() { this.$refs.myModal.showModal(); @@ -91,80 +98,33 @@ showPreview() { this.$refs.MyPreviewModal.showModal(); }, + showMessage() { + this.openMessage = true + this.$nextTick(function() { + this.$refs.MyMessage.showModal(); + }) + }, afterVisibleChange(val) {}, - showDrawer1() { - this.visible1 = true; + showDrawer() { + this.visibleDrawer = true; }, - onClose1() { - this.visible1 = false; + onCloseDrawer() { + this.visibleDrawer = false; }, - }, data() { return { - screen: true, - visible1: false, - visible2: false, - colMini: { - xs: 1, - sm: 1, - md: 0, - lg: 0, - xl: 0, - xxl: 0 - }, - colApiLeft: { - xs: 0, - sm: 0, - md: { - span: 8, - }, - lg: { - span: 7, - offset: 1, - }, - xl: { - span: 5, - offset: 2, - }, - xxl: { - span: 4, - offset: 3, - }, - }, - colApiRight: { - xs: 0, - sm: 0, - md: 0, - lg: 1, - xl: 1, - xxl: 1, - }, - colApiMain: { - xs: 24, - sm: { - span: 20, - offset: 2, - }, - md: { - span: 15, - offset: 1, - }, - lg: { - span: 13, - offset: 2, - }, - xl: { - span: 13, - offset: 2, - }, - xxl: { - span: 11, - offset: 2, - }, - } + scale: true, + visibleDrawer: false, + colMini: screenConfig.colMini, + colApiLeft: screenConfig.colApiLeft, + colApiRight: screenConfig.colApiRight, + colApiMain: screenConfig.colApiMain, + openLinkAdd: false, + openMessage: false, } - } + }, + } </script> @@ -172,7 +132,7 @@ @font-face { font-family: 'HYTangMeiRen'; // font-display: swap; - src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype"); + src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype"); } span, @@ -203,6 +163,7 @@ .blog-main { + min-height: 860px; margin-top: 80px; padding-left: 3%; padding-right: 3%; @@ -312,7 +273,6 @@ transition: height 1s; } - .blog-scroll:hover::-webkit-scrollbar { display: block; -- Gitblit v1.9.1