日常记录（知识）

一、h5跳转app上的某一个页面

一、window.location.href后面的为跳转时的路由
1.跳转到房间 //item.id为房间的id
window.location.href = 'enen://apppage/chatroom/entry?enterType=1&chatRoomId=' + item.id;
2.跳转到个人主页 //item.id为用户的的id
window.location.href = 'enen://apppage/user/homepage?userId=' + item.id; 

二、判断当前是移动端还是PC端

1.if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        // 移动端
      } else {
        //PC端
      }
    
2.const isMobile = 'ontouchstart' in window; // 判断是否支持触摸事件
 
 
3.判断是Android还是ios
 
   // const u = navigator.userAgent;
    // const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // 判断是否是安卓
    // const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否是iOS
    // console.log(isAndroid, 'android');
    // console.log(isIOS, 'ios');

三、el-date-picker只能选择30天

需求：控制日期最多只能选择30天，所以当我选择其中一个日期后，第二个日期选择只能控制在前后30天（意思就是只有在选择了一个日期以后，我们才能确定剩下一个日期的选择范围）

首先需要安装dayjs
一，安装
1.使用npm安装

npm install dayjs

<el-date-picker @blur="datePickerBlur" @change="datePickerChange" v-model="time" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
 
<script>
// 引入Day.js
import dayjs from 'dayjs'
// 前后需要的天数-1
const space = 29
// 所选的第一个日期
let _minDate = ''
export default {
    // name: 'home',
    data() {
        return {
            // 选中时间段(默认是近一周)
            time: '',
            pickerOptions: {
                // 设置禁用状态
                disabledDate: (time) => {
                    // 当选中第一个时间时
                    if (_minDate) {
                        // 最小时间
                        const min = dayjs(_minDate).subtract(space, 'day')
                        // 最大时间
                        const max = dayjs(_minDate).add(space, 'day')
                        return (
                            // 控制可以选择的时间范围
                            dayjs(time).isBefore(min) ||
                            dayjs(max).isBefore(time)
                        )
                    } else {
                        return false
                    }
                },
                // 选中日期后会执行的回调
                onPick({ minDate }) {
                    _minDate = minDate
                },
            },
        }
    },
    methods: {
        // 时间 发生改变时
        datePickerChange() {
            // 判断时间段为null时 至空所选的第一个日期(目的是避免类型错误的报错)
            if (!this.time) {
                _minDate = ''
                return
            }
        },
        // 时间 失去焦点时
        datePickerBlur() {
            // 判断时间段不为null并且数组长度为0时 至空所选的第一个日期(目的是避免类型错误的报错)
            if (this.time && this.time.length === 0) {
                _minDate = ''
            }
        },
    },
}
 
</script>

四、根据年份和月份获取当前这个月的第一天和最后一天

//引入
import moment from "moment"; 二种引入方式
const moment = require('moment'); 
 
const givenYear = 2023; //年份
const givenMonth = 5 //这个是当前的月份
const firstDayOfMonth = moment(`${currentYear}-${givenMonth.toString().padStart(2, '0')}-01`).startOf('day').format('YYYY-MM-DD'); //当前月第一天
const lastDayOfMonth = moment(firstDayOfMonth).endOf('month').format('YYYY-MM-DD'); //当前月第二天

五、通过时间戳获取天时分秒

let d = parseInt(t / 60 / 60 / 24)
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      // 因为h已经是数字型了，如果0不加引号就变成加法了
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `${d}天${h}小时${m}分${s}秒`

六、vuetify的导航栏

vuetify学习第四天-典型导航菜单实现_vuetify mega 菜单-CSDN博客

七、打包过后内容不显示，自己启动时可以的问题解决

1.在vite.config.js里面加入

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  base: "./", //加入这个
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2.在router里面的index里面加入

import { createRouter, createWebHashHistory } from 'vue-router'
 
const router = createRouter({
    history:createWebHashHistory(), //加上这个
      routes: [
      {
        path: '/',
        name: 'home',
        component:() => import('../pages/MainPage.vue'),
      },
      {
        path: '/about',
        name: 'about',
        component: () => import('../pages/Pagination.vue')
      },
      {
        path: '/DownloadCenter',
        name: 'DownloadCenter',
        component: () => import('../pages/DownloadCenter.vue')
      },
    ]
  })
  
  export default router

八、h5跳转页面获取app的token等信息

    let agents = navigator.userAgent.substr(navigator.userAgent.indexOf("vchat") + 6);
    let enenAgent = agents.length > 0 ? agents.split(" ")[0] : "";
    let enenArgs = enenAgent.split("/");
    let roomInformation = enenArgs.length > 4 ? enenArgs[4] : '';
   // enenArgs[0] token
   // enenArgs[1] 版本号
   // enenArgs[2] 导航栏高度
   // enenArgs[3] 用户信息
   // enenArgs[4] 房间主持人ID和房间ID

九、img给固定宽度和高度图标变形问题

 object-fit: cover;

fill：默认值。元素会被拉伸以填充容器，不保持原始比例，可能导致图像变形。

contain：元素会按照其原始比例缩放，尽量完整地显示在容器内，但容器可能未被完全填满。保持图像比例不变。

cover：元素会按照其原始比例缩放，并尽量铺满容器，可能会剪裁掉一部分内容。保持图像比例不变。

none：元素将按照其原始尺寸进行显示，可能会超出容器。不进行任何缩放或裁剪。

scale-down：元素会根据其原始尺寸和容器尺寸进行缩放，选择较小的缩放比例
————————————————

十、vuetify中v-main报错

[Vue warn]: Unknown custom element: <v-main> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决方案：把v-main换成v-content
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/lipenghao111/article/details/132901064