A1570555124-CSDN博客

原创如何使移动端项目在PC端依然可以良好的展示

前置条件：移动端适配使用的是如下适配方案, 也就是使用的rem作为适配。html{ font-size: 13.333333vw;}body { font-size: 0.14rem; // 等于 14px}问题现状: 移动端页面在pc端页面显示异常先写一段简单的vue代码，生成4个盒子和一个顶部fixed定位的盒子。<div class="list" v-for="i in 4" style="height: 1rem;border: 1px solid;">

2022-04-22 12:32:23 2556

原创 translate-language-webpack-plugin自动翻译插件

translate-language-webpack-plugin一款用于自动化转换语言的插件，不同于i18n, 无需写多套语言文件, 采用谷歌API进行翻译，只需要编写一种语言，即可转换为其他任意语言简介该插件诞生于中文简体转中文繁体场景下，其他场景未测试，理论上只需要编写匹配对应语言的正则，即可转移成任意其他语言，请尽量不要在开发环境下使用，因为这会频繁的请求谷歌翻译接口，同时开发环境下的注释未去除的情况下，翻译很慢，减慢开发环境下的构建速度。前置工作该插件依赖于谷歌翻译 API，但是谷歌

2022-02-22 23:42:57 1241

原创移动端rem适配ipad, ipad pro

在inde.html中或者代码中加入以下代码<script> // 适配pad padPro /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='targe

2022-02-09 11:14:04 822

原创解决iOS 上拉边界下拉出现白色空白

起因：如标题所示，还被运营吐槽了，为什么别人的没有解决：body,html { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}需要滚动的地方加overflow-y: auto;其他方案参考...

2022-01-25 14:18:17 3267

原创 vue中弹幕实现及优化

起因：活动需求需要使用弹幕的形式展示内容解决：首先是找到一个vue-baberrage然后使用起来看起来也没有什么问题，最后当我打开浏览器rendering的paint flash发现重绘严重最后找到一个vue-danmaku 组件，发现不会频繁重绘定位：弹幕移动使用transform改变位置，并使用will-change进行优化will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率大量的节点动画渲染可以选

2022-01-25 13:51:59 1316

原创移动端chrome与safria vh高度问题

起因：中间内容需要减去顶部与底部内容原先使用 100 vh - 245px, 发现pc端浏览器显示正常，移动端除了chrome与safria都显示正常。定位：排查得知，这两个浏览器得vh包括了搜索栏与，底部便签栏的高度。解决：采用 vh-checknpm i vh-check -s在vue中main.js引入import vhCheck from "vh-check";vhCheck('browser-address-bar');使用： height: calc(100vh

2022-01-25 13:21:13 1570 1

原创 Vue使用Less注入全局变量

按如下配置即可module.exports = { css: { loaderOptions: { less: { // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。 lessOptions: { modifyVars: { hack: `true; @import "src/assets/css/theme.less";`, },

2022-01-08 14:17:03 685

原创 nginx部署vue history

事情是这样的，一开始本地开发使用hash模式，后来改为history模式，部署到线上一看???, App。vue渲染了，router-view没渲染？什么鬼？看了下vue-router配置const router = new VueRouter({ base:'/haiwai/aa/temp/', mode:'history', routes,});在看下nginx配置location /haiwai/aa/temp { root html/; try_files $uri $

2021-12-28 14:30:32 594

原创 React-router-dom 6.2.1配置

.env设置部署目录前缀REACT_APP_PBLICK_PATH= /testindex.tsBrowserRouter 为history模式，部署到服务器上如果不是根目录需要配置basenameconst basename = process.env.REACT_APP_PBLICK_PATH; <BrowserRouter basename={basename}> <App /> </BrowserRouter>App.tsxfun

2021-12-27 12:21:34 1039

原创原生JS之Toast弹窗

function fn() { Toast("复制成功", 2000); } function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement("div"); m.innerHTML = msg; m.style.cssText = ...

2021-12-22 16:33:42 544

原创一起上创业网课嘛

那些年一起上的创业网课操作如下图：首先登录创业网课，进入播放视频界面代码如下：//移除鼠标离开视频不播放 document.addEventListener("mouseleave", function() { var myvideo = document.querySelector('video'); myvideo.play(); }, false); setIn...

2019-04-16 12:31:24 570

A1570555124的博客