一个可以拖拽的可以展开小弹框

在放公共js的地方

export default (Vue) => {
  Vue.directive('drag', {
    inserted: function (el) {
      const oDiv = el // 获取当前元素
      oDiv.onmousedown = (e) => {
        // 算出鼠标相对元素的位置
        // const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          // const left = e.clientX - disX
          const top = e.clientY - disY
          // oDiv.style.left = left + 'px'
          oDiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  })
}

在main.js中全局注入

import directives from './assets/js/drag.js'
Vue.use(directives)

在需要使用拖拽的div中加  v-drag

 <div class="popup" @click="togglebox" v-drag>
      <div class="tip">
        <i :class="active?'el-icon-arrow-right':'el-icon-arrow-left'">
        </i>
        右侧展开
      </div>
      //可以展开
      <transition name="boxshow">
        <div class="bottom" v-show="boxshow" v-drag>
          <div class="company">xxxxxxx</div>
          <div>xxxxx <span class="blue">{{ authUserCurrent }}</span>xxxxx <span
              class="blue">{{ authUserMax - authUserCurrent }}</span>人
          </div>
          <el-button type="primary" @click="addRoutes1">xxxxx</el-button>
        </div>
      </transition>
    </div>

  .boxshow-enter-active,
  .boxshow-leave-active {
    transition: all 0.5s ease;
  }

  .boxshow-leave-active,
  .boxshow-enter {
    width: 0px !important;
  }