- 博客(58)
- 收藏
- 关注
RSS订阅原创 Vue全局emit on实现
export default class Bus { constructor() { this.PubSubCache = { $uid: 0 }; } on(type, handler) { let cache = this.PubSubCache[type] || (this.PubSubCache[type] = {}); handler.$uid = handler.$uid || thi
2022-01-19 09:35:02
1093
原创 微信小程序自定义头部导航，以及ios中wx.getMenuButtonBoundingClientRect()方法有时候获取返回0的解决方案
微信小程序自定义导航栏 wx.getMenuButtonBoundingClientRect() 有时候在ios会返回所有信息都是0globalData: { navBarHeight: 0, // 导航栏高度 menuTop: 0, // 胶囊距导航栏间距 menuBottom: 0, // 胶囊距底部间距（保持底部间距一致） menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuWidth: 0, // 胶囊长度 menuHeight:
2021-11-01 15:18:13
1005
原创 刷知乎删掉视频封面
上班摸鱼怕被看到知乎大图？setInterval(() => { document.querySelectorAll('.css-1hrc83f').forEach(v => { v.parentNode.removeChild(v) }) document.querySelectorAll('.VideoAnswerPlayer').forEach(v => { v.parentNode.removeChild(v) })}, 500)打开f12在console运
2021-10-26 17:00:31
125
原创 http请求状态码对应的意思
编号意义100继续101交换协议200好的201创建202接受203非权威信息204无内容205重置内容206部分内容300多项选择301永久移动302找到303参见其他304未修改305使用代理307临时重定向400错误请求401未经授权402需要付款403禁止404未找到405不允许的方法406不可接受...
2021-08-26 14:42:31
73
原创 html2canvas插件将一块div转换成图片并下载
若是toDataURL方法报错，是因为图片路径不对，本地图片要转换成base64function dataURLToBlob(dataurl) { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bs
2021-07-06 15:56:01
371
原创 MQTT的QoS有什么用
MQTT根据QoS定义的等级来传输消息。等级描述如下：level 0：最多一次的传输消息是基于TCP/IP网络传输的。没有回应，在协议中也没有定义重传的语义。消息可能到达服务器1次，也可能根本不会到达。level 1：至少一次的传输服务器接收到消息会被确认，通过传输一个PUBACK信息。如果有一个可以辨认的传输失败，无论是通讯连接还是发送设备，还是过了一段时间确认信息没有收到，发送方都会将消息头的DUP位置1，然后再次发送消息。消息最少一次到达服务器。SUBSCRIBE和UNSUBSCRIBE都使用
2021-06-09 09:36:55
815
原创 VUE中一个修改商品数量的组件
商品数量修改VUE中使用<counting :disabled="" // 是否禁用 :numbers="" // 商品数量 :stockNum="" // 商品库存 :maxNum="" // 最大购买值 :minNum="" // 最小购买值 @changeNumber="changeNumber($event, v1.id)" // 改变数量后的方法/>组件<template> <div :class="{ counting: true,
2021-05-25 09:17:10
495
原创 vue页面中使用json格式动态图
如图所示，json格式动态图需要插件 “vue-lottie”下载插件npm i vue-lottie -Smain.js 引入使用import lottie from "vue-lottie";Vue.component("lottie", lottie);代码中使用// 引入文件import gif1 from "@/assets/img/taurus/阿牛动画/json/cow1.json";// 页面中使用，options中的animationData值是图片路径，引入后替
2021-01-23 15:52:17
3177
1
转载 vue 数字滚动增加
下载npm install vue-count-to -S直接使用<template><countTo :startVal='startVal' :endVal='endVal' :duration='2000'></countTo></template><script>import countTo from 'vue-count-to';export default { components: { countTo }, d
2020-12-10 15:50:35
232
原创 基于vue的一个红包雨h5活动页面
<template> <div id="redEnvelopeRain"> <div class="box" ref="box"></div> </div></template><script>import { random } from "@/utils/index.js";export default { name: "redEnvelopeRain", data() { return {};
2020-12-03 15:06:26
1226
原创 网站变成灰白主题色
在主标签 html 上加上 style=“filter: grayscale(100%);”filter: grayscale(100%);效果：
2020-11-27 14:17:28
229
原创 Vue 点击复制到粘贴板
// main.js 中// 点击复制import VueClipboard from "vue-clipboard2";Vue.use(VueClipboard);项目中this.$copyText("阿大撒大撒").then(() => {// 复制成功后操作});
2020-11-02 10:49:52
293
原创 js实现复制粘贴(兼容IOS 9.3)以上版本
/* HTML */<!-- 复制按钮 --><div class="copyBtn" onclick="copyContent('adas1165465165');">复制淘口令</div><input id="copy_content" type="text" value="" style="position: fixed;top: -100px;z-index: -10;" /> /*js*/// 点击复制function copyCon
2020-09-16 09:45:44
332
原创 React上传头像并且裁剪
React React上传头像并且裁剪使用一个插件 react-avatar-editor文档地址： https://www.npmjs.com/package/react-avatar-editornpm 下载 npm i react-avatar-editor -S版本最好是10.0.7，新版可能会报错文件不能使用http图片，否则canvas导出会报错跨域，只能从本地上传图片然后转换成base64传给裁剪组件代码和效果（使用antd - ui）import AvatarEditor
2020-08-21 10:50:17
983
原创 js将域名？后拼接的参数格式化成对象
// 获取url域名后拼接的参数，并且转换成对象const getLocationSearchQUery = () => { let str = location.search.slice(1); let strArr = str.split('&'); let sendData = {}; strArr.forEach(v => { let newInfo = v.split('='); sendData[newInfo[0]] = newInfo[1]; })
2020-08-10 10:42:49
389
原创 react 使用 NProgress 顶部滚动条
首先下载npm i nprogress -S之后项目中引入–css文件必须引入，否则会无效import NProgress from 'nprogress'import 'nprogress/nprogress.css'在请求之前使用，请求完成后关闭NProgress.start() // 显示滚动条NProgress.done() // 关闭滚动条全局请求方法中修改样式#nprogress .bar { background: #1890ff !important; h
2020-07-24 14:49:34
777
原创 react万能改变表单项
// 改变表单项export const changeForm = (key, value, formData) => { let cloneFormData = { ...formData } return new Promise((resolve) => { if (typeof key == 'object' && typeof key.length == 'number' && typeof value.length != 'number
2020-07-06 10:37:45
397
原创 css实现瀑布流
一行代码实现瀑布流css 的 column-count 属性，将一个盒子分成 x 列，例如 column-count: 2; ，就是将一个div分成 2 列但是排列不是按照数组顺序排序，因为分成2列后是按照顺序从上往下排列，会自动计算，第一列按照数组顺序渲染完才接着渲染第二列，无关紧要<template> <div id="demoBox"> <div class="pbl_box"> <div class="pbl_box_inf
2020-07-01 09:28:38
1870
原创 React&antd表格合并列
合并表格中连续的相同的列// antd表格合并列/*key: 键值row：当前行index：当前行索引listData：表格全部数据*/export const rowSpanTable = (key, row, index, listData) => { let rowSpan = 1 let arrIndex = 0 listData.forEach((item, Dindex) => { if (item.id === row.id) { a
2020-06-30 09:57:44
1293
2
原创 React中使用echarts（折线图）
组件代码import React, { Component } from 'react'import echarts from 'echarts'class Echart extends Component { constructor(props) { super(props) this.state = { } } // 挂载完成之后，因为React初始化echarts时长宽可能会获取到顶层，所以延迟200去生成，不影响视觉效果 componentDidMo
2020-06-28 20:00:13
4027
2
原创 vue事件传值给Flutter
vue中methods方法methods: { // 发送给flutter的事件 sendData(shopinfo) { // eslint-disable-next-line no-undef clickGoods.postMessage(JSON.stringify(shopinfo)); },}在Flutter接收 JavascriptChannel _toasterJavascriptChannel(BuildContext context)
2020-06-17 15:13:50
793
3
原创 eslint自己习惯的的规则
{ "rules": { "eqeqeq":["off"], "guard-for-in": 0, "max-len" : ["error", {"code" : 300}], "comma-spacing": ["error", { "before": false, "after": true }], "no-mixed-spaces-and-tabs": ["error", "smart-tabs"], "comma-dangle": ["error"
2020-06-12 11:45:42
209
原创 element-ui中el-image组件打开预览功能后，点击当前的图片，预览出来的不是当前，是切换后关闭之前的那一张
el-image组件它是先渲染好浏览图片的div，当点击图片时直接把隐藏的div显示出来。当关闭时就直接隐藏div，下次点击又是直接显示div，并没有处理图片顺序。所以再次打开就是展示关闭前的图片。//如果想每次点击都显示第一张。目前一个方法就是监听图片添加一个点击事件，对this.srcList重新赋值就可以了mounted() { document.addEventListener('click', (e) => { if (e.target.classList.contains('el
2020-06-09 10:56:13
8230
6
原创 js-cookie库方法
封装js-cookie库import Cookies from 'js-cookie'export const setCookie = (name, value, days) => { return Cookies.set(name, value, { domain: domain, expires: days })}export const getCookie (name) => { return Cookies.get(name, { domain: domain })}
2020-06-04 15:19:04
426
原创 vue中ios13/安卓10以下浏览器使用axios请求状态码为0
因为有自定义请求头userId和token，所以先会进行options，options后服务端返回了，但是前端浏览器没有进行post，因为后台设置的headers为*，可能ios13/安卓10一下浏览器识别不出来后台允许有自定义请求头的存在所以后台将Access-Control-Allow-Headers: *修改为Access-Control-Allow-Headers: accept, content-type, origin, userid, token将自定义请求头和默认请求头全
2020-06-03 10:54:04
4681
原创 常用工具库
表单// 邮箱验证export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}// 手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}// 电话号码export const isPhone = (s) => {
2020-06-01 14:06:42
522
原创 原生js动态生成表格，隔行变色，双击修改表格内容并且同步修改二维数组，将数组打印
嘤嘤嘤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table tbody tr
2020-05-13 16:57:15
369
原创 js实现浏览器页面返回上一页
window.location.href = document.referrer;window.history.back(-1);
2020-05-06 18:19:53
805
原创 Vue常见报错
1.@click=“xxx”,xxx方法没有在methods中定义Cannot read property ‘_wrapper’ of undefined
2020-05-06 14:45:24
235
原创 Vue项目接入腾讯滑动验证
首先在html中引入sdk，位于head和body之间<!DOCTYPE html><html lang="en" style="font-size: 20px;"> <head></head> <!-- 验证码 --> <script src="https://ssl.captcha.qq.com/TCaptcha...
2020-04-22 16:11:58
1185
原创 upload上传时，唯一文件类型说明符accept说明
唯一文件类型说明符唯一的文件类型说明符是描述类型的文件可以由用户在被选择的字符串类型的元件file。每个唯一文件类型说明符都可以采用以下形式之一：一个有效的不区分大小写的文件名扩展名，以句点（“。”）字符开头。例如：.jpg，.pdf，或.doc。有效的MIME类型字符串，不带扩展名。字符串，audio/*表示“任何音频文件”。字符串，video/*表示“任何视频文件”。字符串，i...
2020-04-01 15:01:16
4468
原创 vue.config.js 基础配置
const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { // 部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 生产...
2020-03-23 15:20:20
222
原创 前端css标签样式重置
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,asid...
2020-01-10 11:42:26
350
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人