zhaoyizhu1990-优快云博客

转载一个数组元素删除后影响了另一个数组

当数组newArr删除第一个元素后，arr也发生了变化，原因就是两个数组来源于同一个对象的指针引用。我们可以通过以下两种方式消除同源影响:1. newArr=JSON.parse(JSON.stringify(this.arr));2. newArr= [...this.arr];...

2021-10-08 14:50:20 459

原创 css实现好看滚动条

Html<divclass="test test-1"><divclass="scrollbar"></div></div>Css.test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none;}.scrollbar{ wid...

2021-08-05 10:45:22 158

原创 css3+swiper实现平滑打字效果

html<p> <span class="ani" swiper-animate-effect="dayin" swiper-animate-duration="2s" swiper-animate-delay="0.5s" ><b>2020</b>年，对公司和个人而言都注定是值得铭记的一年。&l.

2021-02-04 14:11:41 327

原创 el-tree节点过滤问题，加载过滤出的父节点的所有子节点

优化filterNode方法就可以了//优化之后的代码不管有几级都可以适用filterNode(value,data,node) { if(!value){ return true; } let level = node.level; let _array = [];//这里使用数组存储只是为了存储值。 this.getReturnNode(node,_array,value); let result = false; _array.forEach((item

2020-12-16 10:29:29 1474 1

原创基于VUE的考勤日历（带图标）

1、在src文件夹下创建文件名为scheduleCalendar的文件夹，与page并列。2、scheduleCalendar文件里（1）、calendar.vue<template> <div class="schedule-calendar"> <header-bar :year="year" :month="month" ...

2020-07-06 14:07:43 4047 2

转载 pl-table，一个表格插件（完美解决万级数据渲染卡顿问题）

参考https://developer.aliyun.com/mirror/npm/package/pl-table

2020-04-23 09:56:35 15063

原创 vue项目，父组件每次点击按钮，重新加载子组件

vue项目，很多情况下会把公共组件提取出来，来减少代码量，提高开发效率，方便维护。很多情况下，父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性，来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点，如果我们这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行)，导致对应的数据也没有变化。...

2020-04-13 09:53:07 4021 2

转载 vue 实现跨行表格（数据接口获取）——转载

在线预览地址：https://run.iviewui.com/JsVaE8cl之前做的传统表格用到跨行，会在表格中再嵌套一个表格，代码很不美观，所以这次用vue做了单个table，实现了这个功能：标题独立，左右的tr分开。<template> <table cellspacing="0" border="1">...

2019-07-10 18:08:25 1398

原创 vue 动画（过渡）

Vue 提供了 transition 的封装组件，在条件渲染，展示，动态组件等情形中，可以给任何元素和组件添加进入/离开过渡。例子：（点击按钮，下面的字展示与消失）html<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transit...

2018-11-28 10:48:04 148

原创移动端四级地址选择组件开发

地址选择组件的开发，每一项都做好了注释，便于理解。组件在结构上分为两个部分，如图html<div class="address-dialog-con"> <!-- <span class="loading" v-if="loading"><i></i></span&g

2018-08-31 18:10:28 1827

原创 2018W31—Promise.all()

Promise.all可以将多个Promise实例包装成一个新的Promise实例。用法：const p = Promise.all([p1, p2, p3]);同时，成功和失败的返回值是不同的：（1）、成功的时候返回的是一个结果数组，只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函...

2018-08-04 21:19:59 525

原创 2018W30—$set()和Object.assign()

一、$set()在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的例如： <pre> 学生信息 name： {{student.name}} sex： {{student.sex}} age： {...

2018-07-27 18:09:35 478

原创 2018W29—async/promise

这周学习了promise中异常的捕获和阮一峰的ECMAScript 6入门的第18章《async 函数》。上周学习了promise，当遇到复杂的调用时promise看起来都是一堆then，语义不明。await相对于promise的优点是异步看起来更同步，代码简洁。async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到...

2018-07-25 14:50:24 150

原创 2018W28—Promise

这周看了阮一峰的ECMAScript 6入门的第14章《Promise对象》，同时也参考了廖雪峰官网的对于promise的讲解。Promise 是异步编程的一种解决方案，从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。它有三种状态，分别是pending（进行中）、fulfilled（已成功）、reject（已失败）。Promise构造函数接受一个函数作为参数，该函数的两个参...

2018-07-13 22:43:31 149

转载 URL字段解析

url: http://example.org:8888/foo/bar?q=baz#bang对应 JavaScript location 对象中的各个属性：href: http://example.org:8888/foo/bar?q=baz#bangprotocol: http:hostname: example.orghost: example.org:8888port: 8888pathn...

2018-07-12 10:28:57 1530

原创图片放大镜组件分析

网上图片放大镜组价开发示例代码很多，虽然方法大致相同，可是都没有很好的注释，由于我要做的页面用到了这个组件，我就把代码进行了梳理和分析，做了详尽的注释，并因情景做了相应的改动。首先要明白一些基础的概念，例如offsetTop，offsetWidth之类的定义，直接贴图：明白这些定义之后，就可以很好的分析下面的代码了，首先放大镜组件要四个小块组成：正常的小盒子，小盒子里的选中区域，大图片以及放大后的...

2018-07-03 15:08:52 1120

原创关于ie的兼容问题的总结，ie6的时代已经过去，但还是把ie6-ie9遇到的问题总结了一下

这是我近两年在开发过程中遇到的一些ie兼容问题的总结，都记录了下来，虽然现在页面只考虑ie9以后的版本了，但是以前的小技巧还是写下来吧，里面也有一些不是ie遇到的问题，只是问题很小，但是解决需要技巧的小知识点。1. 问题简述：块属性标签float后，横行margin双倍。影响版本：ie6 问题分析：块属性标签添加float后，又有横行的margin情况下，在ie6中显示的margin ...

2018-07-03 15:06:25 340

zhaoyizhu1990的博客

原创 js 一键复制功能