- 博客(52)
- 收藏
- 关注
RSS订阅原创 日期计算
计算当前时间之后console.log(moment().format(“YYYY-MM-DD HH:mm:ss”)); //当前时间console.log(moment().add(10, “days”).format(“YYYY-MM-DD”)); //当前时间的后10天时间console.log(moment().add(1, “years”).format(“YYYY-MM-DD”)); //当前时间的后1年时间console.log(moment().add(3, “mo.
2021-03-02 14:25:19
176
转载 a标签携带参数跳转并在跳转页面接收参数
<!--点击图片跳转到b页面 并将参数id传到b页面--><a href="urlb?id=1"><img src="123.jpg"/></a> //在b页面接收a页面传过来的id值<script> var id= window.location.href.split("?")[1].split("=")[1];</script><!--encodeURI()传输中文，上个传输方式，接受到的会乱码，编译后再
2021-02-07 21:20:18
2333
原创 vue--一劳永逸的组件注册
通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。// g.
2021-01-28 14:54:49
196
原创 vue--自定义指令实现按钮权限
我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数；// array.jsexport function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let index = arr.indexOf(key) if .
2021-01-28 14:51:38
2799
原创 Vue常用的修饰符及使用的场景
vue中修饰符分为：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符1.表单修饰符这个修饰符主要是用在表单常用的v-model指令上，对表单的输入内容进行修饰，关于表单的修饰符有：lazylazy跟懒加载类似，在表单上是在我们填写信息的时候不会触发v-model值的变化，只有光标离开的时候才会赋值；也就是在input事件的oninput触发的时候不会赋值，当onchange触发时候进行赋值。<input type="text" v-model.lazy="val.
2021-01-09 14:56:28
2172
原创 JS 数组方法详细版
一、创建数组1.使用数组字面量表示法var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建一个包含1项数据为20的数组var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组2.使用 Array 构造函数无参构造：var arr1 = new Array(); //创建一个空数组带参构造：如果只传一个数值参数，则表示创建一个初始长度为指定数值的空数组var arr2 = new Ar
2021-01-07 15:27:14
167
原创 解决el-table排序图标不显示问题
场景想给这三个字段设置排序，但是并未显示，在询问中获得有价值的线索，排序图标折行掉下去了！修改css.crm-container{ .el-table th > .cell{ display: inline-flex!important; .caret-wrapper{ margin-top: 6px; } }}...
2020-12-21 10:50:20
1545
原创 JavaScript Console 对象
Console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是浏览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。Console 对象常见的两个用途：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。以 Chrome浏览器为例，我们可以通过按 F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）来打开 Console 窗..
2020-12-11 09:39:34
109
原创 Vue项目全局配置---errorHandler
在 main.js文件 配置 errorHandlerVue.config.errorHandler = function(err, vm, info) { console.log(`组件${vm.$vnode.tag}发生错误：${err.message},${info}`)} mounted() { b },参考文档
2020-12-10 17:03:53
4523
原创 H5C3--02章
写代码：第一步：我们要做什么事情第二步：这件事情应该在什么时候去做网络接口online：网络连通时触发offline：网络断开时触发全屏接口requestFullScreen： msRequestFullscreen(ie全屏)不同浏览器需要添加不同的前缀 * chrome:webkit firefox:moz ie:ms opera:o...
2020-12-05 02:30:53
224
原创 H5C3--01章
####什么是html51.H5并不是新的语言，而是html语言的第五次重大修改–版本2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.3.改变了用户与文档的交互方式：多媒体：video audio canvas4.增加了其它的新特性：语义特性，本地存储特性，网页多...
2020-12-05 02:29:11
221
原创 H5C3--04章
01-线性渐变background:linear-gradient(to top left,red 0%,red 30%,blue 50%,blue 100%);linear-gradient参数第一个参数：渐变的方向或者角度第二个参数第三个参数第四个参数…渐变的颜色值和渐变的百分比02-径向渐变background: radial-gradient(shape size...
2020-12-05 02:28:26
74
原创 H5C3--05章
动画的添加如何创建动画？@keyframes 动画的名字 { }花括号内部利用百分比的形式设置动画的状态动画的百分比是针对于动画的总耗时的如何使用动画？animation-name：值为动画的名字animation-duration：设置动画的总耗时animation-iteration-count：设置动画的播放次数，可以是一个具体数值，或者也可以设置infin...
2020-12-05 02:27:00
230
原创 H5C3--03章
01-认识css3什么是css3？CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷css3现状浏览器支持程度差，需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛如何对待css3兼容问题？渐进增强（Progressive Enhancement）：一开始就针对低版本...
2020-12-05 02:25:16
205
原创 vue--实现当前页面刷新
window.location.reload();this.$router.go(0) // vue的路由实现思路window.history.go(0)
2020-12-04 17:50:13
193
原创 非父子组件通信---bus总线
两种创建方式：1.全局定义，在main.js文件将bus挂载到vue.prototype上 import Vue from 'vue'; Vue.prototype.bus = new Vue();2.新建一个bus.js文件，作为中央总线，然后再组件引用时调用这个bus.js文件 import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; 用法：父组件：<template&..
2020-12-04 16:39:35
239
原创 监听浏览器窗口大小做一些事情
mounted() { window.onresize = function() { console.log('Still moving under gunfire…') } this.addBus() this.initCallCenter() },
2020-12-04 09:50:07
270
原创 实现计算中保留小数点并且四舍五入---toFixed
在项目中经常需要做一些计算，往往产品还有一些要求，要求精确小数点几位还要四射五入，那就这样：number.toFixed(n)// 残值率失去焦点 blurResidualRate(num){ num = Number(num) if(num && !isNaN(num)){ if(num >= 0 && num < 100){ let curstring = '' + num ..
2020-12-04 09:33:41
179
原创 vue的$nextTick做了什么
用法将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。<template> <div>{{message}}</div></template><script type="text/javascript">export default { data() { return { ..
2020-12-03 14:03:54
181
原创 解决element---el-dialog--关闭报错问题
他的意思是：避免直接改变属性，因为每当父组件重新渲染时，该值都将被覆盖。相反，请使用基于属性值的数据或计算属性。道具正在变异：“dialogVisible”原因：当我们把一个弹框封装成一个组件，引入到页面后，通过父组件传递状态控制弹框显示隐藏，而关闭弹框的动作是在子组件直接修改了父组件传递过来到状态，因为组件单向数据流的思想，所以是不允许这样做的。解决方法：可以提供一个 sync修饰符...
2020-11-29 03:00:46
2025
1
原创 监听键盘事件
在项目中有关于抽屉通过 esc键关闭的需求，element的Drawer控件 有自己的close-on-press-escape属性直接用，我的项目里的抽屉是自己封装的，所以需要一个监听按键的方法处理：mounted() { const _this = this document.onkeyup = function(e) { const e1 = e || event || window.event || arguments.callee.caller.arguments..
2020-11-27 10:53:58
225
原创 VUE内置组件---keep-alive
Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 keep-alive 内被切换，它的 activated 和 ..
2020-11-25 17:53:12
212
原创 keep-alive 实现 缓存动态组件 及include--exclude的用法
1.需求2.实现代码<el-tabs v-model="tabCurrentName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in tabnames" :key="'customer'+index" :label="item.label" :name="item.name"/></el-tabs><keep-alive exclude="C
2020-11-25 11:30:51
419
原创 vue 自定义指令 聚焦输入框 无效
vue文档案列directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}<input v-focus>一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：
2020-11-16 18:48:55
916
原创 element--Radio-group 不回显问题
<el-radio-group v-model="learnState"> <div v-for="item in radioList" :key="item.key" class="radio_css"> <el-radio :label="item.key">{{ item.value }}</el-radio> </div></el-radio-group>后端返回数据{“key”:0,“value”:“
2020-11-06 17:09:53
2642
1
原创 vue-自定义指令实现鼠标拖动
<template> <div id="app"> <div v-drag class="drag"></div> </div></template><script>export default { name: 'App', directives:{ drag(el,bindings){ el.onmousedown = function(e){ var d
2020-11-02 02:15:12
1058
1
原创 解决：‘vue-cli-service‘ 不是内部或外部命令
出现这个问题很多网友说是本地没有安装 vue-cli,本人装了后依然报错，最终解决方法是：删掉 node_modules，重新运行 npm install,就好了接着新的报错又来了Failed to resolve loader: vue-style-loader，解决方法： npm install sass-loader -D 和 npm install node-sass --save-dev...
2020-08-05 09:45:06
1119
原创 自定义给 element el-tree节点加icon图标
给 element树组件 el-tree自定义icon图标：可以通过插槽的方式：<el-tree :data="treeData" default-expand-all node-key="id" ref="tree" @node-click="nodeClick" :props="defaultProps" highlight-current :expand-on-click-node="false" style="he
2020-08-04 15:15:12
8226
1
原创 前端使用-qrcode-生成二维码
没有多余的前奏直接上代码：html：<div id="qrcode"></div>js： export default { data(){ return{ http: '', } }, created(){ this.http = 'https://h5.dingtalk.com/open-market/skuDetail.html?dd_share=f
2020-08-04 14:02:59
2153
原创 通过 a 标签下载文件
后台管理项目涉及到文件下载到本地，类型包括（图片，音频，视频，office文件等等），只需将后台接口提供的url给到 a 标签即可。<div class="preview-download" @click.stop="downLoad(item.oldUrl)"> <a :href="flag?downUrl: '##'">下载</a></div>亲测结果：绝大多数文件可以实现下载，MP3/MP4会直接打开预览播放，所以只能让其在预览窗口点..
2020-07-30 13:51:12
2914
原创 11.CSS3--布局样式相关
一.多列布局——Columns语法：columns：<column-width> || <column-count>多列布局columns属性参数主要就两个属性参数：列宽和列数。举例：要显示2栏显示，每栏宽度为200px，代码为：columns: 200px 2;到目前为止大部分主流浏览器都对其支持：不过还是需要添加各浏览器前缀-webkit，-moz，-o,-ms。示例：写一个三栏布局，每栏宽度为150px。<div class="columns
2020-07-30 13:37:10
118
原创 10.CSS3--变形与动画(2)
一.Keyframes介绍Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更
2020-07-29 10:32:33
148
原创 vue-管理系统-按钮权限的实现
之前做这个功能的时候，网上大多推荐使用vue的自定义指令实现，写的过程中bug不断，只能放弃选择一下方法：实现思路：按钮权限是通过不同用户角色 配置不同的操作按钮权限。当用户登录系统随之调用后台接口 获取按钮权限的code，然后存储起来：getbutton(){ this.$store.dispatch(this.ACTIONS.GETROLEBUTTON, {}).then(result => { window.sessionStorage.setItem("btnP.
2020-07-28 16:57:00
1601
1
原创 9.CSS3--变形与动画(1)
一.旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。HTML代码：<div class="wrapper"> <div></div></div>CSS代码：.wrapper { width: 200px; height: 200p
2020-07-28 16:33:05
133
原创 8.CSS3--选择器(3)
一.enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。演示：通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。<form action="#"> <div> <label for="name">T
2020-07-25 16:05:50
97
原创 7.CSS3--选择器(2)
一. first-of-type“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。<div class="wrapper"> <div>我是一个块元素，我是.wrapper的第一个子元素</div> &l
2020-07-24 17:22:25
153
原创 6.CSS3--选择器--结构性伪类选择器(1)
一.root:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。HTML代码：<div>:root选择器的演示</div>CSS代码：:root { background:orange;}演示结果：“:root”选择器等同于<html>元素，简单点说：:root{background:orange}html {backg
2020-07-24 16:51:00
134
原创 5.CSS3-- 选择器--属性选择器
一.属性选择器先回顾css2的属性选择器：属性选择器：下面的例子是把包含标题（title）的所有元素变为蓝色：<h1 title="Hello world">Hello world</h1><a title="runoob.com" href="//www.runoob.com/">runoob.com</a><style> [title] { color:blue; }</style>属性和值选
2020-07-24 15:20:19
122
原创 4.CSS3--背景相关样式
一.background-origin设置元素背景图片的原始起始位置。语法:background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。二. background-clip用来将背景图片做适当的裁剪以适应实际需要。语法：background
2020-07-24 11:07:43
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人