<template>
? <transition>
? ? <!-- ? ?綁定style中top和left-->
? ? <div class="moveBox" :style="position" v-show="show">
? ? ? <div
? ? ? ? class="moveHead"
? ? ? ? @mousedown="mousedown"
? ? ? ? @mousemove="mousemove"
? ? ? ? @mouseup="mouseup"
? ? ? ? @mouseleave="mousemove"
? ? ? ></div>
? ? ? <!-- ? ? ?關(guān)閉按鈕-->
? ? ? <div class="close" @click="toggleShow">×</div>
? ? ? <div class="content">
? ? ? ? <!--插槽-->
? ? ? ? <slot></slot>
? ? ? </div>
? ? </div>
? </transition>
</template>

<script>
export default {
? name: "moveBox",
? data() {
? ? return {
? ? ? show: true,//是否顯示
? ? ? x: 100,//left:x
? ? ? y: 50,//top:y
? ? ? leftOffset: 0,//鼠標(biāo)距離移動(dòng)窗口左側(cè)偏移量
? ? ? topOffset: 0,//鼠標(biāo)距離移動(dòng)窗口頂部偏移量
? ? ? isMove: false,//是否移動(dòng)標(biāo)識
? ? };
? },
? computed: {
? ? //top與left加上px
? ? position() {
? ? ? return `top:${this.y}px;left:${this.x}px;`;
? ? },
? },
? methods: {
? ? //控制打開關(guān)閉
? ? toggleShow() {
? ? ? this.x = 100;
? ? ? this.y = 50;
? ? ? this.show = !this.show;
? ? },
? ? mousedown(event) {
? ? ? //鼠標(biāo)按下事件
? ? ? this.leftOffset = event.offsetX;
? ? ? this.topOffset = event.offsetY;
? ? ? this.isMove = true;
? ? },
? ? //鼠標(biāo)移動(dòng)
? ? mousemove(event) {
? ? ? if (!this.isMove) {
? ? ? ? return;
? ? ? }
? ? ? this.x = event.clientX - this.leftOffset;
? ? ? this.y = event.clientY - this.topOffset;
? ? },
? ? //鼠標(biāo)抬起
? ? mouseup() {
? ? ? this.isMove = false;
? ? },
? },
};
</script>

<style lang="less" scoped>
.moveBox {
? width: 500px;
? height: 300px;
? position: fixed;
? box-shadow: 0 0 5px 3px #95a5a6;
? .moveHead {
? ? height: 30px;
? ? background-color: #bdc3c7;
? ? cursor: move;
? }
? .close {
? ? position: absolute;
? ? right: 0;
? ? top: 0;
? ? line-height: 30px;
? ? font-size: 24px;
? ? cursor: pointer;
? ? display: block;
? ? width: 30px;
? ? height: 30px;
? ? text-align: center;
? }
}
.v-enter,
.v-leave-to {
? opacity: 0;
? transform: scale(0.5);
}
.content {
? padding: 10px;
}
.v-enter-active,
.v-leave-active {
? transition: all 0.5s ease;
}
</style>

<template>
? <div class="home">
? ? <button @click="$refs.moveBox.toggleShow()">toggle moveBox</button>
? ? <move-box ref="moveBox">
? ? ? Hello World
? ? </move-box>
? </div>
</template>