vue --press

长按拖动：vuedraggable

1. 安装vuedraggable包：

	yarn add vuedraggable
 
	npm i -S vuedraggable

package.json文件截图如下：

备注：参考github：
https://www.npmjs.com/package/vuedraggable

2. 页面进行注册：

<script>
import vuedraggable from "vuedraggable"; //引入拖动组件

// 全局使用此组件
export default {
  components: {
    vuedraggable
  },
}
</script>

3. 页面使用组件

  <vuedraggable v-model="classList" >
      //添加需要拖动的内容
  </vuedraggable>
      <!-- v-model:是下面用到的数据，必须写-->

网址：

1. 组件使用：http://www.ptbird.cn/vue-draggable-dragging.html
2. 长按： https://segmentfault.com/a/1190000021864740
3. 组件npm网址：https://www.npmjs.com/package/vuedraggable

长按屏蔽浏览器显示

1. 在vuedraggable中添加options绑定属性

  <vuedraggable v-model="classList" :options="options"></vuedraggable >

2. 声明变量如下：

 // 拖动长按拖动长按
      options: {
        delayOnTouchOnly: true, //开启触摸延时
        direction: "vertical", //拖动方向
        delay: 500, //延时时长
        touchStartThreshold: 3, //防止某些手机过于敏感(3~5 效果最好)
        chosenClass: "chosen" //选中之后拖拽项添加的class名(用于选中时候添加样式)
      }

3. 添加样式：

/* 拖动后效果 */
.chosen {
  background: var(--colorVar);
}

长按事件

1. 安装

npm install vue-directive-touch --save; 

2. 引包：

import touch from 'vue-directive-touch';
Vue.use(touch);

3. 使用如下，v-for要写在下面

   <div id="addTemplate" class="allTemplate" v-touch:right="eventFun">
        <div v-for="(item,i) in templateList" :key="i">
        
		</div>
  </div>

如有不懂或者学习原理请参照作者：
https://www.npmjs.com/package/vue-directive-touch

4. bug：v-touch会在vue-cli4.0出现第一次登陆后不加载问题，只有在使用此组件的页面刷新一次后才可以使用，如果不刷新出现的结果就是没有dom节点也就是没有加载出来

4.1 解决办法如下：

1. 我们在vue进入页面前执行此刷新，将所有没有加载出来的节点先进行刷新加载出来
2. 如果是vue的情况下需要在updated中进行，mounted会有部分没有加载完毕
3. 刷新页面使用window.location.reload(), 效果最好

<template>
  <div>
    <div v-show="show" id="addTemplate" class="allTemplate" v-touch:right="eventFun"></div>
  </div>
</template>
<script>

// 引入我们需要的组件
import Vue from "vue";
import touch from "vue-directive-touch";
Vue.use(touch);
export default {
  data() {
    return {
      show: false
    };
  },

  mounted() {
    this.initialization();
  },

  updated() {
    this.start();
  },

  methods: {
    initialization() {
      this.show = true;
    },

    start() {
      // 解决开始计入页面不能左滑，刷新页面解决
      const a = sessionStorage.getItem("loadingFirstEntry");

      if (a != "first") {
        sessionStorage.setItem("loadingFirstEntry", "first");
        window.location.reload(); // 刷新页面
        // window.location.reload() // 刷新页面
        // window.history.go(0); // 出现空白页
        // document.execCommand("Refresh"); // MSDN说适用于IE
      } else {
        this.$router.push({ name: "login" });
      }
    },
    eventFun() {}
  }
};
</script>
<style scoped>
</style>