- 博客(123)
- 收藏
- 关注
RSS订阅原创 vue下的密码输入框/验证码输入框
1.效果预览2.实现思路制作6个小的正方形div用一个input覆盖在6个div上给input设置透明（隐藏掉input）3.源码html<div class="input-box flexbox"> <div class="code-item" :class="codeValue.length == 0 && inputFocus ? 'code-item-active' : ''">{{codeValue[0]}}</div>
2022-04-02 11:27:44
3348
原创 快速复制浏览器控制台接口传参数据的小技巧
有的时候需要把接口需要传递的参数以JSON的形式，复制下来发送给后端去调试。控制台打印的数据：碰到这种比较复杂的数据，我们用微信等发送给后端人员调试的时候就比较麻烦。其实是有一个小技巧，是可以直接用json的形式直接复制的，就可以随便去复制了。先在控制台右键这个数据：选择store as global variable然后控制台会出现 temp1再在控制台输入copy(temp1)这样所有数据就在你的粘贴板里面了复制后的数据格式：{“id”: “2”,“adPic”: “http
2021-07-01 15:36:54
2358
原创 前端网络图片url失效添加默认图
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在浏览器中就会这样显示<img class="img" :src="url">这种情况下 url 存在，只是失效不能加载出图片，所以不能使用v-if判断的方式针对这种情况，我们可以使用伪元素的方式来解决：我们可以用伪元素来实现一个默认提示效果 .img { width: 80px; height: 80px; position:
2021-06-25 11:58:45
718
原创 elementUI DatePicker 日期选择器：当日6点之前选择可选T+4日期，当日6点之后仅可选择T+5日期
效果：当日6点之前（可选择T + 4）当日6点之后（可以选择 T + 5）主要做法：利用elementUI DatePicker 的 picker-options属性具体代码：// html<div class="content-box"> <el-date-picker type="date" v-model="time" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
2021-06-08 15:47:40
389
原创 微信小程序自定义弹窗开启后禁止页面上下滑动
添加自定义的弹出框后，当滚动弹框时时下边的页面也会跟着滚动解决办法：在弹出层上添加 catchtouchmove='true'注：开发者工具上不起作用，需要在真机上测试web前端交流QQ群：327814892
2021-05-28 14:46:35
467
原创 elementUI日期选择器限制可选择的时间范围
效果： 限制最小查询日期为2021-05-01HTML// :picker-options="dateRange" ：当前时间日期选择器特有的选项参考下表// 通过设置picker-options来达到限制可选择的时间范围<el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" :clearable=.
2021-05-18 10:18:30
2864
原创 vue 自定义时间转换指令（将时间戳转换为“刚刚“，“xx分钟前“，“xx小时前“，“xx天前“）
引言在一些社区，比如微博、朋友圈等，发布的动态会有个相对本机时间转换后的相对时间，如图中波浪线圈出的时间一般在服务端的存储时间格式是 Unix 时间戳，比如 2017-01-01 00:00 00 的时间戳是1483200000。前端在拿到数据后，将它转换为可读的时间格式再显示出来。为了显出实时性，在一些社交类产品中，甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式，这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time 将表达式传入的时间戳实时转换
2021-04-30 10:46:19
2173
3
原创 vue中使用递归组件创建导航菜单
概念组件在它的模板内可以递归的调用自己，只要给组件设置name就可以了用法设置name后，在组件模板内就可以递归使用了，不过需要注意的是，必须给一个条件来限制递归数量，否则会抛出错误：max stack size exceeded父组件在父组件中定义一个要递归的数据（list数组），通过props传递给子组件const vm = new Vue({ el: '#app', data: { msg: '我是来自父组件数据', list:
2021-04-29 11:21:24
951
2
原创 elementUI table表格点击某一行选中并且改变背景色
效果：html<el-table :data="data" border style="width: 100%" @row-click="selectRow" //给行添加鼠标点击事件 :row-style="rowStyle" // 设置行样式 >js// 行鼠标点击事件 selectRow(row, column, event) { co
2021-04-26 15:51:22
11328
1
原创 elementui table的多选框：分页选择数据回显并且保存选中的数据
要求：分页选择，数据回显并且保存选中的数据已经添加的商品，再次打开商品选择框时，默认选中，且不可选择父组件效果演示：点击添加商品按钮弹出商品选择框子组件子组件效果演示：代码：父组件： // 点击添加商品按钮-打开添加商品弹窗 openAddGoodsDialog(index) { // 获取整个活动已经选取的商品数据，传递到添加商品子组件中，子组件中默认选中这些商品 let goodsArr = []; this.form.acti
2020-10-24 10:28:55
2685
原创 elementUI form表单动态增减表单项自定义校验规则
一、效果：二、代码：<template> <div class="seed_consume"> <el-form :model="form" :rules="rules" ref="form"> <div class="itemBox"> <div class="titleBox"> <div class="left"> <span clas
2020-09-23 10:40:58
1835
1
原创 时间格式2020-09-29T18:02:02.000Z转换为“年月日时分秒“
遇到一个需求：选择时间后打印出来是 “2020-09-29T18:02:02.000Z” 格式的，后台需要转换为 “2020-09-30 02:02:02”格式。一、2020-09-29T18:02:02.000ZT表示分隔符，Z表示的是UTC。UTC：世界标准时间，在世界标准时间上加上8小时，即东八区时间，也就是北京时间。二、 2020-09-29T18:02:02.000Z转换为 2020-09-30 02:02:02 步骤：①.引入 dayjs （一个轻量的处理时间和日期的javascr
2020-09-22 14:58:02
46202
14
原创 vue element-ui v-for循环动态上传、删除图片
示例：代码：// =====html代码=====<el-form-item label prop> <el-upload ref="uploadImg" action="#" list-type="picture-card" :auto-upload="false" :on-remove="handleRemoveImg.bind(null,{'index':index,'data':item})" :on-exceed="
2020-09-05 09:31:35
1792
原创 微信小程序流量主收益
目前开通微信小程序的流量主已经5天了，给大家展示一下这几天的收益下面是自己做的微信小程序，用来生活记账使用。可微信扫码查看
2020-04-29 11:01:41
4449
2
原创 微信小程序如何快速开通流量主
腾讯的微信小程序给个人开发者带来了很方便的盈利模式：开通流量主开通条件小程序开通流量主的门槛并不是很高，需要1000个独立 UV ,也就是说有1000个微信注册用户进入过你的小程序。一般来说，通过自己朋友圈转发二维码，或者通过在微信大群分享你的小程序，还是很容易到达1000用户的。个人小程序利用业余时间做了一个生活记账的小程序，可扫码查看。...
2020-04-26 15:21:24
1528
原创 vue 项目中发送 get 请求参数是数组的情况
在 vue 项目使用 axios 来发送get请求时，需要传递的参数是数组的时候，例如：let myThings = ['1', '2', '3']axios.get('/user', { params: { ID: 12345, things: myThings , } })// 上面的请求是 '.../user?ID=12345&t...
2020-01-15 15:09:57
2538
原创 web字体和字体图标
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持。1.字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。TureTpe(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏...
2020-01-04 15:59:14
236
原创 css3边框图片
1、功能：将图片规定为包围 div 元素的边框定义和用法： border-image 属性是一个简写属性，用于设置以下属性border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat属性说明：border-image-source： 用在边框的图片的路...
2020-01-03 14:22:16
256
原创 css制作自动旋转的钟表
1、钟表制作过程制作最外层圆环绘制时间刻度（定位+transform）绘制内表盘(作用：放置钟表最中间，遮挡住时间刻度，只留下部分-达到时间刻度的效果)绘制表针（时、分、秒）绘制最内层圆环（表针遮挡层）分别给时针、分针、秒针添加动画2、具体代码<!DOCTYPE html><html lang="en"><head> &...
2020-01-03 11:43:57
517
原创 css3动画（animation）
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.1.必要元素：通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧通过百分比将动画序列分割成多个节点；在各节点中分别定义各属性通过animation将动画应用于相应元素；2.animation...
2020-01-03 11:40:56
194
原创 css3 多列布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文...
2020-01-02 09:54:59
292
原创 css制作一个自动旋转的立方体
1.透视/景深效果左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，...
2020-01-02 09:51:11
716
原创 css3 transform(2D转换/3D转换)
一、2D转换通过 CSS3 transform转换，我们能够对元素进行移动、缩放、旋转、斜切等操作1. 2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点语法：translate(tx) | translate(tx,ty)tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其...
2020-01-02 09:50:14
771
原创 css3 过渡
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长1.语法：transition: property duration timing-function delay;2.参数说明：tra...
2020-01-02 09:48:44
156
原创 css3 设置背景样式
1.设置背景颜色background-color:red;2.设置背景图片background-image:url(“xxxx”);注：如果图片大于容器，那么默认就从容器左上角开始放置如果图片小于容器，那么图片默认平铺3.设置背景平铺background-repeat:no-repeat;参数说明：repeat：图片平铺（默认）round：会将图片进行缩放之...
2020-01-02 09:47:55
402
原创 css3 渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变一、线性渐变：linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果1.语法：2.参数说明：第一个参数表示线性渐变的方向，to left：设置渐变为从右到左。相当于: 270deg;to righ...
2020-01-02 09:46:57
259
原创 vue点击按钮动态创建与删除组件
主要功能需求点：点击左侧组件库按钮创建对应的不同的组件，并在右侧区域展示点击右侧创建的组件中的删除按钮，删除对应的组件删除对应的组件之后，下方的组件位置自动上移效果图：代码：父组件代码（去除了css样式代码）：<template> <div class="home"> <div class="container"> ...
2019-12-27 14:28:12
4817
2
原创 HTML5 音频 视频的使用以及自定义播放器
一、音频audio：音频src:播放的音频文件的路径controls:音频播放器的控制面板autoplay:自动播放loop:循环 <audio src="../mp3/xxx" controls autoplay loop></audio>二、视频video：视频src:播放的视频文件的路径controls:视频播放器的控制面板auto...
2019-12-25 17:20:12
1274
原创 vue项目中将查询内容已Exacel形式导出到本地
后台为java，本文只展示前端代码1.先将responseType设置为blob格式const getMerchantAuditListByWhereExcel = p => request.get('/xxx/xxxx', { params: p, responseType: 'blob'}) // 订单管理-导出全部查询结果订单信息Excel2.执行的函数代码...
2019-12-20 19:41:45
228
原创 HTML5 sessionStorage localStorage缓存和应用缓存
一、sessionStorage的使用1.存储数据到本地，存储的容量5mb左右2.这个数据的本质是存储在当前页面的内存中3.它的生命周期为关闭当前页面，关闭页面数据会自动清除api:setItem(key,value):存储数据，以键值对方式存储getItem(key):获取数据，通过指定名称的key获取对应的value值removeItme(key):删除数据，通过指定名称...
2019-12-07 15:49:43
337
原创 vue使用vue-photo-preview全屏查看图片
安装插件：npm install vue-photo-preview --save引入到项目中：全局引入：在main.js中引入：// 图片预览插件 vue-photo-previewimport preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)使...
2019-12-07 15:40:41
2147
原创 HTML5 拖拽
学习拖拽主要就是学习拖拽事件一、应用于被拖拽元素的事件ondrag 应用于拖拽元素，整个拖拽过程都会调用ondragstart 应用于拖拽元素，当拖拽开始时调用ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用ondragend 应用于拖拽元素，当拖拽结束时调用二、应用于目标元素的事件ondragenter 应用于目标元素，当拖拽元素进入时调用ondrago...
2019-12-06 16:47:47
198
原创 HTML5中FileReader 的使用
FileReader：读取文件内容1.readAsText():读取文本文件（可以使用txt打开的文件）返回文本字符串，默认编码为UTF-82.readAsBinaryString():读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件的内容，获取二进制数据传递给后台，后台接收了数据之后再将数据存储3.readAsDateU...
2019-12-06 16:46:02
813
原创 HTML5 中网络监听接口和全屏接口的使用
一、网络监听接口1.ononline:网络连通时触发 window.addEventListener('online', function () { alert('网络连通了') })2.onoffline:网络断开时触发 window.addEventListener('offline', function () { alert('网络断开了') })二...
2019-12-06 15:43:05
737
原创 HTML5 获取DOM元素 操作类样式 以及自定义属性
一、获取DOM元素1.获取满足条件的第一个元素document.querySelector(选择器)2.获取满足条件的所有元素document.querySelectorAll(选择器)<ul> <li id="apple" data-name="apple">苹果</li> <li>橘子</li> <li c...
2019-12-05 15:01:38
1672
原创 HTML5中表单新增的type属性和其他属性
一、表单新增的type属性1.文本：输入框内容为文本格式用户名：<input type="text" name="userName">2.密码：输入框内容为密码格式用户名：<input type="password" name="password">3.邮箱：提交时会提示验证邮箱：<input type="email" name="email">...
2019-12-05 14:59:34
4048
原创 BFC及其作用
BFC 全称 block format context (块级格式化上下文)；如何触发一个盒子的BFCposition:absolute;display:inline-block;float:left/right;overflow:hidden;这几种方式都可以触发BFC 具体使用哪种可以根据情况而定。BFC的作用1.解决margin塌陷问题<div class=...
2019-12-01 16:21:25
186
原创 vue项目中对axios的封装
一、安装npm install axios二、引入一般我会在src目录上创建一个network文件夹network文件夹中创建一个config.js （用来封装axios）和一个api.js（用来统一管理接口）三、config.js 中配置axios// 引入axiosimport axios from 'axios'// 引入router路由import router fro...
2019-12-01 11:26:28
333
原创 一篇文章搞懂ajax get请求 post请求 以及封装ajax
一、ajax请求使用传统javascript实现ajax请求需要依赖XMLhttpRequest()对象；1.XMLhttpRequest对象的方法①：open(type(get/post),url,true):与服务器建立连接参数true:代表是否异步，true:异步（99.99%使用true） false:同步（不常用）②：send()- get 请求：send(null)-...
2019-12-01 10:15:02
717
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人