- 博客(100)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 如何对比两个数组中相同的元素 js对比数组 map遍历数组
项目场景在后台管理系统中通常会使用字典项，便于管理通用选项，比如男女下拉列表，比如菜单状态等。所以有一个场景就是，后台返回数字，需要将数字转换为文字，而且需要跟字典选项对比，才能获取实时更新后的数据。data(){ return{ arr1: [ { sex: '0', index: 123544 }, { sex: '1', index: 123586
2020-06-09 15:29:27
3317
2
原创 element 级联选择获取label 同时获取value和label element 级联选择回显
前情提要在elementUI的Cascader级联选择组件中，获取value大家应该都懂，一般我们会将value设置为id ;<el-cascader size="small" :options="listAll" placeholder="请选择或输入" filterable ref="cascaderAddr" :props="{value: 'id'
2020-06-05 14:25:30
2193
原创 小程序内部一键关注关联公众号 如何实现小程序无跳转关注公众号
上效果实现前提打开微信公众平台----->设置 ---------> 打开公众号关注组件注：设置的公众号需与小程序主体一致。具体实现//wxml<official-account bindload='loadSuccess'></official-account>//js /** 关注公众号组件 */ loadSuccess(e){ console.log("关注公众号组件加载成功") },official-account 为公
2020-05-28 17:58:03
5582
11
原创 小程序实现圆点边框 解决 dotted不兼容 小程序圆点边框兼容问题 如何在小程序实现兼容的圆点边框
先上效果图由于业务需要，需要做一排圆点，实现方法有很多，在此记录一下另一种实现方式。最终效果：效果前提由于仅仅做小程序，而且使用了weUI样式，其中有一个徽章badge，突然奇想用徽章badge做一排圆点，在badge wxss中修改你需要的背景色，字体颜色同背景色即可。 <mp-badge content="8" style="margin-left: 10px;"/> <mp-badge content="8" style="margin-left: 10px;
2020-05-28 16:56:15
1115
1
原创 微信小程序清除输入框内容组件 清空Input weui中一键清除input内容
前提首先，我是在引用weUI扩展组件情况下，自己做了适当修改，即可全局引用Input, 使用清空输入内容功能。components为weui组件，本身weui是没有input组件的，我自己添加了一个Input-clear组件。使用方法第一步：引入weUI组件，方法很多，我是直接引入了weUI的components文件夹，也可用其他方法引入，详见微信公众平台文档说明第二步： 在app.wxss页面引入weui.wxss第三步： 在需要使用weUI组件的页面的json文件中添加你需要的组件，一定要
2020-05-26 18:40:38
6119
2
原创 关于js中return的用法 return和return false的区别
定义和用法return 语句会终止函数的执行并返回函数的值。这是官方给的定义，但是关于return和return false到底有什么区别，什么时候用return什么时候用return false呢？（最后有彩蛋哦_）关于return和return false区别下面上大白话O(∩_∩)O哈哈~1、当执行一个function，需要返回一个值，就直接return 值；function myFunction() { return Math.PI;}2、当你只是需要判断在某种条件下不
2020-05-20 17:46:30
3946
原创 微信小程序顶部滚动通知 仿支付宝顶部通知 小程序滚动文字
先呈上效果图主要代码//wxml部分<view class="scroll-top" hidden="{{isHiddenMsg}}"> <scroll-view> <view class="msg-icon notice-icon"> <image src="../../../static/images/show-info...
2020-05-06 11:46:55
2255
2
转载 限制input输入框保留2位小数 清除input框type=number右边的图标
转载记录限制input输入框只能输入正数和小数//输入正数和小数(保留两位)<input type="number" step="0.01" min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">//去掉...
2020-04-14 13:25:24
779
原创 vue 四级联动 地址联动 vue级联选择
vue 四级联动效果实现前提首先看下，我们的开发环境及数据封装特点：第一： 开发框架vue-cli3 elementUI第二： 数据封装情况，详见代码部分 data中的 data;满足以上2点再继续，如果数据封装有所不同，可根据实际情况稍作修改。实现过程此处主要采用vue计算属性以及watch监听输入框变化，展示不同的数据。只需加载时一次请求即可。仅个人想法，如有更好的方法，欢...
2020-04-08 11:34:54
2904
8
原创 element表单校验问题 表单清除某个校验 表单图片校验问题
问题描述首先我使用的是vue-cli ＋element Ui ,就是在表单中有上传图片环节，由于我们这边是先上传图片，提交表单的时候单独传imageUrl即可，官方表格演示中并没有表单校验图片流程，然后按照表单校验一般规则填写，无论是否上传图片，都有提示：图片不能为空，但是如果上传了图片，虽然有提示，但是也能提交成功，但是，这样对用户太不友好。如何修改下面是我的form表单中截取了图片上传一...
2020-04-01 14:10:28
2020
原创 小程序如何引入weui样式 小程序如何使用weUI样式插件 weUI如何使用
weUI在微信小程序中的引用小程序如果想引入weUI，需要以下几步，本文章主要介绍通过页面按需加载引入模式：第一：下载weUI，三种方式一、可以通过npm方式下载构建，npm包名为 weui-miniprogramnpm install weui-miniprogram二、去github下载https://github.com/Tencent/weui-wxss三、可以通过页面按需...
2020-02-28 13:12:24
2798
原创 小程序多状态class 动态控制多个class 动态添加删除class
我们在小程序页面制作时通常会遇到不同状态展示不同的样式或者内容，当然如果只有2种情况最好办，直接三元运算符和 逻辑或都可以解决，但是如果是三种状态四种状态呢？遇到这种情况我是这么处理的（根据条件判断采用wx:if else），下面的小栗子是展示的4种状态。如果你有更好的方法，欢迎交流！<view class="invoice-item-flex" id='invoice-item-stat...
2020-02-28 11:34:01
2252
2
原创 超好用的js 日历插件 日期插件 日期日历选择控件
前情提要：主要是目前项目较小，仅需要一个日历插件，就没有选择引用UI框架，单纯找了一个日历插件，外观相对简单大方，还不错，而且只需要2步就可以完成引入：第一步（有2种方式引入，支持单独引入文件及npm引入）：1、官网下载压缩包文件打开官网： layDate日期插件官网网址2、第二种方式npm安装：npm install layui-laydate第二步：获得 layDate 文...
2020-01-15 18:26:27
1844
原创 wangeditor 在vue项目中的安装方法 wangeditor安装和使用
以下是基于vue-cli3项目关于wangeditor编辑器的使用，只许简单3步即可使用：第一步：npm install wangeditor第二步：import E from 'wangeditor'第三步：mounted(){ let editor = new E('#div1'); editor.create(); },当当当当……如有疑问，欢迎交...
2019-12-31 18:44:56
1978
原创 vue全家桶都包括哪些 vue全家桶都有什么 vue全家桶详细介绍
vue全家桶都有什么全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。注：此文章主要讲解vue-cli脚手架开发方式，不介绍各插件的具体使用方式，具体使用方式详见其他详细介绍文章。一、vue-clivue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具！相比scirpt标签引入，脚手架具有如下特点：1）、功能丰富对 Babel、TypeScr...
2019-10-24 10:48:55
26059
原创 swiper视频轮播 swiper4无缝轮播视频特效 swiper4无限轮播视频特效
swiper视频轮播首先看效果图（快速播放了），主要功能包括左右按钮，1、上一个和下一个视频缩小比例并添加蒙层。2、可以按钮切换，点点切换，手滑动切换。3、点击视频播放，切换视频，停止播放。完整代码完整代码见github ，如果是符合你想要的，欢迎点赞❤...
2019-10-14 17:18:14
2883
1
原创 animate调整动画持续时间 修改动画持续时间 修改动画延迟时间
如何使用animate.css 修改动画持续时间真的是炒鸡简单一句话搞定！！在你的class名中添加 animation-duration: 1.5s;.your-classname { animation-duration: 1.8s; //动画持续时间完成 animation-delay: 2s; //动画延迟多久才开始 animation-iteration-count...
2019-10-09 18:15:07
4579
1
原创 css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图，主要是针对图片跑马灯效果（请忽略我的快速播放和录屏图标）具体实现方式目前我需要展示6张图片，但是为了实现无缝衔接，我的列表放了12张（放2遍图片），这样就不至于在切换时出现那么几毫秒的跳动。<div id="swiper-roll-wrapper"> <div id="swiper-roll"> <d...
2019-10-09 18:07:19
5868
1
原创 animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍
简介众所周知，animate.css是非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画，但是不兼容IE8及以下版本，就算用jq控制，性能也不是很好。wowjs向下滚动页面时显示CSS动画。默认情况下，您可以使用它来触发animate.css动画。但您可以轻松地将设置更改为您喜欢的动画库。wowjs好处：比其他JavaScript视差插件更小，比如Scrollorama（它们做...
2019-09-10 14:25:43
1649
6
原创 missing semicolon报错问题解决
missing semicolon报错主要是因为eslint检测出现错误，一般是看下提示行是否写分号，添加上就没问题了
2019-09-02 15:51:34
26225
1
原创 express router和vue router的区别
express router和vue router的区别express routerexpress router路由指应用程序的端点（URI）如何响应客户端请求，是属于客户端路由，简单点来说就是常说的接口。vue routervue router 属于前端路由模块，主要用于响应加载页面内不同模块。相对应URL地址变化；注：具体每个路由使用方法，后续补充！...
2019-09-02 14:44:03
1520
原创 如何使用NodeJs搭建静态服务器 node服务器搭建
首先确保你现在已经安装了node环境检测方法：命令行输入npm -v如上图所示，表示已经安装咯！搭建静态服务器//首先引入以下四个模块：const http = require('http'); //http 请求模块 const fs = require('fs'); //文件访问模块const url = require('url'); //url地址模块const p...
2019-08-30 11:57:33
399
原创 nodeJS你真的了解吗，nodeJS适合哪些人学习，nodeJs入门介绍
什么是Node有人说NodeJs是非同寻常的JavaScript,当然简单的说NodeJs就是运行在服务端的 JavaScript。Node.js是以Google V8 JavaScript引擎为基础的服务器端技术。它具有很好的可扩展性，并使用了异步事件驱动IO，而没有使用线程或者独立进程。它能很好地满足那些需要频繁访问但是计算简单的网络应用的需求。Node是由很多传统Web开发人员都熟悉的...
2019-08-30 11:01:00
588
原创 es6扩展运算符的含义及应用 es6 ... es6语法...含义 es6三个点
含义扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <...
2019-08-19 15:46:24
653
原创 Class 的继承 extend继承 es6继承基本用法
Class继承基本用法Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。class Point {}class ColorPoint extends Point {}上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于...
2019-08-13 11:17:24
1958
原创 class 类的基本用法 class类语法 class es6语法 class构造函数
class类的由来JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var...
2019-08-13 10:51:13
448
原创 vue模板数据不随着改变及转义html语法
模板数据不随着改变获取到的数据不随着数据改变而改变data () {retrun{msg: ‘hahha’}} //此时msg会随着输入框内容而变化{ { *msg } } //此时msg不会随着输入框内容而变化，依然是hahha{ { {msg} } } //此时msg可以解析html语法，比如输入框输入hahha aaa ...
2019-08-08 13:04:27
467
原创 小程序二级页面分享 小程序分享先跳转至首页再跳转至详情页 小程序分享空白页问题
业务需求场景分析 小程序分享二级页面时， 1、先进入首页再跳转至二级页面； 2、对于还没有经过微信授权的新用户，先经过授权，再跳转至首页、然后跳转至目标页面实现过程分析 **不想看我啰嗦可以跳过，直接看代码！^_^** 由于直接分享二级页面没有返回按钮，借鉴其他网站，先跳转一级页面，再跳转至目标页面，在此项目中，我们是跳转至首页，点击返回，用户可以看到所有TAB页面。 首先，在...
2019-08-08 13:04:19
1413
原创 vue 检测路由变化 动态监听路由变化 路由监听事件
Vue中 想在路由变化的时候插入事件，需要使用到 vueRouter动态路由匹配中的响应路由参数的变化方法，提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch ...
2019-08-08 10:16:32
2587
原创 es6从入门到精通 ES6新特性 es6精讲 必须掌握的es6实用特性
ES6最新语法let const 命令，跟var的区别变量解构赋值新增字符串方法模板字符串symbol类型proxy代理set方法let const 命令，跟var的区别1、var 的作用域是分全局和函数作用域两种，也叫全局变量和局部变量；2、let 和const作用域都是块级作用域，简单说就是仅在大括号内有效；3、const 就是constant 的缩写，代表恒定的值，指常量，一般不...
2019-07-25 14:44:15
825
原创 vue 动态绑定href a href动态改变 vue href改变 vue 修改href
如何在vue项目中动态改变href问题： 由于将所有api都放在一个js中，对于下载或者有外链时需要使用a标签，那么就需要引用js文件，但是发现a标签不能直接引用外部js的参数；解决办法： 使用计算属性computed来获取；<a :href= 'downloadExcelUrl' download="">下载模板</a>//引入的外部jsconst ...
2019-07-19 15:18:29
6535
原创 vue f5刷新路由 iview中菜单刷新不变 刷新页面菜单高亮不变 vue刷新store数据丢失 IOS刷新store丢失
遇到的问题在后台管理系统中，菜单是基本的组成部分，ui框架也很多，看起来也都很完美，但是，第一：刷新后菜单恢复到初始的样子；第二：刷新后store数据消失，页面无法加载解决思路通过多种尝试，最终我选择了利用事件监听，增加缓存来实现，目前视觉效果还是可以的；第一：菜单问题解决1、可以在生命周期created中通过监听beforeunload事件，2、将当前打开的一级和二级菜单保存一...
2019-07-17 17:20:23
1274
原创 ckeditor5 图片不能编辑 图片不失去焦点 ckeditor5图片bug ckeditor5遇到的坑 ckeditor列表不管用
遇到的问题首先声明一下，我面临的问题，以及我所处的环境：当前项目是后台管理系统项目，主要用的是vue、iview、ckeditor5等。新建demo中ckeditor5运行完好，功能都很棒，可是！搬到项目中，竟然出现很多bug，主要问题有以下几个：1、上传图片问题：图片上传后不会出现编辑图片的按钮，一直处于聚焦状态；2、第一个问题解决后，又发现……，图片可编辑了，但是！！！如果当前编辑器...
2019-07-09 17:14:20
1418
12
原创 vue swiper中点击预览图片 全屏预览图片 vue点击查看大图
希望实现的效果，见下图图片太小，拍的不好，横着拍的，凑合看_使用到的插件 使用到的插件 vue-photo-preview 第一步：安装插件 npm install vue-photo-preview --save 第二步：引用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist...
2019-07-05 18:02:10
5174
5
原创 ckeditor5上传配置 ckeditor5图片上传功能 富文本编辑器图片上传功能
ckeditor5的上传图片的方式（文档编辑器） 将图像插入使用CKEditor 5创建的内容是一项非常常见的任务。在正确配置的富文本编辑器中， 最终用户可以通过多种方式插入图像： - 从剪贴板粘贴它。 - 从文件系统中拖动文件。 - 通过文件系统对话框选择它。 - 从应用程序中的媒体管理工具中选择它。 排除最后一个选项，所有其他方式都要求将图...
2019-07-05 14:45:37
6968
2
原创 CKEdior5 文档编辑器构建步骤 vue富文本编辑器
首先给你们看下效果图：上述功能不能满足你们需求的可以不用往下看了……先大致介绍下：ckedior官方有6种默认编辑器类型，分别是：经典编辑器、内联编辑器、气球块编辑器、气球编辑、文档编辑器、自定义构建。根据我的项目需求，我需要文档编辑器类型，应用于VUE项目中，官方文档有针对vue项目的具体步骤：第一步：为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的编辑器...
2019-06-27 16:04:59
1216
2
原创 一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper，首先我们需要分2中情况：1、如果在vue中采用 Vue-Awesome-Swiper，如果采用这种方式的话，可以给每个swiper组件添加一个class,来区分，分别建立不同的swiperOption、swiperSlides，具体代码如下：//swiper组件1<swiper :options="swiperOptionSwp1"&g...
2019-06-20 13:39:36
12495
3
原创 css 实现div不可点击样式cursor: not-allowed
1、对于css 实现div不可点击状态，红圈圈形状不可点击样式 cursor: not-allowed;2、不可点击状态，但是显示箭头样式cursor: not-allowed;pointer-events: none;...
2019-06-19 10:45:02
8375
原创 去除滚动条 去除滚动条样式 css修改滚动条样式
如何去除滚动条并保留滚动功能 1、首先如果是超出其中一边滚动，另一边不能滚动的话，可以直接写明超出某一边的样式，比如：overflow-y:scroll 2、如果是两边都可以滚动的话，就给父级添加伪元素 ::-webkit-scrollbar，比如：.box{ overflow: scroll}.box::-webkit-scrollbar{ display none}...
2019-06-14 10:24:51
10790
4
软考论文模版 信息系统项目管理高级论文模版推荐
2023-11-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人