![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
成都彭于晏的橙子
正在努力的小前端
展开
-
前端 当前日期加减时间(天、周、月、年数)
改变时间节点原创 2022-11-07 09:28:43 · 1789 阅读 · 1 评论 -
el-date-picker组件首次展开默认显示当上一个月和本月
elementUI的el-date-picker组件的下拉框默认显示的是本月至下月要修改为默认显示上月至本月原创 2022-08-11 10:47:14 · 4647 阅读 · 0 评论 -
JS 去除字符串中的换行符 /n
js方法原创 2022-07-04 10:48:44 · 6635 阅读 · 0 评论 -
Vue3监听ElementUI的table的滚动事件
onMounted(() => { console.log( priceTable.value.layout.table, "priceTable.value.bodyWrapper" ); let table = priceTable.value.layout.table.refs.bodyWrapper; table.addEventListener( "scroll", () =&g.原创 2022-03-02 16:34:52 · 2502 阅读 · 2 评论 -
前端学习文档
vant :Vant 3 - Mobile UI Components built on Vueecharts:www.makeapie.comd2-admin :https://d2.pub/zh/doc/d2-admin/component/container.html#%E5%8F%82%E6%95%B0threeJs:three.js-master下载_CDN_郭隆邦技术博客vue-cli安装three.js扩展控件orbitControls.js - 简书Three原创 2022-02-25 17:21:24 · 315 阅读 · 0 评论 -
Vue3中JS控制Element-UI的el-tree点亮节点
父组件中的html:<template> //父组件 <div class="content"> //子组件 <member-tree ref="LeftMemberTree" /> </div></template>父组件中的调取接口获取的id赋值给子组件: LeftMemberTree.value.currentLayerDeptId = res..原创 2021-12-01 14:48:54 · 1045 阅读 · 0 评论 -
Vue3的Env环境变量配置的应用
.env(# 所有环境默认)# 所有环境默认# 页面 title 前缀VUE_APP_TITLE=某某某# 网络请求公用地址VUE_APP_API= /.env.development(# 开发环境)# 开发环境# 指定构建模式VITE_NODE_ENV=development# 页面 title 前缀VUE_APP_TITLE=图菱# 网络请求公用地址VITE_APP_API=/api/# 首页是否显示登录VITE_SHOW_LOGIN='yes'原创 2021-11-26 18:13:58 · 1773 阅读 · 1 评论 -
Echarts 相同页面、相同组件、显示不同数据
场景如图,相同页面内显示一个组件 想要显示不同的数据而不冲突 以下操作即可解决(用到math方法的随机数来给组件不同的id名)子组件内: <div class="charts-members-resources-content"> <div class="charts-members-resources" :id="chartsMembersResources" :style="{ width: '100%', height: .原创 2021-11-23 15:26:37 · 1327 阅读 · 0 评论 -
前端 图片无缝无限循环展示效果(animation)
主要是使用了CSS3的animation动画,可用于制作瀑布流,轮播等html:<div class="screen screen1"> <div class="screen-content1" v-if="urlList.length"> <el-image v-for="i in urlList[0]" :key="i" style=" width: .原创 2021-11-01 17:07:03 · 1625 阅读 · 0 评论 -
Echarts 隐藏series 其中的某条数据
这种场景通常用于想在toolTip显示某类数据 但是又不想让图标里显示线条series: [{ name: '...', type: 'line', symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示 showSymbol: false, // 不显示symbol不显示 lineStyle: { width: 0, // 线宽是0不显示线 color: 'rgba(0, 0, 0, 0)' // 线.原创 2021-11-01 16:43:29 · 8295 阅读 · 1 评论 -
echarts5.x与vue3.x的一些问题
使用"axis" 正常情况下 是可以显示toolTip的:tooltip: { show: true, trigger: "axis", },效果如下:但是写死数据是可以显示toolTip的,调取接口过后则无法显示(嗯?????????????)原因:Vue3中采用了Proxy对象代理,而Echarts中使用了大量的"==="造成对比失败解决方案:①将Proxy对象进行拆箱// proxy拆箱 解决...原创 2021-10-30 17:54:47 · 535 阅读 · 0 评论 -
适用于前端开发的工具函数
一.格式化年月日 传法:tool.parseTime(newDate(),"{y}-{m}"),// 日期格式化tool.parseTime = function (time, pattern) { if (arguments.length === 0 || !time) { return null } const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typ...原创 2021-09-09 16:27:43 · 423 阅读 · 0 评论 -
响应式随笔
本文为搬运学习 原文地址:https://blog.csdn.net/wangningjing87/article/details/103716934width: calc(100% - 20px);css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算;calc()函数使用标准的数学运算优先级规则;...原创 2021-08-19 18:21:48 · 87 阅读 · 0 评论 -
Vue3父子传值
父传子父组件:<PosterDataDialog :currentPopOverUserName="currentPopOverUserName" :currentUid="currentUid" :dateValue="dateValue" ref="PosterDataDialog"/>let state = reactive({currentUid:xxx,dateValue:xxx,currentPopOverUserName:xxx})原创 2021-08-19 14:05:37 · 285 阅读 · 0 评论 -
对象数组中根据属性值大小排序Sort(时间戳之类)
posterDetail(){let timeLineList = [{color: "#0bbd87",createTime: "2021-08-13 21:11:38",designId: "63d0e8bb-7c2f-4bf9-975d-91a59c1cd5d7",id: 18,imgUrls: "",partner: "ckt",state: 1,timeStamp: 1610962434000,unPassCase: "",verifyTime: "2021-01-18 1.原创 2021-08-14 18:22:06 · 459 阅读 · 0 评论 -
Vue3中使用子组件触发父组件中的函数
父组件代码部分<template> <div class="home"> <edit-user ref="edit" @onEditUserSubmit="methods.getUserList" /> </div></template><script>import editUser from "./components/edit-user.vue";export default defineComponent原创 2021-08-13 14:29:50 · 303 阅读 · 0 评论 -
动态添加的路由 Vue3动态添加路由及生成菜单
本文为搬运学习,原文地址:https://blog.csdn.net/weixin_42510962/article/details/112618116?utm_term=vue3%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-112618116&spm=转载 2021-08-13 11:59:27 · 2326 阅读 · 0 评论 -
Vue 动态添加的路由页面刷新时失效的原因及解决方案
本文为搬运学习,感谢原文大佬,原文地址:https://www.jb51.net/article/206376.htmVue2问题描述昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况。场景后台管理系统的权限控制是通过在前端页面定义权限code, 把code给后台同学保存配置到表中,之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配,code相等的页面就是有权限的页面,再通过rout转载 2021-08-13 11:50:48 · 4443 阅读 · 0 评论 -
CSS object-fit 属性的使用
对图片进行剪切,保留原始比例:img.a { width: 200px; height: 400px; object-fit: cover; }语法object-fit: fill|contain|cover|scale-down|none|initial|inherit;属性值值 描述 fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原.原创 2021-08-13 11:42:20 · 127 阅读 · 0 评论 -
CSS的font颜色渐变
HTML<span class="valueStyle">15</span>CSS.valueStyle{ font-weight:600; font-size:25px; margin-bottom:0px; cursor:pointer; background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); -webkit-background原创 2021-08-13 11:36:07 · 291 阅读 · 0 评论 -
CSS好看的HOVER效果
本文为搬运学习,感谢原文大佬,原文地址:https://juejin.cn/post/6861501624993447950一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>复制代码CSS#send-btn{ display: flex; align-items: center; justify-co转载 2021-08-13 11:31:49 · 407 阅读 · 0 评论 -
flex响应式布局
<!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>D.原创 2021-08-13 10:31:46 · 104 阅读 · 0 评论 -
Echarts自适应屏幕大小
目前我知道的两种方式//方式1window.onresize = function () { //自适应大小 charts1.resize() charts2.resize() charts3.resize()}//方式2<body onresize="myFunction()"></body>原创 2021-08-12 17:13:07 · 135 阅读 · 0 评论 -
Vue3 elementUI修改el-date-picker默认时间
HTML:<el-date-picker v-model="dateValue" type="daterange" size="small" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"></el-date-picker>JS://放在页面的state中.原创 2021-08-12 14:43:39 · 2935 阅读 · 2 评论 -
Vue3中vite动态import引入打包报错解决
import { RouteRecordRaw, createRouter, createWebHistory, useRoute,} from "vue-router"// @ts-ignoreimport util from "/@libs/util"// import Layout from '/@views/layout/Layout.vue'// @ts-ignoreimport store from "/@store/index"import Layout fro.原创 2021-08-11 12:06:56 · 18643 阅读 · 5 评论 -
vue3学习文档
学习vue3地址:https://24kcs.github.io/vue3_study/转载 2021-08-10 16:19:57 · 782 阅读 · 0 评论 -
微信小程序与font-awesome图标库
本文为搬运学习,感谢原文大佬,原文地址:https://zhuanlan.zhihu.com/p/165568293第一步:去官网下载font-awesome字体包font-awesome官网下载完是一个压缩包,解压之后是这个亚子第二步:找到红线圈出的ttf文件,并上传到这个网址操作如下第三步:convert下载完成之后是一个压缩包,解压之后是这个亚子找到stylesheet.css文件并打开我双击之后默认是hbuilder打开的,无所...转载 2021-08-10 16:16:34 · 330 阅读 · 0 评论 -
微信小程序HTTP接口请求封装
本文为搬运学习,感谢原文大佬,原文地址:https://www.cnblogs.com/wuliujun521/p/11458379.html1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)request.js:var app = getApp();//项目URL相同部分,减轻代码量,同时方便项目迁移//这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息var host = 'http://localhost:8081转载 2021-08-10 16:09:29 · 307 阅读 · 0 评论 -
微信小程序 wx.navigateTo()传参方法
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/weixin_43970434/article/details/98876750参数传递1.数据需要转义为字符串才能通过参数传递 JSON.stringify()2.多个参数传递,前面要加 & 符号let dataList = JSON.stringify(this.data.dataLists)wx.navigateTo({ url: '../details/details?dataList=转载 2021-08-10 16:04:46 · 11259 阅读 · 0 评论 -
原生js 滚动到底部的时候触发的事件
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/qq_34507902/article/details/102545270代码入下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&.转载 2021-08-10 16:01:19 · 1154 阅读 · 0 评论 -
时间段选取
本文为搬运学习,感谢原文大佬,原文地址:https://www.cnblogs.com/lvxisha/p/10673522.html时间段开始时间小于结束时间的判断,下面是封装号的方法,直接可以调用:var data = new Date(); var year = data .getFullYear(); //获取完整的年份(4位) var month = data .getMonth(); //获取当前月份(0-11,0代表1月) console.log("时间::"+f转载 2021-08-10 15:58:26 · 196 阅读 · 0 评论 -
隐藏scroll-Y纵向滚动条而不影响内容滚动
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/weixin_34209851/article/details/88883109纯DIV+CSS方法在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。该方法兼容所有浏览器。<div class="outer-container"> <div class="container"> <ul&g转载 2021-08-10 15:52:33 · 1636 阅读 · 0 评论 -
Vue2中elementUI实现自定义主题
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/wangcuiling_123/article/details/78513245使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多)第一种方法:使用命令行主题工具使用vue-cli安装完项目并引入element-ui(具体可参考第转载 2021-08-10 15:52:56 · 890 阅读 · 0 评论 -
vue2中使用element-ui暴露全部变量时候使用et-i报错
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/qq_40994418/article/details/106046294在vue-cli中使用element-ui时候,使用CLI主题工具自定义主题时候,按照文档执行的时候,想要全部暴露scss变量的时候 执行et -i 命令的时候,报错:解决方法:cnpm i element-themex -g之后再执行:et -i 就可以全部暴露变量当然这是vue2的解决方法 vue3的还没试过...转载 2021-08-09 16:50:52 · 351 阅读 · 0 评论 -
修改echarts的翻页图标
本文为搬运学习,感谢原文大佬,原文地址:https://blog.csdn.net/qq_42886417/article/details/106221008Echart legend 中 默认的翻页箭头长这样先来看一下改后的效果好看很多,丑陋的三角形886!再看一下 Echart 的文档得知关键代码在pageIcons可是这个 SVG PathData 还是第一次见,触及了知识盲区第一反应就是跟 UI 要,结果她也不知道是什么,更不知道该怎么转换。。。自己折...转载 2021-08-09 16:47:08 · 786 阅读 · 0 评论 -
修改滚动条样式
CSS:#freeStyle { height: 200px; width: 500px; overflow: auto; }#freeStyle::-webkit-scrollbar-track { background-color: #fff; /* -webkit-box-shadow: inset 0 0 6px #242d3e; */ }原创 2021-08-09 16:31:30 · 91 阅读 · 0 评论 -
vue3跳转传参
vue2写法1.加入传递的参数值<router-link :to="{name:'generate', query:{ couponId: record.id }}">绑定账号</router-link>2. 页面接收参数const couponId = this.$route.query.couponIdvue3中与vue2不同:<router-link:to="'/bindAccount/'+scope.row.id"class="lin...原创 2021-08-09 16:17:58 · 998 阅读 · 0 评论 -
去除element表格各种边框,实用就完事儿了
本文为搬运学习,感谢原文大佬,原文地址:https://www.jianshu.com/p/9c142a0faaf2表格线:前言:表格结构:在表格外层包一层自定义的class,利用三箭头深度修改1、去除表格线:.my_table >>> .el-table__row>td{ /* 去除表格线 */ border: none;}效果:2、去除上边框:.my_table >>>...转载 2021-08-09 15:32:23 · 6872 阅读 · 5 评论 -
vue + typescript:Property ‘xxx‘ does not exist on type ‘Vue‘.
比较暴力的解决方法:(xxx as any)......举个栗子:(state.queryParams.dictTypeasany)=state.defaultDictType;这就不会出现警告 还在学习TS中原创 2021-08-09 15:27:51 · 470 阅读 · 0 评论 -
微信官方开发文档地址
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html转载 2021-08-09 15:24:38 · 91 阅读 · 0 评论