- 博客(37)
- 收藏
- 关注
RSS订阅原创 自定义滚动条
::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，
2021-08-18 15:58:18
603
原创 css 实现绘制圆以及一个带圆弧的 需求 实现
// 想要得到一个圆,我们可以通过 border-radius 设置. 矩形的的长宽一样// 圆角半径恰好是 其长度的一半 div{ width:160px; height:160px; background-color: black; border-radius: 80px; }// 半圆->是绘制一个矩形，随意一侧的两个角圆角即可 .div{ width:160px; height:80px;
2021-03-17 16:26:40
993
原创 css 实现 各种三角形 实现思路与案例
绘制思路// 首先我们先绘制一个具有宽高的元素,如下图所示 .div { width: 200px; height: 200px; background-color: red; /*定义border*/ border: 50px solid black; } /*当我们有了border 外边框, MDN里面是这样定义border的,它是一个用于设置各种单独的边界属性的 '简写' 属性。也就是说可以单独设置 top, bottom, ri
2021-03-17 16:04:33
251
原创 element table row-style 实现列颜色区分 以及 js生成随机色，避免相近色
实现仓库看板需求遇到的问题table 显示的不同订单生产编码同时下线字体用不同颜色区分随机生成颜色,不能过于相似,避免灰颜与过暗步骤需要实现不同的订单号展示不同的颜色.之前有使用 “row-class-name” 方法进行class 的自定义.但此刻这个方法无法成功,因为你不清楚返回会有多少订单编码.没法写那么多class. 然后在文档找到了 row-styleelement文档row-style 的使用// 错误的写法rowStyle({ row, rowIndex}) { if
2020-08-13 16:20:21
1850
1
原创 详细的微信小程序学习笔记(从入门到项目)(3)
框架的选用因为个人已经习惯了Vue的开发模式,选用了wepy框架开发小程序,wepy是一款让小程序支持组件化开发的框架，类Vue开发风格.框架项目地址安装wepy脚手架工具(node等开发工具默认已经安装)npm install -g wepy-cli初始化项目// 默认生成带有组件其他模块的项目(redux)wepy init standard wepyshop // 默认生成空白项目wepy init empty wepyshop// 切换目录cd wepyshop/
2020-06-20 16:41:08
722
原创 记录大数据埋点遇到的XMLHttpRequest的坑
需求一个前后不分离的老项目,需要进行数据埋点.以为很简单.在浏览器打印出了$.ajax.,于是高高兴兴的用Ajax请求写完才发现了深坑.请求失败.才发现他们项目里面重新定义 ajax 请求 .与原本的请求格式都不一致.尝试1 参照他们的ajax 请求方式进行了编写,还是无效.然后想起他们的 请求并没有带域名请求应该是构建了公共的 url.如果还是使用他们的格式请求显然行不通.2 翻了下,发现可以使用 $.post 进行请求. 可惜报403.显示跨域.但其他系统都可以正常的跨域使用了. 此处也设置
2020-05-28 10:14:59
519
原创 vue $emit子组件传参，父组件接收参数的同时添加自定义参数
需求:远程搜索的select组件.结合table编辑功能.需要实现在父组件接收到定义的所有参数的同时接收 index 的 自定义索引参数没在官方文档看到类似的说明, 倒是在 GitHub 的问题里面找到了方法有兴趣的可以看看 : https://github.com/vuejs/vue/issues/5735解决:// 单个参数// 子组件this.$emit('refreshData', 1111')// 父组件@refreshData='refreshData($event, in
2020-05-28 09:31:03
1996
2
原创 git reset 的 使用(记一次解决远程代码回退)
问题和入代码出错,需要回退.平常也没学习这方面的东西.解决了记录一下git需要先理解三个概念: 工作区,暂存区,本地仓库.平常工作修改代码，提交时先使用git add提交至暂存区，再通过git commit提交至本地仓库，最后才能使用git push 至远程分支.git reset中有三个命令（--hard、--soft、 --mixed）git reset --soft xxx : ...
2020-04-23 15:40:33
3563
原创 Vue 中使用Viewer.js与 修改展示Viewer.js中图片title
npm下载npm install viewerjs引入import { mapGetters } from 'vuex';import Viewer from 'viewerjs';使用this.updateUserName = this.arrimg[this.carouselIndex].createUserName; this.updateTime =...
2020-04-13 09:28:36
3048
原创 封装获取url参数的公共函数
// 获取url参数 urlQuery() { const href = location.href; if (href.indexOf('?') > -1) { const a = href.split('?'); const b = a[1]; ...
2020-03-20 14:09:23
131
原创 Element,el-dialog弹出层拖拽及拉伸、双击全屏
需求业务要去可以 拖拽 dialog 框 与 拉伸 dialog,给的时间很短.在网上找了个.测试正常.原本代码地址import Vue from 'vue';/** 使用方法* 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。*...
2020-03-09 11:10:00
305
原创 element-UI 组件的change事件中传递自定义参数
需求写table 新增编辑 时, 在 select 选择器选中之后.需要获取当前行 去 进行校验方法<el-select v-model="scope.row.ynMain" @change="((val)=>{NumberChange(val, scope.row)})" placeholder="请选择是否默认"> <el-option...
2020-03-06 15:55:01
1522
原创 H5 video获取 第一帧作为 poster 属性
demo测试在菜鸟安卓测试正常.但是 ios 中的video 只有视频在播放的时候，才临时去加载视频。所以是空白的一个播放按钮.如果真的需要做.需要自定义video.H5 的 video 兼容实在麻烦…细节如果需要 获取第一帧设置进去: poster=“img_the_scream.jpg” 这个属性不能不设置也不能为空 设置为 poster="…" 都可以.为空会无法设置<...
2020-02-27 11:55:31
6942
3
原创 浏览器 cookie 无法设置的原因
场景: 使用 XMLHttpRequest 请求登录Bug: 浏览器无法自动添加 cookie, 同事手动设置进入之后,其他请求之后浏览器无法自动携带,导致接口出错解决: 帮忙查看之后,找了蛮久才在MDN发现原因:不同域下的XmlHttpRequest 响应，不论其Access-Control- header 设置什么值，都无法为它自身站点设置cookie值，除非它在请求之前将withC...
2020-02-25 10:16:32
2301
原创 ecahrt 的 Y轴 刻度 splitNumber 自动设置
Y轴 刻度的 设置 项目中不可能固定写死.max: 0, // 设置的最大值splitNumber: 10 , 均分的份数此时会有个bug : 比如 max 为 5027 , ecahrt 自动均分之后 会分为 5000, 4000 等.. Y轴刻度值会比最大值 小. 也就是说 Y轴的 最大值一定要比 显示的值大, 而且需要去自己设置均分.才能解决这个 bug 1 需要求 一...
2020-01-13 11:09:14
6395
原创 H5页面 video 兼容问题记录
1 苹果手机部分老机型无法去发送 xhr 请求. 查找之后.发现是 es6 兼容问题,目前部分老版本 无法识别 let 语法等2 苹果手机全屏之后,返回之后 设置的.object-fit: fill" 无法生效. 播放栏会悬浮, 视频就没法平铺.目前先不自定义视频样式.后续项目不着急再去完成.<video x5-video-player-type="h5" ...
2020-01-13 10:11:17
340
原创 Ie兼容问题记录
最近项目需要 IE 兼容,记一下 遇到的IE 的兼容问题1 flex 布局 的兼容写法.compatible(@params, @value) { -webkit-@{params}: @value; -moz-@{params}: @value; -ms-@{params}: @value; -o-@{params}: @value; ...
2020-01-13 10:03:17
193
原创 有趣的面试题 for循环
// var i = 0 开始前执行// i< 10 定义运行循环（代码块）的条件// 循环执行后执行for(var i= 0; i<10; i++) {}接下来看面试题for(i=0,j=0; i<10,j<6; i++,j++){ k = i + j;}console.log(k); // 10第六次：j=5,i=5,符合条件，k=...
2019-11-27 14:49:56
303
原创 时间默认七天并且判断时间段不能超出七天
getYear(date) { return date.getFullYear().toString(); },getMonth(date) { return this.formatDateNumber(date.getMonth() + 1);},getDay(date) { return this.formatDateNumber(date.g...
2019-11-05 15:59:11
2110
原创 Sass预处理器使用
sass预处理器因为浏览器中的css中不能编程 不存在变量 改变样式多的话需要手动更改会很繁琐 —所以需要css预处理器三种 预处理器 less sass 百分九十九的语法都差不多一样的sass预处理器文件后缀名 --- .scss 只是版本不一致而已执行过程1 编写符合sass语法的scss文件 1.1 建立一个后缀名 scss文件 ----sass完全兼容...
2019-05-14 11:33:18
903
原创 Vuex的基本原理与使用
VueX的使用学习参考文章添加链接描述参考文章添加链接描述我们需要知道 vue 是单向数据流的方式驱动的什么是vuex? 为什么要使用vuex ?- 多个视图依赖于同一状态。- 来自不同视图的行为需要变更同一状态。 vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...
2019-05-14 09:23:19
16914
原创 JS的运行机制整理
1 js引擎是单线程执行js代码，同步任务在栈中按顺序执行，如果某一个同步任务没有执行完毕，则后面的代码将会处于阻塞等待状态.2 栈中若执行遇到了异步任务（如定时器、异步Ajax、回调事件），会将此异步任务通过浏览器对应的工作线程来处理。3 工作线程中的所有异步任务均会按照设定的时间进行等待，时间一到或者达到触发条件则会被加入任务队列。如果是异步ajax,则等待其返回结果后在加入到任务队列...
2019-04-22 17:26:11
415
原创 整理MVC与MVVM的区别
在MVC中View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的...
2019-04-16 09:29:48
314
原创 css小demo(3) 点击按钮切换
效果:静态html:<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
2018-10-12 21:41:53
552
原创 css小demo(2) 电池效果
效果: 从思否 模仿的案例...
2018-10-12 21:33:23
2625
原创 Promise的理解与随手实例
我们 学习一个新的特性时,我习惯先了解他是什么, 有什么用在 w3c中 可知 Promise 是 抽象异步处理对象以及对其进行各种操作的组件 . 他 多用于 处理回调地狱 . 什么是回调地狱呢? 即 嵌套多个回调 如果 有多个回调互相嵌套 则 会难以调试与 理解 增大代码维护的难度与可读性使用 promise 就能解决这个问题 , promise 可以是一个占位符,表示异步操作的执行结果...
2018-09-29 13:54:31
194
原创 详细的微信小程序学习笔记(从入门到项目)(2)
前台后台的概念查看文档可以发现,小程序与web 的概念,有些出入, 小程序中打开微信就进入了小程序前台, 后台则是 用户点击右上角关闭, 或者按了设备Home键离开微信, 此时的小程序并不是直接销毁了,而是进入了后台.注意: 小程序的运行机制小程序是没有重启的概念的,当小程序进入后台,客户端会维持一段时间的运行状态, 超过一定的时间 ( 5分钟) 会被微信直接主动销毁生命周期了解了...
2018-09-22 21:14:45
2501
原创 详细的微信小程序学习笔记(从入门到项目)(1)
微信小程序(1)准备工作1 获取 AppID(小程序ID) 登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击开发设置 进行获取 AppID(小程序ID) 2 下载安装开发工具开发工具下载地址：https://developers.weixin.qq.c...
2018-09-21 20:44:58
25028
1
原创 正则表达式的总结使用
原理:正则表达式（regular expression）就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征 正则表达式是作为一个模版 , 将某个字符串 与搜索的 字符串进行匹配比如 表达式“ab+” 描述的特征是“一个 ‘a’ 和 任意个 ‘b’ ”，那么 ‘ab’, ‘abb’, ‘abbbbbbbbbb’ 都符合这个特征。用途:（1）验证字符串是否符合指定特...
2018-09-20 14:06:21
161
原创 css实例2
--dirname 是css中的声明变量 var(--n)是一个函数指的是读取变量让其动画的时间不一致则可以达到图片的效果.这是仿一个大佬的小案例//html代码 <div class="box"> <span></span> <span></span> <span&
2018-08-19 21:39:16
266
原创 仿有趣的css小demo
//html代码<body style="background-color: yellow"> <div class="box"> <span data-tetx="B">B</span> <span data-tetx="U">U<
2018-08-18 10:47:34
349
原创 一些常用的代码片段
// 拓展zepto-&gt; 给$对象添加自定义的属性或者方法 $.extend($, { /*获取url的数据片段*/ getURLValue: function (name) { var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)", &qu
2018-08-16 21:11:38
2013
原创 session cookie token 的区别 (如何使用token)
本地存储 1 sessionStorage 会话储存, 生命周期 浏览器一关闭 就不存在 2 localStorage 永久储存 除非手动删除 3 一些 api ——————— setItem(“key”,val) 设置值 , getItem(key) 获 取,...
2018-08-14 22:00:30
1225
原创 yarn与npm的详细解析与命令
swiper的使用Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端.1 加载插件 需要先引入 swiper.min.css 与 swiper.min.css 下载地址: https://www.swiper.com.cn/2 插件需要特定的HTMl结构3 引入HTML内容&amp;lt;div class=&quot;swiper-container...
2018-08-12 14:36:56
2435
原创 js数组方法常用方法
数组 JavaScript字符串常用方法数组所谓数组，就是一堆数据的集合（容器），里面存放各种各样的数据。 var arr = [‘a’,’b’,’c’];length属性可以用length属性取得数组(集合)的长度 var arr = [‘a’,’b’,’c’]; arr.length; // 3 返回3，说明数组有三个元素数组下标 数组中每个元素都有对...
2018-08-11 23:20:41
307
原创 H5C3中增大背景图片的点击区域
H5中的特性 background-origin 与 background-clip 最近做了小案例遇到了这两个属性,正好复习下background-origin: 表示的是图片从哪里开始显示 有三个值:padding-box ; border-box; content-box : background-clip : 表示 的是图片从哪里开始裁切 同上面一样也是有三个 值进...
2018-08-11 23:12:28
474
原创 盒子元素垂直居中的几种方式
垂直居中的四种实现方式使用margin 利用百分比进行垂直居中使用margin:auto 进行居中显示使用css3的transform属性进行垂直居中使用flex 布局进行垂直居中//先设置必要的样式 html 结构<div class="box"> <div class="box1"> 我是要被垂直居中的盒子...
2018-08-11 23:01:38
2333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人