动态可拖动天气浮框+拖拽el-dialog

参考别人的，网址忘记了

<template>
  <div
    v-show="showWeather"
    class="call-center"
    @mousedown="move"
    @mouseup="moveEnd"
    ref="callCenter"
  >
    <span style="color: black">
      {{ weaCity }}天气<br />
      {{ weaDay }}<br />
      {{ weaDayWeather }}<br />
      <br />
      {{ weaNextDay }}<br />
      {{ weaNextDayWeather }}
    </span>
  </div>
</template>

<script>
import New from "../new";
export default {
  data() {
    return {
      // 按下时的坐标
      startX: "",
      startY: "",
      // 抬起时的坐标
      endX: "",
      endY: "",
      // Weather Tool
      weaCity: "杭州",
      weaDay: "",
      weaNextDay: "",
      weaDayWeather: "",
      weaNextDayWeather: "",
    };
  },
  computed: {
    showWeather: {
      get() {
        let show = true;
        New.$on("expressClickShow", (data) => {
          show = data;
          console.log("Weather Tool---this.showWeather: ", show);
        });
        return show;
      },
      set(test) {
        return test;
      },
    },
  },
  mounted() {
    this.getWeather();
  },
  methods: {
    // get Weather
    getWeather() {
      this.post("/weather/weatherByCityName", {
        cityName: this.weaCity,
      }).then((data) => {
        console.log("data: ", data);
        let str = data.string;
        this.weaDay = str[6];
        this.weaNextDay = str[13];
        this.weaDayWeather = str[5];
        this.weaNextDayWeather = str[12];
      });
    },
    // 拖动窗口,鼠标按下
    move(event) {
      // 给对应div添加拖拽属性
      let callCenter = this.$refs.callCenter;
      callCenter.style.cursor = "move";
      var distanceX = event.clientX - callCenter.offsetLeft;
      var distanceY = event.clientY - callCenter.offsetTop;
      // 获取按下时对应的坐标
      this.startX = event.pageX;
      this.startY = event.pageY;
      document.onmousemove = function (ev) {
        var oevent = ev || event;
        // 加入判断，让浮窗在限定的页面内可拖动
        if (ev.clientX < 40 || ev.clientX > document.body.clientWidth - 30) {
          return;
        }
        if (ev.clientY < 40 || ev.clientY > document.body.clientHeight - 30) {
          return;
        }
        callCenter.style.left = oevent.clientX - distanceX + "px";
        callCenter.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        callCenter.style.cursor = "default";
      };
    },
    // 鼠标抬起触发
    moveEnd(event) {
      // 获取鼠标抬起时的坐标
      this.endX = event.pageX;
      this.endY = event.pageY;
      // 计算按下与抬起位置差值
      var d = Math.sqrt(
        (this.startX - this.endX) * (this.startX - this.endX) +
          (this.startY - this.endY) * (this.startY - this.endY)
      );
      if (d === 0 || d < 7) {
        console.log("执行了点击事件");
        this.showWeather = false;
        New.$emit("expressClickX", true);
      } else {
        console.log("执行了拖拽事件");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.call-center {
  opacity: 0.7;
  color: #000;
  width: 160px;
  //   height: 160px;
  top: 8%;
  right: 2%;
  //   border-radius: 50%;
  position: fixed;
  z-index: 99999;
  text-align: center;
  background: #eeeeee;
  border: 3px solid rgb(216, 194, 194);
  i {
    display: block;
    font-size: 32px;
    margin-top: 16px;
    color: #606266;
    transition: color 0.15s linear;
  }
}
</style>

 应功能需求更新，增加了一个拖拽表单界面的功能。el-dialog的位置由margin-left，margin-top决定（相当于之前的left与top）

则修改这里

 

参考网页

妙！vue自定义指令实现一个可拖拽对话框（el-dialog专用） (qq.com)