Category - Vue

2024-04-18 03:36:42    4    0    0

组件

  1. // ElevatorScroll.vue
  2. <template>
  3. <div
  4. class="elevator-container"
  5. @touchstart="handleTouchStart"
  6. @touchmove="handleTouchMove"
  7. @touchend="handleTouchEnd"
  8. ref="elevatorContainerRef"
  9. >
  10. <div
  11. class="section"
  12. v-for="(item, index) in items"
  13. :key="item.id"
  14. :ref="`section-${index}`"
  15. >
  16. <slot :item="item.list" :index="index"></slot>
  17. </div>
  18. <div v-if="showHint && consistentDirection" :class="['scroll-hint', hintPosition]"
  19. :style="{ opacity: hintOpacity }">{{ hintMessage }}
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. items: {
  27. type: Array,
  28. required: true,
  29. },
  30. activeSectionDate: {
  31. type: Number,
  32. default: 0,
  33. },
  34. },
  35. data() {
  36. return {
  37. startY: 0,
  38. currentY: 0,
  39. hasMoved: false, // 用于记录是否发生了有效滑动
  40. hintOpacity: 0,
  41. showHint: false,
  42. hintMessage: '',
  43. hintPosition: 'hint-bottom',
  44. initialDirection: n
2024-04-17 06:32:18    1    0    0

组件

  1. // CurrentWeekMenu.vue
  2. <template>
  3. <div class="CurrentWeekMenu_root">
  4. <div class="week_box">
  5. <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box"
  6. :class="activeSectionDate === index ? 'active' : ''" @click="scrollToSection(index)">
  7. <div class="week-item_name">{{ item.name }}</div>
  8. <div class="week-item_date">{{ item.date }}</div>
  9. </div>
  10. </div>
  11. <div class="food-menu_box" ref="foodMenuBoxRef">
  12. <div class="food-menu-group_box" v-for="(weekItem, weekIndex) in thisWeek" :key="weekIndex"
  13. :id="'food-menu-group_' + weekIndex">
  14. <div class="food-menu-item_box" v-for="item in weekItem" :key="item.id" :id="item.id"
  15. @click="checked = !checked">
  16. <div class="food-menu-item_img">
  17. <van-image
  18. width="2.13333rem"
  19. height="1.52rem"
  20. fit="cover"
  21. :src="item.imgUrl"
  22. >
2023-03-27 07:07:05    3    0    0
2023-01-07 07:40:59    6    0    0
  1. // scanMixin.js
  2. export default {
  3. data() {
  4. return {
  5. code: '',
  6. lastTime: '',
  7. nextTime: '',
  8. lastCode: '',
  9. nextCode: '',
  10. dtmainId: '',
  11. };
  12. },
  13. activated() {
  14. window.addEventListener('keypress', this.scanEventHandler, false);
  15. },
  16. beforeDestroy() {
  17. window.removeEventListener('keypress', this.scanEventHandler, false);
  18. },
  19. deactivated() {
  20. window.removeEventListener('keypress', this.scanEventHandler, false);
  21. },
  22. methods: {
  23. scanEventHandler(e) {
  24. if (window.event) { // IE
  25. this.nextCode = e.keyCode;
  26. } else if (e.which) { // Netscape/Firefox/Opera
  27. this.nextCode = e.which;
  28. }
  29. if (e.which === 13) { // 键盘回车事件
  30. if (this.code.length < 3) return; // 扫码枪的速度很快,手动输入的时间不会让code的长度大于2,所以这里不会对扫码枪有效
  31. console.log('扫码结束。');
  32. console.log('条形码:', this.code);
  33. this.parseQRCode(this.code); // 获取到扫码枪输入的内容,做别的操作
  34. this.code = '';
  35. this.lastCode
2022-08-31 02:57:44    22    0    0
  1. <!-- 空页面,负责中转到目标页面 -->
  2. <template>
  3. <div></div>
  4. </template>
  5. <script>
  6. export default {
  7. name: 'refresh',
  8. data () {
  9. return {}
  10. },
  11. beforeRouteEnter (to, from, next) {
  12. next(vm => {
  13. const data = {
  14. ...from,
  15. query: { ...from.query, ...to.query },
  16. params: { ...from.params, ...to.params }
  17. }
  18. vm.$router.replace(data)
  19. })
  20. }
  21. }
  22. </script>
  1. this.$router.push({
  2. name: routerName,
  3. params: { aa: 2 }, // params不在浏览器url里显示,刷新页面参数消失
  4. })
2021-08-31 06:46:28    8    0    0
  1. let name = ""
  2. try {
  3. const file = require(`@/views${ route.path }.vue`)
  4. const componentName = file.default.name
  5. if (componentName) {
  6. name = componentName
  7. } else {
  8. throw Error("Fail: Don't Find 'name', src: '" + route.path + "'")
  9. }
  10. } catch (err) {
  11. // console.log(777777777, err)
  12. const nameArr = route.path.split("/")
  13. let setName = replaceReg(nameArr[nameArr.length - 1])
  14. if (setName.length < 6 && nameArr[nameArr.length - 2]) {
  15. name = replaceReg(nameArr[nameArr.length - 2]) + setName
  16. }
  17. }
2021-08-16 10:27:26    9    0    0

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

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

2021-07-14 02:24:29    17    0    0

使用一个空白页来中转

  1. // refresh.vue
  2. <template>
  3. <div></div>
  4. </template>
  5. <script>
  6. export default {
  7. name: "refresh",
  8. data() {
  9. return {}
  10. },
  11. beforeRouteEnter(to, from, next) {
  12. next(vm => {
  13. vm.$router.replace({ path: from.path, query: to.query })
  14. })
  15. }
  16. }
  17. </script>
  18. // router.vue
  19. {
  20. path: "/refresh",
  21. name: "refresh",
  22. component: () =>
  23. import(/* webpackChunkName: "page" */ "@/components/refresh"),
  24. meta: {
  25. keepAlive: false,
  26. isTab: false,
  27. isAuth: false
  28. }
  29. }
  30. // main.js (如果需要设置所有的)
  31. router.beforeEach((to, from, next) => {
  32. if (from.path === to.path) {
  33. next({ path: "/refresh", query: to.query })
  34. return
  35. }
  36. }
2021-06-21 09:36:07    4    0    0
2021-06-18 10:52:59    5    0    0

npm install vuedraggable

1/3