一、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
2.使用yarn安装
yarn add 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
十一、el-input只能输入数字
@input="value = value.replace(/[^\d]/g, '')"十二、解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins
1.配置时使用cnjm-postcss-px-to-viewport
const path = require("path");
module.exports = () => {
return {
plugins: {
autoprefixer: {
overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"],
},
// 修改插件名称
"cnjm-postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [], // 设置忽略文件，用正则做目录名匹配
landscape: false, // 是否处理横屏情况
// 如果没有使用其他的尺寸来设计，下面这个方法可以不需要，比如vant是375的
customFun: ({ file }) => {
// 这个自定义的方法是针对处理vant组件下的设计稿为375问题
const designWidth = path.join(file).includes(path.join("node_modules", "vant")) ? 375 : 750;
return designWidth;
},
},
},
};
};
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
