分类 前端 下的文章

第一次使用uniapp的vue-cli命令方式踩坑记录


关于使用uniapp的vue-cli命令式运行会报错,特别收藏记录了几种问题


报错:node-sass和sass-loader
node 版本14.17.1,需要适配响应的node-sass和sass-loader版本

参考链接:https://blog.csdn.net/m0_67392126/article/details/126113751

解决方案:
1、先卸载:
npm uninstall node-sass
npm uninstall sass-loader
2、安装:
npm install --save-dev node-sass@4.14.1
npm install --save-dev sass-loader@7.3.1
npm install --save-dev node-sass@4.14.1
npm install --save-dev sass-loader@7.3.1


报错:PostCSS plugin autoprefixer requires PostCSS 8

参考链接:https://blog.csdn.net/candyyii/article/details/109055180

解决方案:
npm i postcss-loader autoprefixer@8.0.0


关于elementUI表单验证validate时click方法blur失效的解决办法


有时候我们页面上会有多个表单,且表单中绑定的字段有重复,这时会出现blur无法激活表单的正常验证,这时候就需要用于key,只需要给el-form-item标签,添加key属性即可,如1:

<el-form-item label="联系方式" prop="contact_information" :key="Math.random()">
    <el-input v-model="itemForm.contact_information" placeholder="请输入联系方式"></el-input>
</el-form-item>

有的时候验证红色文字出现后,然后给表单赋值但是还是通不过,其实是有值的,也可以用这种绑定key的方法,如2:

<el-form-item label="视频封面:" prop="videoBanner" v-if="videoParams.videoPath" :key="Math.random()">
  <div class="coverCont">
    <el-image fit="contain" class="topicCover" :src="videoParams.videoBanner" v-if="videoParams.videoBanner">
    </el-image>
    <el-button type="primary" @click="getCovers" style="width: 98px">选择封面</el-button>
    <el-input style="display: none;" v-model="videoParams.videoBanner" />
  </div>
</el-form-item>

因为这些字段并不是在任何循环中,所以这里的key直接用了一个随机数,这样修改过以后,blur事件就可以正常激活表单的验证了,不然就会发生鼠标点击并离开输入框时,无法进行验证的问题。


基础版防止网站查看源码


杜绝用户右键查看源码和F12以及ctrl+U

<script>
((function () {
  var callbacks = [],
    timeLimit = 50,
    open = false;
  setInterval(loop, 1);
  return {
    addListener: function (fn) {
      callbacks.push(fn);
    },
    cancleListenr: function (fn) {
      callbacks = callbacks.filter(function (v) {
        return v !== fn;
      });
    }
  }
  function loop() {
    var startTime = new Date();
    debugger;
    if (new Date() - startTime > timeLimit) {
      if (!open) {
        callbacks.forEach(function (fn) {
          fn.call(null);
        });
      }
      open = true;
      window.stop();
      alert('不要看代码啦!');
      window.location.reload();
    } else { open = false; }
  }
})())
  .addListener(function () {
    window.location.reload();
  });
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
document.οnkeydοwn = new Function("event.returnValue=false");
document.onkeydown = function (e) {
  if (e && e.keyCode === 123 || e && e.keyCode === 85 || e && e.keyCode === 83) {
    e.returnValue = false;
    return false;
  }
};
</script>

在PC端vue+elemenet使用视频流video.js播放m3u8视频


由于小程序使用了阿里云的点播方式上传视频转码查看,大大的把视频压缩处理了,无论是上传还是查看都速度挺快的。

但是PC上如果使用普通的video标签直接播放m3u8是会出问题的。

所以找到了video.js这个好的插件使用起来得心应手,支持m3u8也支持向的mp4视频格式播放

接下来记录下操作记录:

videojs-github
videojs-官网

一、NPM方式安装使用

1、npm安装video.js

npm install --save-dev video.js

2、在vue脚手架中引入video.js(main.js引入)

import Video from 'video.js' //videojs
import 'video.js/dist/video-js.css' //videocss样式
Vue.prototype.$video = Video //装载Video播放器

3、建立一个子组件方便多个地方使用



npm install 或 npm dev 装第三方组件库依赖报错后通用解决办法


微信图片_20220224101907.png

npm ERR! Cannot set properties of null (setting ' dev' )

删除node_modules、package-lock.json、yarn.lock

npm config get registry 查看自己的仓库源

正常遇到这种报错,直接在集成终端输入以下任意一个命令即可:

npm config set registry http:/registry.npmmirror.com/

npm install --force --registry=https://registry.npmmirror.com

--

本次项目所用的命令:

npm install --force --registry=https://registry.npmmirror.com; cnpm i
image-webpack-loader -D

yarn config set registry https://registry.npmmirror.com

然后npm装第三方组件库的依赖就没有问题啦,运行马上成功


html2canvas在iphone ios15以上出现了罢工,只跳转或者生成的图片是空白


最近刚上线一个新的项目,在商品详情和邀请好友页面有处理到html2canvas生成海报或者商品推广图,然后在2021年苹果升级的ios15系统里生成图片失败了,要么就是空白的,要么就是自动把页面刷新了,报错了。

然后在github的html2canvas问题里面有人提出了这个问题,并给出了解决方案。其实很简单就是在你的canvas海报这个大的元素里面不要使用font-family的某些字体的引用,如:-apple-system,arial等。

但也不能不用字体对吧,我本身全局引用的是这个:font-family:-apple-system,PingFang SC,Helvetica,arial,sans-serif;

然后我通过优先级把html2canvas里面的标签元素都引用了这个,并加上了!important优先级,让标签元素只使用这些字体:font-family: PingFang SC,Helvetica,sans-serif !important;

然后成功了。

下列这是官方有人提出的问题和解决方法提示:

4618673-4ff7b13c0e73885e.jpg