- 博客(39)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 vue-awesome-swiper最新版轮播图实战demo及参数详解
vue-awesome-swiper是vue项目插件之一，用于开发轮播功能。它基于swiper轮播插件，由大牛开发而出，奉上源仓库：https://github.com/surmon-china/vue-awesome-swiper一、安装可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装：npm install swiper vue-awesome-swipercnpm inatall swiper vue-awesome-swiper二、引入
2022-04-13 17:04:22
2083
转载 html5 postMessage解决跨域、跨窗口消息传递
一些麻烦事儿平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。postMessage(data
2021-11-30 13:59:52
249
转载 Vue.extend、Vue.component与new Vue
vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：关系：vue构造->vue组件->vue实例也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：<script> //vue构造 Vue.extend({ props: [], data: function() { ret.
2021-11-28 22:37:10
385
原创 js中map()、some()、every()、filter()的区别
js的Array对象有map、some、every、filter几个方法都能对数组中的每个对象进行处理，但是他们之间的功能又各有差别，所以在记下。map()：通过指定函数处理数组的每个元素，并返回处理后的数组。 var numbers = [4, 9, 16, 25]; function myFunction() { console.log(numbers.map(Math.sqrt));}输出结果为：2,3,4,5map() 方法会将数组中元素依次传入方法中，并将方法的
2021-08-30 09:50:45
112
原创 Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
<el-button @click="handlerExportData">导出</el-button> // 导出 handlerExportData(){ getReportAllData({queryDate:this.time}).then(res=>{ this.$Utils.exportExcel(res) }) }, /** * 导出excel文档 */ exportExce
2021-07-19 10:34:57
414
转载 没有管理员权限，如何解决npm install命令安装依赖问题
没有管理员权限，如何解决npm install命令安装依赖问题情景(situation):我们大部分人在做开发的工作时，使用的是公司的电脑。而众所周知，公司为了安全考虑，都会在我们的电脑上安装各种各样的安全软件；限制我们的网络，禁用我们的电脑本机管理员权限，使得我们在拿到电脑的时候，安装软件什么的都非常的不方便。今天我遇到的问题，就是因为公司控制了我电脑的本机管理员权限导致的。因为上周休假一周，所以不在公司，我们组的前端同事，优化了项目中使用的webpack。我休假回来之后，开始做自己的工作，写完后端
2021-06-18 17:54:14
734
原创 内置对象API
Date获取日期语法：①定义date对象：let date = new Date()②利用date对象调用对应API：date.getDate()案例：Date自定义时间方案：1：new Date (年，月，日，时，分，秒);这种方式月份+1才等于实际月份方案2：采用一个参数：new Date(‘1997-4-12 15:16:17’);这种方式月份等于实际月份Array关于数组的操作.concat() 将两个数组拼接成一个,不会修改原数组.join() 数组转字符串,不会修改原
2021-06-09 22:46:51
106
原创 git公钥
为什么要配置公钥和私钥：Git使用https协议，每次pull, push都要输入密码，相当的烦。 使用git协议，然后使用ssh密钥。这样可以省去每次都输密码。公钥我们一般是给服务器的,他们到时候在权限中加入我给的公钥,然后当我从远地仓库中下载项目的时候,我在git clone xxx的时候，那个服务器我通过他的绑定的公钥来匹配我的私钥，这个时候,如果匹配,则就可以正常下载,如果不匹配,则失败.大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。系统中的每个用户都必须提供一个公钥用于授权，
2021-06-09 22:32:41
216
原创 小程序请求封装
//http.jsconst baseUrl=''function get(url,data){ return new Promise((reslove,reject)=>{ uni.request({ url:baseUrl+url, data, success: (res)=>{ reslove(res) }, fail(err){ reject(err) }
2021-06-09 22:15:46
62
转载 el-upload自定义http-request 上传方法踩坑
el-upload自定义上传的坑:http-request 指令的使用使用该指令， :on-success, :on-error 指令是不会触发的<el-form-item label="logo" prop="logo"> <el-upload class="upload-demo" ref="upload" action="string" accept="image/jpeg,imag
2021-06-07 16:20:37
7715
1
原创 el-date-picker设置时间不可修改，只能点击
<el-date-picker ref="article_time" @click.native="handle_setTime" popper-class="article_time" v-model="form.autoOnShelfDate" value-format="yyyy-MM-dd HH" type="datetime" placeholder="
2021-05-31 14:54:04
1449
转载 element表格行列拖拽
element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现，先来看一下动态图，效果是不是你们想要的。首先需要安装Sortable.jsnpm install sortablejs --save然后引用import Sortable from ‘sortablejs’需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。示例代码 <el-table :data="tabl
2021-05-26 13:33:07
213
转载 JS常用的循环遍历
前言数组和对象作为一个最基础数据结构，在各种编程语言中都充当着至关重要的角色，你很难想象没有数组和对象的编程语言会是什么模样，特别是 JS ，弱类型语言，非常灵活。本文带你了解常用数组遍历、对象遍历的使用对比以及注意事项。1.数组遍历随着 JS 的不断发展，截至 ES7 规范已经有十多种遍历方法。下面按照功能类似的方法为一组，来介绍数组的常用遍历方法。for、forEach、for …ofconst list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];for
2021-05-26 09:58:19
143
原创 正则：验证用户的输入数据
验证：test()// 规则.test(需要验证的字符)// 例子： if (/^1\d{4}$|^1[35789]\d{9}$/.test(this.user.username) &&/^.{3,16}$/.test(this.user.password)) { }5位或者11位的手机号：/^1\d{4}$|^1[35789]\d{9}$/ 结束边界解释：/^：开始$/：结束边界1\d{4}：第一个字符是1，重复写4个数字，$：结束^：开始1[35789]：1
2021-05-05 23:16:43
292
转载 实现深拷贝的多种方式
来源 | http://www.fly63.com/article/detial/9650简单来说，深拷贝主要是将另一个对象的属性值拷贝过来之后，另一个对象的属性值并不受到影响，因为此时它自己在堆中开辟了自己的内存区域，不受外界干扰。浅拷贝主要拷贝的是对象的引用值，当改变对象的值，另一个对象的值也会发生变化。1.简单深拷贝(一层浅拷贝)①for循环拷贝// 只复制第一层的浅拷贝function simpleCopy(obj1) { var obj2 = Array.isArray(obj1
2021-05-05 22:47:35
116
原创 伪类不选第一个css
/deep/ .nuxt-link-exact-active,.nuxt-link-active:not(:first-child){ background:#409eff; color:#fff!important; }
2021-05-05 22:37:58
198
转载 vue中mixins的使用方法和注意点（详2）(异步请求的情况)
当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下：mixin中组件中控制台解决方案：不要返回结果而是直接返回异步函数mixin中组件中控制台...
2021-04-30 09:34:45
120
转载 vue中mixins的使用方法和注意点（详）
mixins基础概况vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。怎么用？举个栗子：定义一个混入对象把混入对象混入到当前的组件中用法似不似相当简单呀mixins的特点1 方法和参数在各组件中不共享混合对象中的参数num组件1中的参数num进行+1的操作组件2中的参数num未进行操作.
2021-04-30 09:32:43
127
转载 前后端分离产生的跨域问题的解决方案之--jsonp、nginx代理、设置头信息等
前言在前后端没有分离的时候，前端开发要么是写静态页面，数据渲染后端来做，要么就是前端的页面和后端的代码刚开始的时候就合并在一起，每次后端代码更新了之后，前端也要更新一下代码，然后重启一下服务，还是比较麻烦的，而且前端要一直依赖于后端来开发。但前后端分离之后就不一样了，前端有更大的自由发挥性，现在应该绝大部分的公司都已经采取这种开发模式了。前后端分离开发之后前后端只要定好接口文档，然后就根据文档各自开始开发了，在接口没好之前前端也可以使用模拟数据的插件来做接口数据模拟返回，等到后端接口写好之后再进行联调就
2021-04-30 09:23:42
133
原创 小程序客服功能
文档：1.代码添加 <button open-type="contact" bindcontact="handleContact" style="background-color:#16c510">点我连接客服</button>2.登录公司的账号添加客服成员：添加链接描述
2021-04-28 19:53:46
180
原创 el-date-picker饿了么时间组件限制三个月
<el-date-picker v-model="time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptions" /> data() { return { // 禁用的时间 pickerOptions: { ..
2021-04-27 19:30:10
1304
原创 Vue+Element UI 向Table组建中的每一行添加一个switch组件，实现每一行单独控制及其踩坑
<el-table :border="true" :data="tableData" style="width: 500px;margin:0 auto;"> <el-table-column label="视频开关"> <template slot-scope="scope"> <el-switch active-text=..
2021-04-21 23:14:21
760
转载 百度编辑器Ueditor:报错`UE.getEditor is not a function`和`editor.all.js找不到`
UE.getEditor is not a function和editor.all.js找不到有看这篇文章说安装grunt，然后执行grunt default但是我这边跑完grunt default弹出然后安装了JDK接着重跑然后又出来下面截图问题：Warning: Error: Unable to access jarfile undefined Use --force to continue.Aborted due to warnings.总觉得不太对，然后继续百度，找到了解决办.
2021-04-19 14:34:02
1423
3
转载 vue 项目中使用video实现视频播放效果暂停播放
<video :src="video_url" controls="controls" style="width:100%;height:100%;" ref="vueMiniPlayer"></video>再给this.video_url='http://47.105.206.28/videos/wangkun.mp4'判断是否暂停状态返回true falsethis.$refs.vueMiniPlayer.pause();//暂停this.$refs.vueMi.
2021-04-11 20:49:47
2295
转载 最新数组方法（包括es6）
最新数组方法（包括es6）整理目前所用过的数组方法，学习了新增的es6方法。1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5c
2021-04-06 20:26:52
98
原创 element ui 中 table 排序 sortable失效问题
sortable效果：（不生效）<el-table-column label="位置" sortable align="center" width="180"> <template slot-scope="scope"> <span style="margin-left: 10px">首页顶部banner{{ scope.row.priority }}号位</span> </templa
2021-04-02 09:26:24
897
原创 使用vue-quill-editor编辑器--自定义上传图片-图片拖拽-鼠标悬停提示
quill的官网在vue里面使用quill的扩展模块vue-quill-editor效果图：实现：1.鼠标悬停时的提示，2.因为编辑器默认图片是base64格式，所以需要自定义上传图片到服务器，通过服务器给的ID返回给后端，后端再给出URL然后前端插入在编辑器中3.图片的拖拽和缩放1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill（Vue-Quill-Editor需要依赖）npm install quill
2021-03-31 19:13:24
945
2
原创 vue-quill-editor的样式问题
编辑好文章之后再展示出来发现之前编辑的样式并没有生效，这个时候需要在渲染内容的盒子里面添加类名才会生效<div class="ql-container ql-snow"> <div class="ql-editor" v-html="list.content"></div>而且需要保证有引入css的样式在main.js或者是在其他组件js中然后引到main.js或者在页面里引入import 'quill/dist/quill.snow.css'
2021-03-31 18:36:42
432
转载 实现给后端返回的数据排序
var data = { "rows": [{ "name": "张三", "time": "2011/4/1 0:00:00", },{ "name": "李四", "time": "2015/5/6 12:30:00", },{ "name": "王五", "time": "2012/10/1 22:10:00", },{ "name": "赵六", .
2021-03-23 15:18:10
1203
转载 v-loading.fullscreen.lock
解意fullscreen：全屏lock：锁定实现效果当加载时全屏幕锁定，不可触发任何事件、即使在有滚动条的情况下滚动事件同样禁止
2021-03-21 23:04:58
2640
转载 vue中引入.svg图标，使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用，官方介绍创建SvgIcon组件–components =>SvgIcon=>index.vue<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></t
2021-03-21 10:57:58
380
原创 滚动条不显示但是可以滚动
<style lang='scss' scoped>//新建弹窗尺寸.el-drawer__wrapper ::v-deep.demo-drawer{ width: calc(100vw - 211px)!important; overflow: scroll ;}::v-deep .dialogPreMockVisible .el-dialog__body .container::-webkit-scrollbar {display:none}<style>...
2021-03-19 15:54:43
236
原创 vue-elementUI的select下拉多选组件实现：可搜索+弹窗显示全部功能
多选点击数字弹窗<template> <div class="box"> <span v-if="value.length>0" class="heiz" @click="dialogVisible=true"></span> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
2021-03-17 23:04:28
2062
转载 如何在vue中使用sass
创建一个基于 webpack 模板的新项目全局安装 vue-cli$ npm install --global vue-cli创建一个基于 webpack 模板的新项目$ vue init webpack my-project安装依赖$ cd my-project$ npm install为了使用sass，我们需要安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm
2021-03-14 12:11:57
646
转载 启动vue的脚手架创建的项目时报错Unsupported URL Type “npm:“: npm:vue-loader@^16.0.0-beta.7的随手笔记
启动vue的脚手架创建的项目时，报以下错误：报错的原因是正在使用的node的版本过低，可以使用nvm对将node的版本升高，如：（1）先去下载一个nvm进行安装，执行命令nvm list 查看你当前正在使用的node版本。（2）执行命令nvm list 查看可下载的node版本，这是node的部分可下载版本，可去node的官网选择其他版本进行下载。（3）选择一个高一点的版本，执行命令nvm install 14.9.0进行下载，可执行nvm uninstall 版本号 卸载对应的版本。（4
2021-03-10 19:06:04
1789
原创 git修改某条commit
git log 找到commit的哈希值,按q结束git rebase -i <简短commitID>进入到vim编辑 按i进去编辑修改将想要修改的提交前的pick改为reword，如果需要修改多个，也可以将对应的多个pick改为reword按ESC键 再按 shift : (小写)wq 然后输入wq（w是保存，q是退出） 按回车键这个时候就可以修改了，在头部黄色字体里修改成你要修改的内容修改完了退出保存 按esc退出编辑 :wq保
2020-11-11 13:15:56
251
原创 Nuxt引入vue-persistedstate以及踩坑
前言项目需求，需要vuex进行路由持久化保存，结合nuxt框架进行记录。思路监听数据变化, 每当登录完毕,vuex 数据发生变化,就要将数据保存到浏览器 本地 (指用户浏览器localStorage)页面打开时, 会尝试将之前保存过的数据恢复到 vuex 当中即可有点复杂, 找个插件帮忙实现缓存信息到本地nuxtjs中store不能直接使用浏览器的lcoalStorage方法，而且自己写数据同步功能比较麻烦,所以我们需要依赖一个插件vuex-persistedstate，该插件会把本地存
2020-11-07 22:42:55
1468
5
原创 如何在vant中的tab中添加“+“用来增减栏目
在使用vant时，有时候我们需要设置tab栏目，我们会选择使用vant中的tab标签页像是这样：首先：给栏目设置一个padding值，腾出一个位置给‘+’/deep/.van-sticky{ padding-right: 50px;}变成这样然后给这个容器加一个伪元素，因为这个tab栏是引入vant组件操作的，不好改结构，只能从它的样式下手/deep/.van-sticky{ padding-right: 50px; &::after{
2020-10-30 10:23:01
653
原创 关于启动Typescript-Node-Koa2服务器出错的问题
第一次用这个???? 以前都是MySQL步骤：1.在Typescript-Node-Koa2目录下按住shift右键打开powershell窗口2.然后根据package.json下scripts的配置跑npm run dev "scripts": { "watch-ts": "tsc -w", "watch-node": "nodemon dist/server.js", "build-ts": "tsc", "start": "npm run bu
2020-10-20 15:49:09
288
一个闲云旅游网的api
2020-11-07
黑马头条前台API 接口文档
2020-10-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人