Vue可拖动未读消息组件

此组件使用Vue自定义指令实现一个全局显示可拖动的未读消息提示。思路就是通过自定义指令来实现一个组件在页面中的拖动。

一.效果图

在项目中的效果（按住鼠标左键可以拖拽）

二.在Vue中实现自定义指令

首先定义一个自定义指令 @/assets/utils/darg.js文件

import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
    bind: function (el) {
        let odiv = el; //获取当前元素
        let firstTime = '',
            lastTime = '';
        odiv.onmousedown = (e) => {
            document.getElementById('dragbtn').setAttribute('data-flag', false)
            firstTime = new Date().getTime();
            //  算出鼠标相对元素的位置
            var disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e) => {
                //  用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let top = e.clientY - disY;
                let left = e.clientX - disX;
                //  页面范围内移动元素
                if (top > 0 && top < document.body.clientHeight - 48) {
                    odiv.style.top = top + 'px';
                    el.style.left = left + 'px'
                }
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
                // onmouseup 时的时间，并计算差值
                lastTime = new Date().getTime();
                if ((lastTime - firstTime) < 200) {
                    document.getElementById('dragbtn').setAttribute('data-flag', true)
                }
            };
        };
    }
})
export default drag;

三.在项目中使用

定义好自定义指令过后，使用v-drag使用此自定义指令。
我这里是在全局使用这个组件，所以直接在App.vue里使用了。需要在指定位置使用的就在指定文件调用。

<template>
  <div id="app">
    <router-view></router-view>
    <!-- 未读消息图标 -->
    <div
      v-if="unreadCount"
      id="dragbtn"
      v-drag
      @click="openNotice"
      class="unread_icon"
    >
    //这里使用的是element-ui的标记组件（没用使用element-ui的自己写一个样式也是一样的）
      <el-badge
        :value="unreadCount > 99 ? 99 : unreadCount"
      >
        <i class="icon"></i>   //自己的消息图标
      </el-badge>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import darg from "@/assets/utils/darg";  //引入调用的自定义指令的文件

export default {
  data() {
    return {
		unreadCount：49     //未读消息的数量（大于0显示）
    };
  },
  method:{
  	//点击未读消息要执行的方法
 	 openNotice(){
 	 	...
 	 }
  }
 }
</script>

<style>
.unread_icon {
  position: absolute;
  width: 46px;
  height: 46px;
  right: 20px;
  top: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #2c6ee5;
  box-shadow: 0px 6px 13px 0px rgba(44, 110, 229, 0.15);
  border-radius: 50%;
  z-index: 200;
}
</style>

写完过后，自己稍微改一下自己需要的样式。就可以使用啦。。。。。。