js

数组或对象和字符串之间互相转换

//js对象转字符串
var arr = [1,2,3]
var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(arr) //[1,2,3]
str_pretty2 = JSON.stringify(str) //{"name":"菜鸟教程","site":"http://www.runoob.com"}
//字符串转对象
var obj = JSON.parse(str_pretty1);

数组去重

let arr = [3, 5, 2, 2, 5, 5];
let setArr = new Set(arr)     // 返回set数据结构  Set(3) {3, 5, 2}

//方法一   es6的...解构
let unique1 =  [...setArr ];      //去重转数组后  [3,5,2]

//方法二  Array.from()解析类数组为数组
let unique2 = Array.from(setArr )   //去重转数组后  [3,5,2]

number类型最大值

Number.MAX_SAFE_INTEGER

四舍五入指定小数位数

let num = 1.22
num.toFixed(1) //1.2

函数封装

export 加函数名

export function renderClick () {
 ...
}
//使用导出需要是对应的名字
import {renderClick} from '../assets/js/文件名'

匿名函数

export default function () {
    ...
}
//使用导出名字随便写
import nihao from '../assets/js/文件名'

导出立即执行

// js文件
    console.log(1)
// end
import form './index.js' //1

css样式

背景覆盖全屏

  background: url("../a/img/a.svg") no-repeat;
  background-size: cover;
  // 或者这种更稳
  background-size:100% 100%;

旋转

transform:rotate(7deg);

鼠标经过

cursor: pointer;

动态展示图片

需要引入否则不会生效

        { imgs: require("../imgs/new/sho.svg"), name: '首页' }

:before :after

:before 元素前，:after 元素后,一般利用定位确定位置

.el-dialog__header::after {
  position: absolute;
  content: "";
  right: 4px;
  bottom: 0;
  height: 23px;
  width: 26%;
  background: url("../imgs/new/Vector170.png") no-repeat;
  background-size: 100% 100%;
}

隐藏占据空间

<span style="visibility:hidden;">&nbsp;占空间</span>

过渡

transition: all 0.3s;

时间处理

时间戳格式化

使用dayjs插件

(v.length === 13) ? dayjs(Number(v)).format('YYYY/MM/DD HH:mm:ss') : dayjs(v).format('YYYY/MM/DD HH:mm:ss')

时间转时间戳

valueOf() 精确到毫秒

new Date().valueOf()
// time为需要转换的时间
new Date(time).getTime()

获取星期

    const week = ref<string>('星期' + '日一二三四五六'.charAt(new Date().getDay()))

数据存储

window.sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。
window.sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
window.sessionStorage.removeItem("index");//去除

路由

在keep-alive离开销毁

可以看到，组件都被保持了原先的状态，并没有被销毁，当然这也是keep-alive的初衷； 但如果想要其中一个或者多个组件在离开时依然被销毁，比如【用户user】路由组件，只需要在App.vue组件>的keep-alive写上exclude="路由名称1,路由名称2,....."

vue

props传值

//初始值为数组
    screenNum: {
      type: Array,
      default: () => [1, 0]
    }

鼠标划入划出

参考

 mouseenter、mouseleave、mouseover和mouseout
 //mouseenter、mouseleave,不会触发事件冒泡，推荐使用
 //mouseover、mouseout，会触发事件冒泡，不推荐

keep-alive

生命周期 activated、deactivated activated:每次进入页面都会从新执行

echarts

画面模糊

参考

var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5});

  function fontSize (res) {
    let docEl = document.documentElement,
      clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    return res * fontSize;
  }