viuLLL的博客

原创 特殊字符过滤

使用的是vant插件<van-field v-model="userAddressForm.detail" name="detail" label="详细地址" @input="changeVal" placeholder="请填写详细地址" type="textarea" maxlength="80" rows="2" clearable /&

原创 videojs动态切换路径

整体功能实现点击可切换预览m3u8格式视频1、先写个按钮放点击事件<span class="content-url" @click="reviewVideo(scope.row)"> 预览</span> 2、用一个弹窗包含video标签<!-- 播放视频 --> <el-dialog title="播放视频" :visible.sync="video

原创 video在安卓中未点击播放按钮就拖拽滚动条发生页面卡死问题

video在安卓中未点击播放按钮就拖拽滚动条发生页面卡死问题解决方法：先让video播放一秒之后再暂停播放 让安卓video获取视频进度，并使用preload<video ref="techVideo" :src="techVideoSrc" controls :poster=" techVideoSrc + '?x-oss-process=vide

原创 h5提供方法让APP调用

把方法挂载到window上，具体为window.customizeFN = function(e) {console.log("APP端返回的参数：", e)}customizeFN为自定义参数名

原创 二次封装小程序接口

二次封装小程序接口const http = (url = '', param = {}, method, successCallback) => { if (typeof successCallback != 'function') successCallback = () => {} wx.showLoading({ title: '请稍候...', mask: true }); return new Promise((resolve, reject) =&g

原创 前端面试题整理

前端面试题1 前端性能优化（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（3）当需要设置的样式很多时设置className而不是直接操作style。（4）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（5）避免使用CSS Expression（css表达式)又称Dynamic proper

原创 canvas渐变圆环进度条

圆环进度条<canvas id="canvas" width="300" height="300"> <p>抱歉，您的浏览器不支持canvas</p> </canvas>function toCanvas(id, progress){ var canvas = document.getElementById(id), ctx = canvas.getContext("2d"),

原创 子元素等高设置

原创 vue引入腾讯云音视频(适用于web和app之间通信)

vue引入腾讯云音视频(适用于web和app之间通信)首先在项目中使用 npm 安装 SDK 包。npm install trtc-js-sdk --save在项目脚本里引入模块。import TRTC from “trtc-js-sdk”;import { LibGenerateTestUserSig } from “@/assets/js/lib-generate-test-usersig.min.js”;import Bus from “@/bus/bus”;//调用此音视频组件时

原创 echarts X轴文字过长展示

echarts X轴文字过长展示xAxis: { type: "category", data: xAxis, axisLabel: { //坐标轴刻度标签的相关设置。 interval: 0, formatter: function(params){ var newParamsName = "";// 最终拼接成的字符串

原创 vue+elementUI上传视频

vue+elementUI上传视频效果展示: 代码如下： <div class="picture-detail"> <p class="picture-total">视频文件： <em>{{fileLen}}/8</em></p> <div class="video-upload clear"> <div class="video-avatar fl" v-for="(it

原创 微信小程序按需引入echarts（地图图表显示不出问题）

当前病毒横行，我们公司也不例外开始做起了疫情地图分布。首先从https://github.com/ecomfe/echarts-for-weixin把ec-canvas文件夹copy出来到自己的项目中，这里我新建了一个components来存放.wxml——写个标签包着ec-canvas <view class="container1"> <ec-canvas id...

原创 微信小程序两端对齐flex布局

效果如图：<view class='teach-module'> <view class='teach-box {{item.techClass}}' wx:for="{{teachNav}}" wx:key="index" > <text class='tech-text'>{{item.tit}}</text> </vi...

原创 微信小程序checkbox选择框样式修改

checkout {font-size: 44rpx;//文字扩大相应倍数color: #666;transform: scale(0.6,0.6);//使用缩放，缩小选择框transform-origin: 0 0;//解决缩放后元素居中问题}效果图如下：...