- 博客(36)
- 收藏
- 关注
RSS订阅原创 解决elementui表单自动验证问题
this.$nextTick(() => { this.$refs.ruleForm.clearValidate()})将上方代码加载弹框的确定、取消按钮隐藏弹框的语句后面，其中ruleForm为表单名
2022-01-24 13:23:42
867
原创 Vue实现改变子组件的值同时改变父组件的值
父组件<template> <div class="home"> <div class="test"> <h1 class="title" @click="add = true">显示提示框</h1> <HelloWorld :add.sync="add" v-if="add"/> </div> </div></template><script>impor
2022-01-21 17:24:43
505
原创 解决在vue中使用element ui表格组件type为selection时切换分页前一页选中的变为未选中的问题
rowKey方法添加在data中
2022-01-20 14:08:46
900
原创 实现提示框可拖拽（针对antd vue中的a-modal提示框）
在 utils 中新建 directives.js 文件import Vue from 'vue'// v-drag-modal: 弹窗拖拽Vue.directive('drag-modal', (el, bindings, vnode) => { Vue.nextTick(() => { let { visible, destroyOnClose } = vnode.componentInstance // 防止未定义 destroyOnClose 关闭弹窗时do
2022-01-11 13:32:04
1943
6
原创 antd Vue中实现Select选择器以不同字符分隔复制进输入框都能识别
<a-select mode="tags" style="width: 100%" :disabled="isDisabled" @change="change_select" @search="change_search" @focus="click_focus" :tokenSeparators="[',',' ','/',';']" ></a-select>希望以什么字符分...
2022-01-07 16:17:19
1530
原创 axios下载excel表、pdf
export const downReport_api = params => request({ method: "get", url: "/api-study/paperDocuments/outDataDocumentReport", params, responseType: "blob", // 表明返回服务器返回的数据类型 }); async down() { ..
2021-12-29 10:49:47
423
原创 TS+Vue项目语法
创建组件（分3步）1、引入核心文件2、@Component装饰器3、暴露组件并继承vue的基类（其中One为组件名）<script lang="ts">import {Vue,Component} from "vue-property-decorator"@Component({})export default class One extends Vue{}</script>使用组件（分3步）1、引入组件2、在装饰器中，注册组件3、通过标签.
2021-11-19 16:38:54
1263
原创 TS的使用
1、全局安装TSyarn add global typescript2、检查TS是否安装成功tsc -V3、新建ts文件后缀名都是.ts结尾4、编译ts为js文件tsc 文件.ts5、为了解决相同变量报警告的问题，在项目根目录新建一个tsconfig.json的文件6、vscode自动编译ts文件在tsconfig.json文件中新建一个对象{ compilerOptions:{ "outDir"...
2021-11-19 10:50:46
1036
原创 Axios的三层封装思想
1、底层（默认地址、请求拦截器、响应拦截器）2、接口层引入底层封装好的模块将所有的接口封装成函数并暴露出去3、视图层在需要用的组件引入接口层模块
2021-11-10 18:16:18
1037
原创 如何在Vue项目中使用echarts
1、在项目目录中使用命令安装依赖方式一：npm i echarts --save方式二：yarn add echarts -S2、在要使用echarts的组件中引入插件import * as echarts from 'echarts';3、在template中准备一个echarts的容器<div ref="box"></div>4、在生命周期的mounted阶段使用echarts（按需引入）4.1基于准备好的dom初始化echarts实例v
2021-11-08 10:00:25
511
原创 Vue使用前的准备工作
1、全局安装vue的脚手架方式一：yarn global add @vue/cli方式二：npm i @vue/cli -g2、创建vue的项目vue create 项目名称（项目名称全部小写）--选择vue2.0--选择yarn3、进入项目cd 项目名称4、启动服务方式一：yarn serve方式二：npm run serve5、访问服务http://localhost:8080...
2021-11-01 16:51:53
173
原创 常用自定义函数
常用自定义函数：//补零function fillZero(data){ return data<10?'0'+data:data}//获取指定范围的随机整数的方法function randomInt(min,max){ return Math.floor(Math.random()*(max-min+1)+min)}/*根据秒数获取时分秒并转换成00:00:00格式*/function getHHMMSS(time){ let h=window.$uti...
2021-10-29 21:46:31
180
原创 常用正则表达式
手机号/^1[123456789]\d{9}$/邮箱/^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/用户名4到16位 字母，数字，下划线，减号/^[a-zA-Z0-9_-]{4,16}/密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/.
2021-10-29 21:44:12
145
原创 ES6必会知识点
解构赋值1、数组的解构快速交换2个变量的值，不需要借助第三个变量let x=10;let y=8;[x,y]=[y,x]console.log(x,y)//8 102、对象的解构拿到后端的数据进行解构展开运算符（扩展运算符）1、对字符串1.1 把字符串转成数组1.2 把字符串反转 let str='Iloveyou' console.log([...str])//把字符串转成数组 console.log([...str].reverse
2021-10-24 17:25:27
166
原创 npm和yarn的使用
一.npm的使用 包: 装模块的目录,就叫包 1.初始化一个包管理文件(package.json) npm init npm init -y (目录名称不能中文) 2.设置淘宝镜像 (提高下载速度) npm config set registry https://registry.npm.taobao.org 3.下载运行依赖(开发和上线都要用) npm i 模块名称 ...
2021-10-22 17:53:01
294
原创 拖动盒子功能案例
原理：1、在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标2、触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup3、拖拽过程：鼠标移动过程中，获得最新的值赋值给box的left和top值4、鼠标按下触发的事件源是最上面一行，就是id为title的标题5、鼠标在页面中的坐标减去鼠标在盒子内的坐标就是盒子的真正位置6、鼠标按下：获取鼠标在盒子中的坐标7、鼠标移动：鼠标在页面中的坐标减去鼠标在盒子内的坐标赋值给box的left和top8、鼠标
2021-10-22 11:45:51
233
原创 移动端上传头像
<input type=”file”value=”选择文件”style=”display:none”>为input添加change事件获取上传的图片信息this.files使用内置对象FormDatalet fd=new FormData()追加参数到FormData对象fd.append(key:data)fd.append(“imgurl”,this.files[0])调用接口axios.post(“xxx”,fd).then().c...
2021-10-08 18:18:14
158
原创 自制简易视频播放器
HTML结构： <video src="./1.mp4" id="video"></video> <!-- 视频控件 --> <div class="playBox"> <!-- 播放/暂停按钮 --> <span id="btn"></span> <!-- 进度条 --> <div class="progress"
2021-09-27 12:51:07
545
原创 必须记住的数组方法和字符串方法
数组1、concat()用于连接两个或多个数组，返回一个新的数组（不改变原数组）let arr1=[1,2,3,4]let arr2=[5,6]console.log(arr1.concat(arr2))//[1,2,3,4,5,6]2、pop()用于删除并返回数组的最后一个元素（改变原数组）let arr=[1,2,3,4]let res=arr.pop()console.log(res)//4console.log(arr)//[1,2,3]3、push()用于向数组的
2021-09-24 21:06:45
138
原创 图片跟随鼠标移动
原理1、鼠标不断地移动，使用鼠标移动事件：mousemove2、在页面中移动，给document注册事件3、图片要移动距离，而且不占位置（开绝对定位）4、核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x,y坐标作为图片的top和left值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <styl
2021-09-22 23:05:48
176
原创 移动端搜索记录（关于本地存储）
功能一：点击搜索进行用户输入数据存到本地1、给btn注册点击事件2、在事件中，获取用户输入的值3、获取本地数据（如：searchList为例） 有数据： 1）获取到数据（字符串对象），并转换成真对象 --->数据格式：[1,2,3,.....] 2）把用户输入的值添加到对象中 3）把对象转成字符串对象 4）把字符串对象保存到本地数据中 没有数据 1）定义空数据来保存数据 2）把用户输入的值添加到对象中 3）把对...
2021-09-18 21:43:14
434
原创 表单验证基础知识
1、验证分类前端验证：主要验证用户输入的值，是否符合指定规则后端验证：主要验证前端传入到后端的数据是否在数据库中存在2、验证方式边输入边验证失焦验证提交验证3、正则表达式（reg）作用： 测试字符串的合法性 进行字符串的提取 替换字符串语法： 1）定义规则 let reg=/规则/修饰符 如：验证字符串是否为汉字^[\u4e00-\u9fa5]{0,}$...
2021-09-13 14:08:28
146
原创 表单全选与取消全选
分析：1、全选和取消全选：让下方所有复选框的checked属性（选中状态）跟随全选按钮2、下方的所有复选框选中全选按钮才选中，其中一个不选中全选按钮都不选中每次点击下面的某个复选框都要循环检查下方复选框是否都被选中flag保存全选按钮的选中状态HTML结构：<table border="1" cellspacing="" cellpadding="0"> <tr> <th><input type=...
2021-09-10 14:17:18
1465
原创 网页中楼层跳转功能
原理：点击哪一个li，找到相应的楼层内容(为每个楼层内容设置一个.floor类)把当前楼层对应到顶部的距离设置到滚动条上步骤：1、获取点击元素（li）的索引2、获取当前楼层（.floor）距离顶部的距离3、将获取到的距离设置到滚动条上<div id="floorBox"> <p>楼层导航</p> <ul> <li> <span>狗狗主粮</s
2021-09-10 09:25:33
364
原创 网页固定头部功能
固定头功能实现步骤：1、写出固定到头部的结构与样式2、通过js或jq动态显示分析： 事件源：window document 事件类型：onscroll(js)、scroll(jq) 事件处理函数： 获取滚动条距离顶部的距离 判断距离：>500显示固定头部 else隐藏固定头部 细节： 如果显示固定头部（把头部中的搜索框放入固定头部的盒子） 如果隐藏固定...
2021-09-09 11:21:09
682
原创 纯js实现轮播图
HTML部分： <div id="wrapper"> <ul id="slideBox" style="left: 0;"> <li><img src="img/A.jpg"></li> <li><img src="img/B.jpg"></li> <li><img src="img/C.jpg"></li> <l
2021-08-30 23:20:52
86
原创 选项卡功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> /* 清除默认样式 */ ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } #wrapper{ .
2021-08-27 21:59:39
83
原创 返回顶部功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>返回顶部</title> <style type="text/css"> body{ height: 2000px; position: relative; } #box{ width: 50px; height: 50px; lin.
2021-08-27 19:25:45
117
原创 商品分类二级菜单（HTML+CSS+JS）
难点：压线效果的处理（元素的层级要分清）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li,p{ padding: 0; margin: 0; } ul{ list-style: none; } a{
2021-08-27 19:05:50
1209
原创 下拉二级菜单的两种实现方式（html+css）
方式一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
2021-08-27 18:33:52
820
原创 将setTimeout改成setInterval使用
let num=0let timeId=setTimeout(fn,1000)function fn(){ num++ document.write(num) timeId=setTimeout(fn,1000) if(num==10){ clearTimeout(timeId) }}结果： 向页面输出1 2 3 4 5 6 7 8 9 10，每次输出间隔1秒...
2021-08-22 22:41:28
172
原创 找出二维数组中最大值及最大值对应的索引值
<script>var group=[ [80,92,91], [18,12,41], [99,72,51], [60,62,93], ] var max=group[0][0]//存放最大值 var maxI=0 var maxIndex=0; ...
2021-08-19 16:53:35
989
原创 3个input框做简易加减乘除计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input{ width: 50px; height: 30px; ...
2021-08-18 14:57:03
1238
原创 自增和自减
自增++对于一个变量自增后，原变量（a）的值会立即自增1自增分为两种：a++和++a无论是a++`还是++a,都会立即使原变量的值自增1，不同的是a++和++a的值不同a++的值等于原变量的值（自增前的值）++a的值等于原变量自增后的值var a=10；var b=11;console.log(a++);//10console.log(++b);//12var c=12;var result=d++ + ++d + d;console.log(result
2021-08-15 22:02:11
600
原创 var、let、const的区别
1. var 可以重复定义，可以再次赋值, 后面定义时var没有意义2. let 不能重复定义，否则报错, 可以再次赋值3. const 定义常量，不能重复定义，不能再次赋值，否则报错
2021-08-15 21:18:45
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人