Leanote's Blog

// scanMixin.js
export default {
  data() {
    return {
      code: '',
      lastTime: '',
      nextTime: '',
      lastCode: '',
      nextCode: '',
      dtmainId: '',
    };
  },
  activated() {
    window.addEventListener('keypress', this.scanEventHandler, false);
  },
  beforeDestroy() {
    window.removeEventListener('keypress', this.scanEventHandler, false);
  },
  deactivated() {
    window.removeEventListener('keypress', this.scanEventHandler, false);
  },
  methods: {
    scanEventHandler(e) {
      if (window.event) { // IE
        this.nextCode = e.keyCode;
      } else if (e.which) { // Netscape/Firefox/Opera
        this.nextCode = e.which;
      }
      if (e.which === 13) { // 键盘回车事件
        if (this.code.length < 3) return; // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        console.log('扫码结束。');
        console.log('条形码：', this.code);
        this.parseQRCode(this.code); // 获取到扫码枪输入的内容，做别的操作
        this.code = '';
        this.lastCode 

<!-- 空页面，负责中转到目标页面 -->
<template>
  <div></div>
</template>
<script>
export default {
  name: 'refresh',
  data () {
    return {}
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const data = {
        ...from,
        query: { ...from.query, ...to.query },
        params: { ...from.params, ...to.params }
      }
      vm.$router.replace(data)
    })
  }
}
</script>

this.$router.push({
  name: routerName,
  params: { aa: 2 }, // params不在浏览器url里显示,刷新页面参数消失
})

let name = ""
try {
    const file = require(`@/views${ route.path }.vue`)
    const componentName = file.default.name
    if (componentName) {
        name = componentName
    } else {
        throw Error("Fail: Don't Find 'name', src: '" + route.path + "'")
    }
} catch (err) {
    // console.log(777777777, err)
    const nameArr = route.path.split("/")
    let setName = replaceReg(nameArr[nameArr.length - 1])
    if (setName.length < 6 && nameArr[nameArr.length - 2]) {
        name = replaceReg(nameArr[nameArr.length - 2]) + setName
    }
}

嵌套路由里的子路由跳转会触发父路由的生命周期

注意: 是否在里使用了:key, key如果不一样会每次都触发更新

使用一个空白页来中转

// refresh.vue
<template>
    <div></div>
</template>
<script>
export default {
    name: "refresh",
    data() {
        return {}
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.$router.replace({ path: from.path, query: to.query })
        })
    }
}
</script>
// router.vue
{
    path: "/refresh",
    name: "refresh",
    component: () =>
        import(/* webpackChunkName: "page" */ "@/components/refresh"),
    meta: {
        keepAlive: false,
        isTab: false,
        isAuth: false
    }
}
// main.js (如果需要设置所有的)
router.beforeEach((to, from, next) => {
    if (from.path === to.path) {
        next({ path: "/refresh", query: to.query })
        return
    }
}

npm install vuedraggable

let timer = setTimeout(()=> {})
this.$once("hook:beforeDestroy", () => {
    clearTimeout(timer)
    timer = null
})

组件: countDown.vue

<template>
    <div class="countDown_container">
        <slot v-bind="dateData"></slot>
    </div>
</template>
<script>
import dayjs from "dayjs";
export default {
    name: "countDown",
    props: {
        computeEndTimeFlag: Boolean, // 是否计算结束时间
        nowTime: {
            type: String | Number,
            default: () => Date.now()
        },
        startTime: {
            type: String | Number,
        },
        endTime: {
            type: String | Number,
            required: true,
        },
        showDay: Boolean,
    },
    data() {
        return {
            dateData: {},
            realEndTime: null,
        }
    },
    created() {
        const realEndTime = this.computeEndTimeFlag ? new Date(this.endTime).getTime() : this.getRealEndTime()
        this.realEndTime = realEndTime
        this.$emit("getRealEndTime", realEndTime)
        this.setDateData(realEndTime - new Date().getTime())
        this.updateState();