Leanote's Blog

组件

// ElevatorScroll.vue
<template>
  <div
    class="elevator-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    ref="elevatorContainerRef"
  >
    <div
      class="section"
      v-for="(item, index) in items"
      :key="item.id"
      :ref="`section-${index}`"
    >
      <slot :item="item.list" :index="index"></slot>
    </div>
    <div v-if="showHint && consistentDirection" :class="['scroll-hint', hintPosition]"
         :style="{ opacity: hintOpacity }">{{ hintMessage }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    activeSectionDate: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      startY: 0,
      currentY: 0,
      hasMoved: false, // 用于记录是否发生了有效滑动
      hintOpacity: 0,
      showHint: false,
      hintMessage: '',
      hintPosition: 'hint-bottom',
      initialDirection: n

组件

// CurrentWeekMenu.vue
<template>
  <div class="CurrentWeekMenu_root">
    <div class="week_box">
      <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box"
           :class="activeSectionDate === index ? 'active' : ''" @click="scrollToSection(index)">
        <div class="week-item_name">{{ item.name }}</div>
        <div class="week-item_date">{{ item.date }}</div>
      </div>
    </div>
    <div class="food-menu_box" ref="foodMenuBoxRef">
      <div class="food-menu-group_box" v-for="(weekItem, weekIndex) in thisWeek" :key="weekIndex"
           :id="'food-menu-group_' + weekIndex">
        <div class="food-menu-item_box" v-for="item in weekItem" :key="item.id" :id="item.id"
             @click="checked = !checked">
          <div class="food-menu-item_img">
            <van-image
              width="2.13333rem"
              height="1.52rem"
              fit="cover"
              :src="item.imgUrl"
            >

// 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