项目总结
关注
分享
扫一扫
项目总结与项目代码
冷太阳a
小小前端工程师，小本本记笔记。
展开
-
vue实现可拖拽dialog封装
可拖拽弹窗封装原创 2024-07-18 16:11:16 · 352 阅读 · 0 评论 -
el-date-picker 日期时间选择器 限时时间范围 精确到时分秒
el-date-picker 日期时间选择器 限时时间范围 精确到时分秒原创 2023-11-06 10:46:05 · 2352 阅读 · 0 评论 -
el-form动态检验无法生效问题（已解决）
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;原创 2023-09-12 13:39:41 · 1545 阅读 · 0 评论 -
js数组常用方法
find() 方法返回数组中满足提供的测试函数的原创 2022-09-23 15:19:06 · 201 阅读 · 0 评论 -
前端常见的处理数据的一些方法
【代码】前端常见的处理数据的一些方法。原创 2022-09-23 15:09:42 · 473 阅读 · 0 评论 -
vue权限permission实现
vue权限permission实现。原创 2022-08-05 15:20:16 · 2284 阅读 · 3 评论 -
通过promise.all方法去判断一组接口验证结果
promise.all原创 2022-06-23 23:43:21 · 371 阅读 · 0 评论 -
Utils 前端随机生成id，中文姓名
随机生成id/** * 获取当页过滤项 */export function getFilterItem(data, key) { return Array.from(new Set((data || []).map(({ [key]: value }) => value))).map(value => ({ value, text: value }))}// 生成唯一idexport function guid() { return 'xxxxxxxx-xxxx-4xxx原创 2022-05-18 15:09:07 · 1031 阅读 · 0 评论 -
关于flex布局justify-content:space-around最后一个不对齐的解决方法
问题图解决图解决 css 代码 .itemBox { width: calc((100% - 30px) / 3); margin-bottom: 5px; margin-right: 10px; cursor: pointer; text-align: center; border-radius: 6px; border: 1px solid #000; &:nth-child(3n) { margin-ri原创 2022-05-18 15:03:30 · 1036 阅读 · 2 评论 -
VeeValidate表单校验
一、安装npm install vee-validate --save //安装可能会报错npm install vee-validate@2.0.0-rc.25 //报错用这个二、统一封装validate.jsimport Vue from 'vue'import VeeValidate, { Validator } from 'vee-validate'import zh from 'vee-validate/dist/locale/zh_CN' // 引入中文文件Validat原创 2022-05-04 22:35:41 · 565 阅读 · 0 评论 -
antdV中Anchor 锚点总结
<div :class="$style.title"> <a-anchor :get-container="getContainerBox" :affix="false" :target-offset="targetOffset" :class="$style.anchor" @click="handleAnchorClick" ...原创 2022-04-21 12:22:25 · 6137 阅读 · 2 评论 -
快速实现筛选效果
<!-- * @Description: * @Author: Ran junlin * @Date: 2021-04-29 21:21:38 * @LastEditTime: 2022-03-22 09:02:55 * @LastEditors: Ran junlin--><template> <div> <!-- <van-dropdown-menu> <van-dropdown-item title="原创 2022-03-22 09:25:14 · 461 阅读 · 0 评论 -
简易时钟倒计时（带盒子投影css）
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-03-02 11:22:14 * @LastEditTime: 2022-03-02 11:22:39 * @LastEditors: Ran junlin--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2022-03-02 11:24:46 · 294 阅读 · 0 评论 -
js八股文心得体会
function ADD(x = 1, y = 0) { this.x = x this.y = y}ADD.prototype.addFn = function() { return this.x + this.y}const m = new ADD(5, 6) // console.log(m); // console.log(m.addFn()); // // 普通函数、 // function fnP(a, b, c) { /原创 2022-02-26 22:38:36 · 621 阅读 · 0 评论 -
Vue3中简单使用vuedraggable拖拽
一、安装引入npm i vuedraggable@4.1.0 --saveimport Draggable from 'vuedraggable';二 、使用<template> <button @click="submit">提交数据</button> <div class="drag-box"> <Draggable v-model="tags" :list="list" :animat转载 2022-02-18 15:56:59 · 9129 阅读 · 4 评论 -
Vue3+element-plus 表格实现上移下移排序
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-02-18 10:16:09 * @LastEditTime: 2022-02-18 14:48:10 * @LastEditors: Ran junlin--><template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di原创 2022-02-18 14:49:31 · 1664 阅读 · 0 评论 -
vue2中兄弟组件通讯
方法一：（bus事件总线）推荐一、 main.js//创建vmnew Vue({ el:'#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this },})二、App 搜索案例APP组件<template> <div class="app"> <Search /> <br /> <hr />原创 2022-02-11 14:59:12 · 714 阅读 · 0 评论 -
vue中transition动画（移动端页面切换左右滑动效果）
例子一：（简单进入和离开动画）demo1<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">vue2！</h1> <h1 v-show="isShow"原创 2022-02-11 10:12:18 · 8034 阅读 · 0 评论 -
vue利用computed简单实现过滤筛选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2022-02-08 16:35:37 · 889 阅读 · 0 评论 -
js快捷使用递归构建树
一、方法封装导出export const makeElementTree = (params) => { // console.log(params); // 解构取出参数 const { pid, list, pidFiled, labelFiled, valueFiled } = params // 构建一个内部函数，用于实现递归 const makeTree = (pid, arr) => { const res =原创 2021-12-21 16:05:10 · 949 阅读 · 0 评论 -
eachart toolbox图标转表格数据
toolbox: { show: true, feature: { dataZoom: { yAxisIndex: "none", }, //区域缩放，区域缩放还原 dataView: { readOnly: false, optionToContent: function (opt) { let axisData = opt.xAxis[0].dat.原创 2021-11-30 14:43:39 · 273 阅读 · 0 评论 -
js获取本月初与月底的时间、获取前一天的时间。
可以在utils.js里面封装通用方法，引入即可使用。/* 获取本月初跟月底*/export const getCurrentMonth = () => { // 2021-10-01 00:00:00 let firstDate = new Date(); let startDate = firstDate.getFullYear() + "-" + (firstDate.getMonth() + 1 < 10 ? "0" : "") + (.原创 2021-11-02 15:01:42 · 689 阅读 · 0 评论 -
前端请求下载二进制流的word excel
// 下载apiexport async function downloadWord(data) { const res = await request.post('/double-reduce/report/downloadWord', data, { FORM: true, responseType: 'blob', // 表明返回服务器返回的数据类型 这里不写接受类型，文件格式乱码 }); return res;}调用下载接口下载类型对应xls: ‘ap原创 2021-10-20 17:59:01 · 473 阅读 · 0 评论 -
element-table组件，动态添加行背景。
<el-table :data="tableData" highlight-current-row //点击当前行高亮 ref="multipleTable" //绑定ref > <el-table-column fixed align="center" type="index" width=".原创 2021-10-08 17:38:33 · 419 阅读 · 0 评论 -
js原生楼层实现scrollIntoView
1.基于原生Api scrollIntoViewscrollIntoView用法：element.scrollIntoView(scrollIntoViewOptions);在循环数组时给标签动态添加class，注意scrollIntoView地位的是到具体一个位置数，所以clas一定是唯一的，用动态id更好 <!-- 楼层 --> <ul class="ul"> <li v-for="qn in questionnaireList" :ke原创 2021-08-19 11:02:46 · 655 阅读 · 2 评论 -
js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）
1.根据某个字段排序var arr = [ {name:'张三',age:15}, {name:'李四',age:18}, {name:'王五',age:28}];function compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; //降原创 2021-08-18 16:19:54 · 5100 阅读 · 1 评论 -
Vue项目启动时：Plugin/Preset files are not allowed to export objects, only functions.报错解决
原因是babel的版本冲突导致的。解决方案1.卸载当前babel版本npm uninstall babel-loader2.安装babel 7 的版本npm install babel-loader@7 -D原创 2021-06-17 14:41:21 · 1362 阅读 · 0 评论 -
Excel随机生成密码
随机生成2位字母+随机6位数字组成=CHAR(INT(RAND()*26+97))&CHAR(INT(RAND()*26+97))&INT(RAND()*9+1)&INT(RAND()*900+100)&INT(RAND()*9+1)&INT(RAND()*9+1)随机生成8位数字+字母=CHAR(INT(RAND()*26+97))&INT(RAND()*9+1)&CHAR(INT(RAND()*26+97))&INT(RAND()*原创 2021-04-07 15:18:07 · 1347 阅读 · 0 评论 -
vue中使用组件按钮与原始button点击后显示加载中，防止重复提交
<div id="test"> <textarea placeholder="请填写你的答案" v-model.trim="answer"></textarea> <el-button class="login-btn" type="primary" @click="submitForm" :loading="loadingBtn" >{{ loadingButText }}<..原创 2021-04-02 00:39:54 · 1178 阅读 · 0 评论 -
uni-app中使用flex布局在微信小程序中注意点
一、flex-direction属性规定灵活项目的方向，默认值row,一般会忽略，但是在微信小程序中失效，需再写一遍flex-direction:row二、盒子模型 小程序中也需要单独加上 box-sizing: border-box; 可以在APP.vue中加上全局样式针对小程序的布局/* #ifdef MP-WEIXIN */ :not(not) { /* *所有选择器 */ box-sizing: border-box; } /* #endif */...原创 2021-01-26 15:16:23 · 1139 阅读 · 0 评论 -
element_ui table修改表格样式
修改表格点击选中时效果 /deep/.el-table__body tr.current-row > td { background: #406bf8 !important; color: #fff; cursor: pointer;}2.修改过渡时效果/deep/.el-table--enable-row-hover .el-table__body tr:hover > td { background: #406bf8 !important; color: .原创 2020-12-14 11:53:32 · 1330 阅读 · 0 评论 -
input按回车换行
需求描述：页面是table里面嵌入input,用户要求按回车去下一个input之前由于用到elementUI的,用于改变许多类型，之后就自己用原生的input去实现具体代码： <input type="number" :ref="`ipt` + index" :class="`ipt` + index" v-model=原创 2020-12-08 14:51:45 · 1556 阅读 · 1 评论 -
关于Vue父传子异步传递数据问题
问题描述：使用videoPlayer插件封装视频组件，父组件通过网络请求的数据URL地址传给视频URL使其显示，由于异步问题，需要用一个中间变化数据来通知传递过程解决：在父组件里面定义个flag,父组件中网络请求成功后把flag变为true，组件上通过v-if去监听网络请求完成以后再去传值代码视频子组件父组件...原创 2020-09-22 22:37:51 · 784 阅读 · 0 评论 -
函数式编程之高阶函数用法
this.resArr = this.arr.filter(n => n % 2 == 0).map(n => n * 2).reduce((pre, n) => pre + n)原创 2020-09-15 21:38:54 · 241 阅读 · 0 评论 -
Vue中移动端适配禁止用户缩放屏幕
控制移动端页面的缩放最近用vue和mint-ui框架开发了一个微信公众号，部署以后，进入页面，发现页面会随着手指的滑动而缩放，查阅资料后发现要在index.html中设置一下。以下是解决方法：vue生成的index.html页面中，meta标签是这样子的：这里只要把meta标签改成以下内容，就可以控制页面的缩放具体属性值分析： width=device-width 使用设备的宽度来解析 initial-scale=1.0 页面初始倍数为1倍 m原创 2020-09-14 16:39:26 · 1021 阅读 · 0 评论 -
vue-cli3脚手架下Eslint的配置报错问题
在Eslint严格模式下会对代码进行一定的规范，一下是不规范的报错。解决方案在目录.eslintrc.js下配置常用的规范 'indent': [2, 4], // 开启缩进风格 缩进4格 'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格 - 开启 'no-const-assign': 2, //禁止修改const声明的变量 - 开启 'space-before-function-paren': [0, 'always'], //函数定义时括原创 2020-07-08 22:56:32 · 592 阅读 · 0 评论 -
ElementUI 关闭对话框清空验证和发送数据完成后清除form表单
1.先给表单绑定 ref="formDataC" 这里的formDataC就是data里面需要传输的数据。2.给提交（取消）按钮绑定 <el-button type="primary" @click="submitForm('formDataC')">提交</el-button> 3.提交事件submitForm(formName) this.$refs[formName].resetFields(); submitForm(formName) {原创 2020-08-04 11:37:10 · 952 阅读 · 0 评论 -
vue-router通过replace,push动态传参报错解决
解决：在router index.js里面配置如下代码const originalReplace = VueRouter.prototype.replace;VueRouter.prototype.replace = function replace(location) { return originalReplace.call(this, location).catch(err => err);};原创 2020-08-02 09:51:26 · 2492 阅读 · 0 评论 -
jQuery中事件方法live()与on()
项目笔记:// 由于绑定的.xy是还没有添加进DOM的元素的 可以通过两个方法实现 ：//-方案一.通过on()事件委托方法，给没有DOM元素添加事件委托 就只能先找到父级，然后委托子元素进行事件传递// demo=>(′.moviebox′).on(′click′,′.xy′,function())//在jQuery1.8版本及其以下的老版本提供了一个.live的方法。//事件委托//.live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可原创 2020-07-17 10:29:46 · 399 阅读 · 0 评论 -
微信小程序wx.request()方法封装及状态码的处理
一、在根目录下创建config.js的js文件和api的文件夹下创建http.js的js文件***config.js文件const config = { api_base_url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', //若后端要求传入 // appkey:'kkkkkkkkooooo'}// let fun1=function(){// }export { .原创 2020-07-11 12:53:35 · 3169 阅读 · 0 评论