beichen3997-CSDN博客

原创怎么让Chrome支持小于12px 的文字？

这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？我们的做法是：针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性<style>pspan{font-size:10px;-webkit-transfo

2020-11-05 15:22:53 352

原创从零到一实现自己的脚手架工具CLI

从零到一实现自己的脚手架工具CLI1. #!/usr/bin/env node2.npm init –y3.package.json 中添加 bin4.npm link 把命令链接到全局5.itcast –h| --help查看使用帮助6.itcast –v|--version 查看工具版本号7.itcast list 列出所有可用模板8.itcast init <template-name><project-name>基于指定的模板进行初..

2020-10-27 15:33:33 371

原创 javascript——原型与原型链

一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如：function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(perso

2020-10-19 10:36:46 185

原创不定宽溢出文本适配滚动

上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap { position: relative; width: 10vw; height: 100vh; background: #ddd; overflow: hidden; ..

2020-09-28 10:24:06 334

原创基准测试js

console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){ items.push({index: i});}console.timeEnd('Timer1');结果Timer1: 13.076904296875ms

2020-09-24 17:05:11 233

原创为什么vue采用异步渲染

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）原理：当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会...

2020-09-09 14:39:45 1165

原创数组变化检测vue

vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现一、变化数组方法push()pop()shift()unshift()splice()sort()reverse()二、替换一个数组filter()concat()slice()为什么vue数组改变了，视图不变？Tips由于 JavaScript 的限制，Vue 无法检测到以下数组变动1、当你使用索引直接设置一项时，例如 vm.items[indexOfItem] ...

2020-09-09 14:32:13 256

原创 vue中父组件能监听到子组件的生命周期

父组件能够监听到子组件的生命周期，通过@hook:进行监听代码如下：// 这里是父组件<template> <child @hook:mounted="getChildMounted" /></template><script>method: { getChildMounted () { // 这里可以获取到子组件mounted的信息 }}</script>...

2020-09-09 14:14:28 491

原创 vue父组件和子组件生命周期的顺序

1.渲染过程顺序：父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()2.更新过程顺序：父组件更新过程：父组件beforeUpdate() -> 父组件updated()子组件更新过程：父组件beforeUpdate()

2020-09-09 14:11:16 409

原创 v-if和v-for一起使用的弊端以及解决办法

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。解决办法：在v-for的外层或内层包裹一个元素来使用v-if...

2020-09-09 14:05:41 1825

原创 CSS3中各个浏览器内核兼容的设置

1.-moz-：代表FireFox浏览器私有属性2.-ms-：代表IE浏览器私有属性3.-webkit-：代表safari、chrome浏览器私有属性4.-o-：代表opera浏览器私有属性IE9以下的浏览器不支持HTML5标签，所以需要导入一个html5.js补丁，原理是通过JS来生成HTML5新标签对象。因为本着移动优先的原则，现在写CSS都会用media query（响应式设计），IE8以下的浏览器不支持media query，这会导致@media 声明的C...

2020-09-09 13:46:38 484

原创 Vue的双向数据绑定原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：

2020-09-09 11:23:37 1769

原创 vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：

2020-09-09 10:35:16 220

原创关于小程序便签text在某些场景中出现空格以及下移的问题

关于小程序便签text在某些场景中出现空格以及下移的问题在父标签view中定义display:flex;使用弹性布局的时候<view>你好<text>我好</text></view><view>你好<view style="display:inline-block;">我好</view></view>欢迎点赞...

2020-07-03 11:11:20 299

原创关于阻止小程序弹框滑动的办法

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。场景1：弹窗内无滚动内容可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。简单写法：catchtouchmove='true'此种方式会阻止弹窗内所有内容的滚动。要记得慎用需求场景：整屏展示，弹框内不存在滑动的需求场景二：弹窗内有滚动内容在弹窗外层根元素动态添加一个noScroll样式，定义noScroll{height: 100%; ov

2020-07-03 10:54:24 767

原创 git版本回滾

git log 查看版本記錄git reset --hard 2e8886439a1c1bd6 回滾到某次提交git push origin -f 强制提交当前分支提交master要记得关闭版本库master的保护，强制提交完毕开启保护

2020-06-02 13:55:04 187

原创页面全局灰度实现原理

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: .

2020-05-19 18:33:53 306

原创微信小程序操作dom元素节点 wx.createSelectorQuery()

WXML<view> <text class="title" id="productServe">产品服务</text> <text class="title" id="enterpriseServe">企业服务</text> <text class="title" id="normalServe">常用应用</text></view>Page({ //声明节点查询的方法

2020-05-09 10:23:45 1210

转载 echarts x轴标签文字过多导致显示不全

echarts x轴标签文字过多导致显示不全如图：解决办法1：xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置。（当然yAxis也是一样有这个属性的）[html]view plaincopyaxisLabel:{ interval:0, rotate:40 }以上就可解决x...

2020-05-08 14:21:29 1092

原创 vue-cli 3中禁用eslint的方法

手贱，升级vue-cli到3.然后排错排了一下午，总体上来说升级3优点大于缺点这里说下cli3中如何禁用写代码时的唐僧--eslint 使用配置文件来选择禁用范围创建文件.eslintignore 加入如下内容 **/*.js**/*.vue 禁用下一行 // eslint-disable-next-line to ignore the next l...

2020-04-28 11:51:24 1209 2

原创 vue的生命周期钩子函数父子组件及缓存组件可以使用哪些函数

近期做vue的缓存等，路由比较复杂，认识了几个新的钩子函数，在此记录下生命周期函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeRouteEnterbeforeRouteLeaveactivateddeactivatedbeforeDestroydestroyed一、组件间函数的关系1....

2020-04-21 18:34:41 624

原创 js获取数组对象中某个属性的最大值或最小值

近的开发中经常会遇到前端自己生成唯一id，然后在数组中增加删除插入对象，这样一来就要的要当前使用的id的最大值。总结一下，有两种比较简便的方法可以做到：1. 将属性值通过map生成一个数组，再使用Math.max取最大值2. 使用排序sort，先对数组的项排序，再取排序后的对应的项的值代码实现数组对象如下,求id的最大值和最小值list: [ { id:...

2020-04-08 14:04:57 7051

原创中文排序

var arr = ['南京', '北京','-','','', '上海','北京', '杭州', '北京','深圳','-']; function sortChinese (arr) { // 参数：排序的数组 arr.sort(function (item1, item2) { console.log(item1.localeCompare(item2, 'zh-CN'))...

2020-04-03 11:19:39 162

原创 vue设置表格高度自适应

<el-table size="medium" :default-sort="defaultSort" :data="tableList" ref="tab" class="mt20" :style="{'width':'100%'}" :height="tableHeight...

2020-04-01 19:05:44 3052

原创 JS中获取当前日期（年-月-日）

很多时候我们需要在前台获取当前日期，但是可能后台并不能传过来，这个时候就需要用JS代码来获取当年日期，目前只总结出一种获得(yyyyMMdd)的日期格式，JS代码如下：/ 获取当前日期var date = new Date();// 获取当前月份var nowMonth = date.getMonth() + 1;// 获取当前是几号var strDate = date.get...

2020-03-31 16:57:09 13800

原创 chrome配置设置cookie，可以iframe获取跨域数据

This "feature" has been moved to defaults in Chrome 80. If you're experiencing issues, you can do the following: 1. Go into the "Chrome Flags" chrome://flags2. Search for same3. Disable "Enab...

2020-03-27 15:10:49 3485

原创 echarts legend自定义

legend: [ { itemWidth: 33, data: [ { name: "蒸发量", icon: "rect" } ], bottom: ...

2020-03-20 16:32:39 1485

原创 ECharts 柱状图改变柱子颜色+柱子上方显示文字与图标

var option = { // title: { // text: '资源总览', // left:'20px', // textStyle: { // color: "#436EEE", ...

2020-03-06 09:50:06 3194

原创 ECharts 柱状图改变柱子颜色+柱子上方显示文字与图标

option = { // tooltip: { // trigger: 'axis', // axisPointer: { // 坐标轴指示器，坐标轴触发有效 // type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // } ...

2020-03-05 23:32:36 2521

原创 Echarts常用配置(折线图阴影渐变，柱状图堆叠，柱状图顶部显示数量，饼图引导线配置，饼图引导线末加圆点效果)

1.折线图与柱状图鼠标hover效果 tooltip:{ width:20, axisPointer:{ type:'shadow' }, fommatter(params){ return params[0] //params是图表数据，为数组，在有两个数据（折线图或柱状图堆叠的情况）的情况下可通过param...

2020-03-04 15:53:46 1804

原创 echarts悬浮提示框之formatter 函数

要求：在图表用条形图显示一部分数据，其余数据采用悬浮提示框显示。说明：在echarts中的series要求的数据格式如下series: [{name: '直接访问',type: 'bar',stack: '总量',label: {no...

2020-03-04 15:48:40 1803

转载从零开始写一个node爬虫（上）—— 数据采集篇

爬虫相信大家都知道，这里我们从一个空的文件夹开始，也来写一写我们自己的爬虫程序吧。github入口爬虫毕竟涉及到数据的爬取，所以其实有一个道德的约束，那就是Robots协议，也就是爬虫协议，爬虫程序在爬取网站数据之前，会先看看是否存在robots.txt文件，假如有，会在这个文件允许的范围内进行爬取。像著名的百度，谷歌等搜索引擎，都是遵循这一道德规约的。好了，闲话少说，开始我们的编程之...

2020-01-14 15:25:03 522 1

原创 nodejs 代理解决开发环境跨域问题

前后端分离项目中，会遇到跨域问题。解决方法无非就是jsonp cors等。本次项目前端不搭node服务，线上用nginx搭站点，nginx转发ajax请求server。本地开发环境的跨域问题用node做代理转发请求server（完美解决开发环境下请求server的跨域问题）。node代码如下方法一：request包"use strict";const express =...

2020-01-14 14:38:32 560

原创使用gzip，提升访问页面速度

简单说一下对gzip的理解：客户端访问资源时，服务端先对资源进行压缩，再返回客户端自动解压，无需另行处理第一点要注意的是，客户端每次访问资源时，服务端都会对资源进行压缩，每次压缩都会占用一定的系统资源（CPU、内存），因此，这里需要对压缩后的资源进行缓存处理。因为前端使用了webpack打包工具，在构建过程中，使用compression-webpack-plugin插件即可对文件进行...

2020-01-10 14:31:39 292

原创使用Vue-cli3搭建Vue+TypeScript项目

一，创建项目使用npm安装vue-cli 3和typescriptnpm i -g @vue/cli typescript使用vue create命令快速搭建新项目的脚手架vue create vue-tsvue-ts 是我们的项目名称，执行上面的命令后，出现如下选项这里是单项选择，可以按上/下键切换选项，按enter进入下一步。这两个选项分别表示：...

2019-12-24 11:33:51 550

原创 MessageBox 弹框中按钮颜色设置confirmButtonClass用法

2019-12-19 13:45:31 10687 5

原创 JS深拷贝，进行方法拷贝

深拷贝的另一个简单的方法直接使用JSON.parse(JSON.stringify(Object))来进行缺点: 如果对象或者数组里有函数什么的, 就会出问题啦image当然对于函数可以使用JSON.stringify()和JSON.parse()的第二个参数进行转换function stringifyRep(key, value) { if (typeof...

2019-12-18 15:09:54 172

原创 vue-router路由组件传参解耦

这里写自定义目录标题vue-router路由组件传参解耦布尔模式对象模式函数模式 vue-router路由组件传参解耦路由组件中使用$route取路由参数会导致该路由与该组件形成高度绑定耦合原始取参方式// 路由组件const User = { template: '<div>User {{ $route.params.id }...

2019-12-18 14:20:11 976

原创如何将sql文件导入mysql

第一步：打在开始界面中找到mysql第二步：双击打开mysql软件。，并输入密码。第三步：如果sql文件的内容中有创建数据库的语句或者你想将表存放在你已有的数据库，在这里就不用创建数据库。第四步：输入“show databases;”就能看到自己创建的数据库。第五步：输入“use 数据库名”，开始使用这个数据库。第六步：开始导入sql文件，输入“source...

2019-12-11 14:39:09 1234

原创 Server-X：一款可能提升你十倍工作效率的工

本文将介绍一款全新的前端开发工具，希望它能给你的前端开发带来看起来和现在一样但其实又不那么一样的体验。你可能会说，大家都是秃头的成熟的前端程序员了，每一台电脑上都有几套自己辛辛苦苦装好的全家桶，为什么还要新换一个开发工具？对，盲生，你可能发现了华点。数一数你电脑上目前为前端本地开发安装了多少小工具、小插件？这其中仅仅是为代码开发阶段，就可能有本地服务器、远程调试工具、代理工具、浏览...

2019-12-11 11:43:30 329

空空如也

空空如也