| | |
| | | v-show="data.isShow" |
| | | :class="['d-frame', {'d-frame-full': fullScreen}]" |
| | | :data-id="data.id" |
| | | v-bind:style="{left: data.leftOffset + '%', top: data.topOffset + '%', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}" |
| | | v-bind:style="{left: data.leftOffset + 'px', top: data.topOffset + 'px', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}" |
| | | @click="frameClick" |
| | | > |
| | | <div class="d-frame-title" v-drag @click="frameClick()"> |
| | | <div class="d-frame-title" v-drag> |
| | | <div class="d-frame-title-operation"> |
| | | <i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)"> |
| | | <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt /> |
| | |
| | | </div> |
| | | </slot> |
| | | </div> |
| | | <div class="d-frame-content"> |
| | | <div class="d-frame-content" @click="frameClick" > |
| | | <iframe :src="data.url" v-if="data.url"></iframe> |
| | | <div v-html="data.html" v-if="data.html"></div> |
| | | <!-- <span class="d-frame-operation-resize" v-resize></span> --> |
| | |
| | | changeFullScreen: function () { |
| | | this.fullScreen = !this.fullScreen; |
| | | }, |
| | | frameClick: function () { |
| | | debugger |
| | | frameClick() { |
| | | |
| | | this.$store.commit('desktop/refreshFrame', this.data); |
| | | }, |
| | | minFrame(data, e) { |
| | |
| | | let toLeft = e.clientX - disx; |
| | | let toTop = e.clientY - disy; |
| | | //边界处理 |
| | | if (toLeft <= 0) { |
| | | toLeft = 0 |
| | | } else if (toLeft >= document.body.getBoundingClientRect().width - 40) { |
| | | toLeft = document.body.getBoundingClientRect().width - 40; |
| | | if (toLeft <= -(el.parentElement.offsetWidth-46*3)) { |
| | | toLeft = -(el.parentElement.offsetWidth-46*3) |
| | | } else if (toLeft >= document.body.getBoundingClientRect().width - 46*3) { |
| | | toLeft = document.body.getBoundingClientRect().width - 46*3; |
| | | } |
| | | el.parentElement.style.left = toLeft + 'px'; |
| | | if (toTop <= 40) { |
| | | toTop = 40 |
| | | } else if (toTop >= document.body.getBoundingClientRect().height - 40) { |
| | | toTop = document.body.getBoundingClientRect().height - 40; |
| | | } else if (toTop >= document.body.getBoundingClientRect().height - 31) { |
| | | toTop = document.body.getBoundingClientRect().height - 31; |
| | | } |
| | | el.parentElement.style.top = toTop + 'px'; |
| | | }; |
| | |
| | | } |
| | | .d-frame { |
| | | position: fixed; |
| | | box-shadow: 0 5px 10px rgba(0,0,0,.5); |
| | | } |
| | | |
| | | .d-frame.d-frame-full { |
| | |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | cursor: pointer; |
| | | line-height: 28px; |
| | | } |
| | | |
| | | .d-frame-title-operation i:hover { |