Pgy121的博客

原创 Vue解决echart在element的tab切换时显示不正确问题

每次切换的时候把实例属性’_echarts_instance_移除就可以成功渲染// echart图表初始化，echartH为图表高度，echartRefs为元素ref echartInit(echartH, echartRefs) { let boxH = echartH; let { height } = { height: boxH }; let echartref = this.$refs[echartRefs

原创 JS，对数字实现三位分割显示不足三位自动补全三位

toOrderNum(num) { let stnum = num; let splitNum = Number(stnum).toLocaleString(); if (splitNum.length < 13) { if (splitNum.length % 4 == 1) { splitNum = `00${splitNum}` } else if (splitNum.length % 4 == 2) {

原创 高德地图海量点标记实现车主分布显示

<template> <div class="ordinary-distribution"> <div class="map-wrap"> <div class="map-content" id="map-content" ref="mapElement"></div> </div> </div></template><script>export defa.

原创 vue3.0新语法的基本使用

<template> <!-- <div>count:{{ count }}</div> <div>double:{{ double }}</div> --> <div>count:{{ count }}</div> <el-button @click="add">点击</el-button></template>import { reactive, re

原创 扩展运算符号实现累加计算

let add = (...c) => { let sum = 0; for (const item of c) { sum += item } return sum}let sum = [2, 3, 3, 4, 6, 6, 6, 888]let n = add(...sum)console.log(n); // 918

原创 ES6中的Map用法

map可以是 任意数据类型let num = 123;let arr = [1, 2, 3, 4];let fun = function () { };let obj = {};const map1 = new Map();map1.set(num, "q1");map1.set(arr, "q2");map1.set(fun, "q3");map1.set(obj, "q4");map1.set('aaa', "q5");for (const key of map1.keys())

原创 常用 Git 命令清单

一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库一、新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$

原创 git项目代码提交步骤

cd projectgit inittouch README.mdgit add README.mdgit commit -m “first commit”git remote add origin https://gitee.com/*************.gitgit push -u origin master

原创 git常用命令速查表

原创 JS括号匹配算法

let testFun = (str) => { let container = []; let match = { "}": "{", "]": "[", ")": "(" }; for (x of str.split("")) { if ((x == "{" || x == "[" || x == "(") && container.indexOf(x) < 0) { container.push(x); } else { if (container

原创 自定义v-model事件

父组件<template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div></template><script>import vModel from '@/components/HelloWorld'export default { name: 'home',

原创 生成【5-10】随机数（整数）

10 - parseInt(Math.random() * 6)

原创 前端基础知识点-es6

字符串let str = 'www.baidu.com'let n1 = str.includes('yyy')let n2 = str.startsWith('baidu', 4) // 从0开始数let n3 = str.endsWith('baidu', 9) // 从1开始数console.log(n1) // falseconsole.log(n2) // trueconsole.log(n3) //true模板字符串let userName = 'xiaomin'let u

原创 千分位算法实现

function format(v) { const reg = /\d{1,3}(?=(\d{3})+$)/g return `${v}`.replace(reg, '$&,')}g代表全局通用

原创 异步加载

原创 处理部分浏览器底部出现左右箭头栏

function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } pushHistory(); setTimeout(function () {...

原创 创建dom，并且点击弹出对应的序列

const list = document.getElementById('list')// 创建一个文档片段，此时还没有插入到DOM接口中const frag = document.createDocumentFragment()for (let i = 0; i < 10; i++) { const li = document.createElement('li') li.innerHTML = `LIST ITEM ${i}` li.addEventListener('click',

原创 手写Ajax

function ajax (url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.p

原创 闭包

所有的自由变量的查找，是在函数定义的地方，向上级作用域查找不是在执行的地方！！！/** * 函数作为返回值 */function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100/** * 函数作为参数被传递 */function print(fn) { const a = 200 fn()}cons

原创 点击复制标签内容

<script> $('.content-news .zm-code .copy-btn').on('click', function () { copyUrl() }) function copyUrl() { var $tempCopy = $("<input>"); $("body").append($tempCopy); $tempC

原创 vue 关于样式类动态绑定（推荐方法二）

方法一：通过 :class="+item.no <= 3 ? ‘top-no’ : ‘’"三木运算添加样式类<div class="list-item" v-for="item in rankData" :key="item.no"> <div classs="list-item-no" :class="+item.no <= 3 ? 'top-no' : ''">{{item.no}}</div></div>推荐写法方法二：通过数组

原创 获取当前时间--年月日时分秒

function getNowFormatDate () { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var hour = date.getHours(); var minutes = date.getMinutes();...

原创 eslint 基础配置

"rules": { "no-unused-vars": 0, "vue/no-unused-components": 0, "eslint-disable-next-line": 0, "eslint-disable": 0, "eol-last": 0, "no-trailing-spaces": 0, "no-tabs": 0, "indent": [ "off", 2

转载 vue项目三种方式刷新当前页面（重载当前页面数据）

一、this.$router.go(0)相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好二、location.reload()这种也是一样，画面一闪，体验不是很好，相当于页面刷新推荐解决方法：三、用provide / inject 组合原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。&

原创 vue短信验证码倒计时函数

倒计时函数const downTime = (e, Style) => { // 倒计时 let btnStyle = Style let _this = e.target let time = 60 let type = parseInt(_this.getAttribute('data-type')) if (type === 1) { let interval = setInterval(() => { _this.innerHTML = `$

转载 VUE图形验证码

VUE简易图形验证码一、安装indetifynpm install identify二、创建一个组件SIdentify.vue文件将下面代码直接复制进组件即可<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template&

转载 jQuery用for循环 实现图片按顺序加载

jQuery用for循环 实现图片按顺序加载$(function () { // var len = $("img").length; var len = 11; var tem = ""; for (i = 0; i <= len; i++) { tem += "<li><img src='./images/list" + parseInt(i) +

原创 VUE判断是否在微信浏览器

isWeiXin () { var ua = window.navigator.userAgent.toLowerCase(); // ua.indexOf('micromessenger')为真-微信端，如果为假，就是其他浏览器 if (ua.indexOf('micromessenger') > -1) { return true; /...

原创 vue 关于localStorage的使用方法

初始化获取localStorage数据 created () { this.getLocalStorage() },获取localstorage函数getLocalStorage () { this.hisKey = JSON.parse(localStorage.getItem('hisKey')) // 获取localStorage数组数据 this...

原创 vue 文字轮播

html模块<span v-html="animation[count]"></span>js模块data数据animation: ['网上购物 最高50倍保障', '已有267291人参加', '已获得保障金额57.29亿元'],js函数模块created () { setTimeout(this.animations, 3000) }, ...

原创 VUE把字符串解析成JSON

res.data是字符串数据，通过JSON.parse()转化成JSON格式JSON.parse(res.data)

原创 前端PC端自适应适配

适配主要函数function basefont(){ var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值 var wH = window.innerHeight;// 当前窗口的高度 var wW = window.innerWidth;// 当前窗口的宽度 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得...

原创 vuex核心概念详解

图片来自网络视频截屏，如有侵权，请联系本人立即删除！

原创 vuex应用实例

template模板部分<template> <div> <h1>当前最新的count值：{{count}}</h1> <h1>{{showNum}}</h1> <button @click="sub()">-</button> <button @click=...

原创 vue框架Vant--Tab选项卡悬停头部

template模块代码<template> <div> <div> <div ref="getheight" style="height:50px;background:#f00">固定栏</div> <van-tabs @click="onClick" :st...