Category - Vue

2023-01-07 15:40:59    0    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 10:57:44    4    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 14:46:28    2    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 18:27:26    1    0    0

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

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

2021-07-14 10:24:29    10    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 17:36:07    0    0    0
2021-06-18 18:52:59    2    0    0

npm install vuedraggable

2021-05-29 14:08:30    18    0    0
  1. let timer = setTimeout(()=> {})
  2. this.$once("hook:beforeDestroy", () => {
  3. clearTimeout(timer)
  4. timer = null
  5. })
2021-05-29 00:00:51    6    0    0

组件: countDown.vue

  1. <template>
  2. <div class="countDown_container">
  3. <slot v-bind="dateData"></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import dayjs from "dayjs";
  8. export default {
  9. name: "countDown",
  10. props: {
  11. computeEndTimeFlag: Boolean, // 是否计算结束时间
  12. nowTime: {
  13. type: String | Number,
  14. default: () => Date.now()
  15. },
  16. startTime: {
  17. type: String | Number,
  18. },
  19. endTime: {
  20. type: String | Number,
  21. required: true,
  22. },
  23. showDay: Boolean,
  24. },
  25. data() {
  26. return {
  27. dateData: {},
  28. realEndTime: null,
  29. }
  30. },
  31. created() {
  32. const realEndTime = this.computeEndTimeFlag ? new Date(this.endTime).getTime() : this.getRealEndTime()
  33. this.realEndTime = realEndTime
  34. this.$emit("getRealEndTime", realEndTime)
  35. this.setDateData(realEndTime - new Date().getTime())
  36. this.updateState();
2021-05-24 18:41:24    0    0    0
  1. // this.$options.data()//是原始data中的数据
  2. // this.$data //是改变后的data中的数据
  3. this.$root //表示app.vue中data的数据
  4. Object.assign(this.$data, this.$options.data())
1/3