随笔分类 - 前端
遇到的问题
摘要：其实使用css就可以实现 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:
阅读全文
摘要：一.前言。 众所周知，在现今的开发大环境下，数据可视化（大屏化）项目在前端开发中的比重越来越大。而其中使用率最高的插件无疑就是 Apache Echarts。（ps: 以下简称为echarts）。本文就结合vue框架来讲解如何快速、高效、优雅地在项目中使用echarts。当然，本文篇幅也会为读者精心
阅读全文
摘要：相同点： visibility和display都能实现元素的显示和隐藏display: none; 隐藏元素display: block; 显示元素display: inline; 元素转换为行内元素 display: inline-block; 元素转换为行内块元素 visibility:hidd
阅读全文
摘要：reduce为数组的一个方法，处理一些数组去重，获取数组出现次数等非常好用，写法为： arr.reduce((preV,cur,index,oldArr)=>{}) 传参： preV：上次调用函数的返回值 cur：当前元素 index：当前元素索引 arr：被遍历的数组 他还可以设置一个初始迭代值，
阅读全文
摘要：list.sort((a,b)=> { return b.time < a.time ? -1:1 })
阅读全文
摘要：let arr = [ { name: "zs", age: 18, id: 1, sex: 0 }, { name: "ls", age: 19, id: 2, sex: 0 }, { name: "zs", age: 19, id: 3, sex: 1 } ]; 找到对象group所对应的数据，
阅读全文
摘要：例如根据id去重 方法1：for in的方法 objHeavy(arr) { let arr1 = [];//存id let newArr = [];//存新数组 for(let i in arr) { if(arr1.indexOf(arr[i].id) == -1) { arr1.push(ar
阅读全文
摘要：视图更新： push() pop() shift() unshift() splice() sort() reverse() 以下常用的数组操作都不会改变现有的数组，而是返回一个新数组 slice() concat() join() fliter()
阅读全文
摘要：方法： newArry.sort（sortBy（‘age’），false） 对应数组.方法（函数名称（排序的属性值），是否升序） 例子： let arr=[ {name:'zopp',age:0}, {name:'gg',age=18}, {name:'zz',age=8} ]; let newAr
阅读全文
摘要：1.产生的原因： 给对象添加一个属性，在控制台打印出来，但是却没有更新到视图上时。需要用this.$set（）的方法 2.使用方法 调用方法：this.$set(target,key,value) target：要更改的数据源（可以用对象或者数组） key：要更改的具体数据 value：重新赋值 例
阅读全文
摘要：解决方法（均在video标签上加属性）：ios: webkit-playsinline="true" android: x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrain
阅读全文
摘要：SVG <use>元素可以重用SVG文档中其他位置（包括 <g>元素和 <symbol>元素）的SVG形状。可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。 一、简单案例分析 示例： <!doctype html> <html lang="en"> <head> <met
阅读全文
摘要：如果有canvas基础的可以跟快上手path这里的内容： path时svg的一个标签，他有一个路径d，d中包括如下指令： 命令 名称 参数 M moveto 移动到 (x y) Z closepath 关闭路径 (none) L lineto 画线到 (x y) H horizontal linet
阅读全文
摘要：当一个页面要引入同一个组件很多次的时候，且都需要传递唯一且不同的内容，还要设置不一样的ref属性，调取很多次this.$refs.名称，可以封装对象减少代码属性举例： let a={one:1,two:2}; let b = 'two' a[c] = 2
阅读全文
摘要：首先我们要了解$on和$emit vm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。父
阅读全文
摘要：封装组件时常碰到子组件的一些事件要在父组件中处理，关键词时this.$emit， 注意：他要和父组件调用子组件的方法中的一个this.$emit和this.$on区分开（这里就不太多解释可以查看：https://www.cnblogs.com/heibaiqi/p/16548029.html） 子组
阅读全文
svg画出半圆？熟记老妹啊！
摘要：当vue写svg标签时，里面的内容用通过v-for遍历，如果每次都遍历太消耗性能了，可以写在<g>标签中，相当于遍历时<template>标签，但是在svg标签中template不能使用，代码如下： <g v-for="(item,index) in arr" :key="index" > <!--
阅读全文
摘要：H5新出新出的canvas可以说被好多公司使用，但是canvas没有一个合适的关于箭头的一个样式就很不好，下面封装了一个箭头的简单样式，可以直接拿到项目中使用： drawArrow(ctx,xA,yA,xB,yB,l=5,θ=30) { let L = 5; let a = Math.atan2((
阅读全文
摘要：今天做canvas画图时碰到一个问题，当往canvas引入图片时需要在外部写一个图片代码为： <template> <div> <canvas ref="canvasBox" class="canvas_style" width="360" height="220" ></canvas> <img
阅读全文
