2020年07月_摇摇奶昔x

转载 js-数组/对象深度复制的方法

对象、数组，这类元素在电脑中其实是以指针形式（也就是一个地址）保存，所以浅复制（var a = {}; var b = a;）会使得修改 b 时 a 也随之改变（因为两者是引用同一个对象的地址）。所以复制时为了不修改原对象/数组，就需要深度复制。一般是向内递归到不再是数组对象再复制（因为字符串数字这类就是直接存储、没有深浅复制的区别）。记录一下自己的常用方法（格式是从vue项目里拿的，用的es6;es5就’let’换’var’）：//深度复制对象 cloneObj(obj) { let n

2020-07-23 14:34:16 211

原创前端实现点击下载图片

方法一:使用a标签的download属性。<a href="1.jpg" download="1.jpg">下载图片</a>注意：实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址方法二: vue中点击触发方法下载图片<img :src="codeImg" alt="二维码图片" style="width:60%;"><span @click="downloadCodeImg()"></span>

2020-07-21 10:46:17 7722 1

转载常用文件的mime和mimetype对应关系

mimetypes mimes“image/jpeg” “jpg”“image/jpeg” “jpeg”“image/png” “png”“image/webp” “webp”“application/vnd.ms-excel” “xls”“application/vnd.openx

2020-07-21 09:12:29 1069

原创定义vue 全局方法（单个或多个）

单个方法1.新建goBack.jsvar goBack = function() { xxx}export default goBack;2.main.js中引入并定义import goBack from '../static/js/goBack';Vue.prototype.$back = goBack; //用$与组件内自定义的函数区分，其他符号也可以3.组件中使用go: function() {　 this.$back(); }多个方法

2020-07-21 09:11:42 646 1

转载轮播图组件实现淘宝详情页商品效果

vue-agile 官网地址https://github.com/lukaszflorczak/vue-agiledemo源码编辑地址 https://codepen.io/collection/AdRzJW/官方事例中是下图在这里插入图片描述直接修改源码显然不合适而暴漏出来的属性设置也没有该模块的内容所以我在此通过修改样式的方法从右图变成左图首先说下大概思路：a:首先将缩略的轮播通过旋转放置到上图中的左图所示b:其次位置通过绝对定位固定设置c:整体旋转后会出现图片内容旋转的.

2020-07-20 10:38:54 1812

转载 vue滚动加载更多组件，适用于pc端和移动端，功能单一简单

vue滚动加载更多组件，适用于pc端和移动端，功能单一简单,只处理了滚动加载问题，其余loading等效果可自己在slot里面灵活配置<template> <div class="scroll-more"> <slot></slot> </div></template><script>export default { data() { return {}; }, methods:

2020-07-20 10:28:10 1491

原创最多显示三行，多余...展开V，点击展开收起 getClientRects

效果：需要考虑的点：换行，展开的时遮住收起1.不需要有固定在右侧的展开收起按钮，那么移动端直接用css3 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical2.需要展开收起按钮，之前想过用屏幕宽度减去两边留白除以字体大小，得出每一行可以显示多少行字。function getStrByteLen(v)

2020-07-20 10:22:24 1301

原创 css文字上下居中，一行文字居中，多行文字同样居中

1. 利用Flex布局实现（单行或多行） .demo { width: 120px; height: 200px; border: 1px solid red; /*line-height: 25px;*/ font-size: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column;} <div class

2020-07-20 09:39:39 1863 1

weixin_42508745的博客