前端
赵啸林
昨日已成历史,明天是个谜团,但今天是天赐的礼物。
展开
-
漂浮物vue3,只占2%gpu
【代码】漂浮物vue3。原创 2023-01-09 14:06:40 · 184 阅读 · 0 评论 -
vscode里使用vetur格式化取消末尾逗号
【代码】vscode里使用vetur格式化取消末尾逗号。原创 2023-01-04 11:35:35 · 1774 阅读 · 0 评论 -
给页面追加背景颜色和背景图片(兼容ios,pc),页面在背景图上悬浮滚动
【代码】给页面追加背景颜色和背景图片(兼容ios,pc),页面在背景图上悬浮滚动。原创 2022-12-28 14:55:18 · 174 阅读 · 0 评论 -
vue3使用jodit富文本编辑器
(我是原字体上面更改替换的)原创 2022-12-14 17:20:09 · 1254 阅读 · 0 评论 -
更新npm
nodejs选择长期稳定版本3.查询npm版本号4.如果更新node之后没有更新npm安装指定版本 例如版本8.11.0如果首次安装node_modules没有生成pakage.loak.json文件,可更新nodejs,删除node_modules文件重新安装npm install安装插件包...原创 2022-06-22 10:30:11 · 1273 阅读 · 0 评论 -
uniapp 打开腾讯地图
//打开腾讯地图 navigation() { let url = 'https://apis.map.qq.com/ws/geocoder/v1/'; this.$jsonp(url, { key: '你的腾讯地图key', address: this.list.address, //具体的地址 output: 'jsonp' }) .then(res => { console.log(res); let lng = res.原创 2022-04-09 17:07:18 · 917 阅读 · 1 评论 -
存储设备唯一标识(浏览器指纹库)
https://github.com/fingerprintjs/fingerprintjs1.npm安装 or yarnnpm i @fingerprintjs/fingerprintjs# oryarn add @fingerprintjs/fingerprintjsimport FingerprintJS from '@fingerprintjs/fingerprintjs'// Initialize an agent at application startup.const fpP原创 2022-04-09 17:06:30 · 661 阅读 · 0 评论 -
js获取、今日、昨日的开始与结束时间戳
/** * 可以根据转入的天数获取前面某天的开始与结束时间戳 * @param {number} num 前面几天 */function getStartEndTime (num = 1) { // 一天的毫秒数 const MillisecondsADay = 24*60*60*1000 * num // 今日开始时间戳 const todayStartTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() // 今原创 2022-04-09 17:04:39 · 958 阅读 · 0 评论 -
uniapp使用网易易盾
插件地址:https://ext.dcloud.net.cn/plugin?id=1617创建组件yidunCaptcha.vue<template> <view> <!-- #ifdef MP-WEIXIN --> <ne-captcha v-if="captchaId" :captchaId="captchaId" :width="width" :lang="lang" :customStyles="cus原创 2022-04-09 17:01:20 · 2278 阅读 · 1 评论 -
通过监听页面宽度切换移动端和PC端
<template> <div id="app" v-if="showCard"> <HeadNav></HeadNav> <router-view v-cloak v-if="isRouterAlive" /> <!-- 返回顶部组件 --> <scroll-to></scroll-to> <!-- 客服 --> <div class="ke原创 2022-04-09 17:00:09 · 924 阅读 · 0 评论 -
uniapp优化h5项目-摇树优化,gzip压缩和删除console.log
1.摇树优化勾选摇树优化,打包删除死代码2.gzip压缩和删除console.log安装插件webpack和compression-webpack-pluginwebpack插件npm install webpack@4.46.0 --save-devcompression-webpack-plugin插件npm install compression-webpack-plugin@6.1.1 --save-devconst CompressionWebpackPlugin = req原创 2022-04-09 16:58:27 · 3239 阅读 · 2 评论 -
swiper7匀速滚动
<swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper" @slideChange="onSlideChange" :auto原创 2022-04-09 16:56:58 · 948 阅读 · 0 评论 -
深入理解事件循环
众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript是单线程这一核心,,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?浏览器执行线程在解释事件循环之前首先先解释一下浏览器的执行线程: 浏览器是多进程的,浏览器每一个 tab标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HT.转载 2022-03-24 14:10:08 · 272 阅读 · 0 评论 -
重绘(repaint)和回流(reflow)
1.重绘和回流是什么怎么去理解这两个概念呢?从字面上理解,重绘,重新绘画,重新上色,较难产生联想的是回流。我们都知道,一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的样式对应的渲染这些节点。在这个过程中,回流与DOM树,渲染树有关,重绘与渲染树有关,怎么去理解呢?比如我们增删DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树结构发生变化,那么肯定要重新构建DOM树,而DOM树转载 2022-03-24 13:59:02 · 688 阅读 · 1 评论 -
广度算法和深度算法
背景在开发页面的时候,我们有时候会遇到这种需求:在页面某个dom节点中遍历,找到目标dom节点,我们正常做法是利用选择器document.getElementById(),document.getElementsByName()或者document.getElementsByTagName(),但在本文,我们从算法的角度去查找dom节点,同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理。准备var node = document.querySelector('#root');cons转载 2022-03-24 13:46:41 · 423 阅读 · 0 评论 -
滑块 验证
<template> <div class="jc-component__range"> <div class="jc-range" :class="rangeStatus?'success':''"> <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i> {{rangeStatus?successText:startT原创 2022-03-15 13:46:49 · 226 阅读 · 0 评论 -
vue3页面绑定滚动事件上拉加载更多
//滚动区域内的容器<div id="scroll"></div>//滚动事件 const onScroll = () => { //可滚动容器的高度 let innerHeight = document.getElementById("scroll").clientHeight; //屏幕尺寸高度 let outerHeight = document.documentElement.clientHeight;原创 2022-02-26 17:22:41 · 4344 阅读 · 0 评论 -
富文本框vue 自定义图片上传
<ueditor ref="by_know" :config="{ initialFrameWidth: null, initialFrameHeight: 350, }" :defaultMsg="form.info" :ueditorChange="agreenInfoChange"></ueditor>>agreenInfoChange(msg) { this.form.原创 2022-01-06 20:27:45 · 868 阅读 · 0 评论 -
h5回到顶部
scroll-view scroll-y :style="{ 'height': getWindowHeight + 'rpx' }" @scroll="scroll" :scroll-top="scrollTop"></scroll-view><image src="###" mode="widthFix" v-if="scrollTop>100" @click="scrollTop = 0" class="arrow"></image>compute原创 2021-12-30 09:31:45 · 802 阅读 · 0 评论 -
VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能
实现效果实现//先是两个功能按钮<el-button type="primary" @click="toggleRowExpansion(true)" icon="el-icon-arrow-down" size="mini">全部展开</el-button><el-button type="primary" @click="toggleRowExpansion(false)" icon="el-icon-arrow-up" size="mini">全部收回转载 2021-10-27 16:27:30 · 1393 阅读 · 0 评论 -
js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>wx.ready(function() { wx.hideMenuItems({ menuList: ["menuItem:copyUrl","menuItem:editTag","menuItem:delete","menuItem:originPage","menuItem:readMode", "menuItem:ope转载 2021-09-24 10:03:26 · 1251 阅读 · 0 评论 -
Vue CLI 开启gzip压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件:npm i -D compression-webpack-plugin//seo模块开始const PrerenderSPAPlugin = require('prerender-spa-plugin')const Re原创 2021-09-13 15:50:53 · 731 阅读 · 0 评论 -
Vue 生成海报的插件vue-canvas-poster
1.npm安装vue-canvas-posternpm i --save vue-canvas-poster2.在mian.js中引入important VueCanvasPoster from 'vue-canvas-poster'Vue.use(VueCanvasPoster)3.在需要的页面中使用 <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="ca转载 2021-09-04 10:20:37 · 2657 阅读 · 0 评论 -
vue-canvas生成海报图
此图为生成的海报图。git链接:https://github.com/sunniejs/vue_canvas_poster1、通过cnpm安装cnpm i vue-canvas-poster --save2、全局注册-在main.js中引用/*canvas*/import CanvasPoster from 'vue-canvas-poster' Vue.use(CanvasPoster)3、html<div class="content_container"> .转载 2021-09-04 10:14:50 · 922 阅读 · 0 评论 -
window.open()打开窗口的几种方式
window.open()的三个参数例如:window.open("要跳转的网址", "跳转形式或者名字", "给出窗口添加新的的属性(字符串形式)");window.open("###", "_blank","height=600, width=600, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");1. 在当前窗口打开百度,并且使URL地址出现在搜索原创 2021-08-08 08:23:27 · 26781 阅读 · 2 评论 -
uniapp使用音频
audioQuickPlay组件<audioQuickPlay :url="####"></audioQuickPlay>import audioQuickPlay from '@/components/audioQuickPlay/index.vue'export default { components: { audioQuickPlay }, }原创 2021-08-04 11:13:22 · 1130 阅读 · 0 评论 -
uniapp 省市区插件
region.json<template> <view class="region"> <picker mode="multiSelector" :defaultValue="value" :range="range" range-key="name" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled"> <view class="cont原创 2021-08-03 17:51:25 · 1029 阅读 · 0 评论 -
uniapp 即时分享(微信,朋友圈,新浪微博,复制,更多)
share.jsimport appShare, { closeShare } from '@/lib/share.js'; //分享//分享 share() { let shareData = { shareUrl: '###', //跳转地址 shareTitle: '###', //分享标题 shareContent: '###', //分享描述 shareImg: '###' //分享图片 }; appShare(shareData, res原创 2021-07-31 17:55:12 · 742 阅读 · 0 评论 -
uniapp动态权限修改之摄像头和存储权限
permission.jsimport permision from '../../lib/permission.js';//选择相机或者相册更换头像 sculpture(e) { let sourceType = null; if (e == 1) { //相机 sourceType = this.sourceType1; switch (uni.getSystemInfoSync().platform) { case 'android':原创 2021-07-31 17:20:24 · 5306 阅读 · 0 评论 -
如何在uni-app使用vuex
由于uni-app已经内置了vuex,所以只要正确引入就好了。1、在项目的根目录下,创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件2、在该js文件下定义公共的数据以及方法函数,并且把它导出import api from "../../http/api";import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: {转载 2021-07-31 10:09:23 · 3116 阅读 · 0 评论 -
uniapp去掉首次安装的权限提示
https://www.yezipi.net/article/detail/10079在mainfest.json文件源码视图,在android节点添加如下内容:{ "permissionExternalStorage": { "request": "none", "prompt": "应用保存运行状态等信息,需要获取读写手机存储(系统提示为访问设备上的照片、媒体内容和文件)权限,请允许。" }, "permissionPhoneState": { "request转载 2021-07-29 17:44:45 · 3106 阅读 · 3 评论 -
H5拨打电话
一.原生html文件项目<p>联系电话:<a :href="'tel:' + item.phone" rel="external nofollow" >{{item.phone}}</a></p>二.vue项目1.在vue项目的index.html中添加如下代码:<meta name="format-detection" content="telephone=yes" />2.在需要调起手机拨号功能的页面,写如下函数: <di转载 2021-07-29 11:59:14 · 1194 阅读 · 0 评论 -
查看微信公众号的二维码
1、打开手机微信,打开进入订阅号2、找到想要查看二维码的微信公众号,这里用一个订阅号举例。3、进入公众号后,点击公众号简介出现微信号。4、记下这个微信公众号的微信号。5、在打开浏览器,在网页地址栏输入https://open.weixin.qq.com/qr/code?username=微信号(微信号这里填刚刚记下的微信号)并回车,就会出现公众号的二维码,右键另存为图片就可以下载该二维码。...原创 2021-07-13 15:47:04 · 8150 阅读 · 0 评论 -
vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;安装使用:npm install vue-count-to例子:<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo&g转载 2021-06-19 00:13:33 · 370 阅读 · 0 评论 -
vue使用scrollReveal滚动插件
1.npm安装scrollRevealnpm install scrollreveal2.引入到组件中import scrollReveal from ‘scrollreveal’;3.在data中注册data() { return { scrollReveal: scrollReveal(), //页面滚动动画 } }4.项目中使用<div class="reveal-bottom">demo</div> this.scro原创 2021-06-19 00:06:58 · 1352 阅读 · 0 评论 -
Vue.js 中的 v-cloak 指令
https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app转载 2021-06-18 09:44:19 · 407 阅读 · 0 评论 -
vue 复制文本到浏览器
<button @click="copy">复制链接</button> copy() { let url = this.input;//是所需要复制的内容 let oInput = document.createElement('input') oInput.value = url document.body.appendChild(oInput) ...转载 2021-06-14 23:23:43 · 164 阅读 · 0 评论 -
js的this和函数以及原型
大批量创建工厂函数 function create(name,age,sex){ let obj = new Object() obj.name = name; obj.age = age; obj.sex = sex; obj.seyName = function(){ alert(this.name) } return obj; } let obj1原创 2021-05-13 15:36:24 · 104 阅读 · 0 评论 -
js编码和解码
一.Unicode编码和解码1.escape()和unescape()方法escape() 方法能够把 ASCII 之外的所有字符转换为 %xx 或 %uxxxx(x表示十六进制的数字)的转义序列。从 \u000 到 \u00ff 的 Unicode 字符由转义序列 %xx 替代,其他所有 Unicode 字符由 %uxxxx 序列替代。var s = "JavaScript 中国";s = escape(s); //Unicode编码console.log(s); //返回字符串“Java转载 2021-05-12 10:05:16 · 2495 阅读 · 1 评论 -
git冲突解决(删除已提交远程仓库的打包文件并合并分支)
1.先合并远程仓库=》报错2.解决=》git fetch origin3.关联=》git checkout 要合并的分支名4.关掉自己分支的快进方式并跳转关联分支 要合并的分支=》git merge --no-ff 自己的分支5.git rm -r -n --cached unpackage //查看要删除的远程仓库的文件夹6.git rm -r --cached unpackage //删除7.git add .8. git commit -m “”9. git push orig原创 2021-05-09 11:20:18 · 461 阅读 · 0 评论