【开发笔记】
一些前端笔记,方便自己使用
爱吃棉花糖#
这个作者很懒,什么都没留下…
展开
-
VUE--保留小数(过滤器)
【代码】VUE--保留小数(过滤器)原创 2024-01-05 14:47:02 · 564 阅读 · 0 评论 -
JS--解决常见JavaScript问题的代码片段
【代码】JS--解决常见JavaScript问题的代码片段。原创 2023-12-26 17:11:55 · 406 阅读 · 0 评论 -
Vue--微信和uniapp配置环境地址
Vue--微信和uniapp配置环境地址原创 2023-07-19 16:49:52 · 1773 阅读 · 0 评论 -
JS--es6模板字符串
【代码】JS-es6模板字符串。原创 2023-07-13 18:03:16 · 1488 阅读 · 0 评论 -
JS--判断数据类型
JS--判断数据类型原创 2023-03-16 17:45:26 · 109 阅读 · 1 评论 -
vue根据数组中对象的属性进行排序
页面上写入<template> <div> <div v-for='(item,index) in arr1'>{{item.name}}</div> </div></template>2.computed中获取最新的数组: computed:{ arr1:function(){ return this.sortKey(this.arr,'age') }}3.methods.原创 2021-11-05 14:14:52 · 1810 阅读 · 0 评论 -
echarts-wordcloud热词组件
1.在vue中安装echarts和echarts-wordcloudnpm install echarts/*注意版本号,echarts5.0.0对应的echarts-woedcloud2.0.0版本*/npm install [email protected].在main.js引入import echarts from 'echarts'Vue.prototype.$echarts = echarts2.创建子组件wordcloud.vue<template>原创 2021-11-08 15:28:58 · 1782 阅读 · 0 评论 -
配置生产环境和测试环境(配置文件修改后一定要重启项目)
配置生产环境和测试环境(配置文件修改后一定要重启项目)原创 2021-12-13 17:25:29 · 1359 阅读 · 0 评论 -
vue获取时间并格式化时间类型
1.在created定义方法created(){ console.log(this.getTime(0)); // 得到当前的时间 console.log(this.getTime(7)); // 得到七天前的时间}2.在methods里写方法methods: { getTime(val) { // 获取时间并格式化 var now = new Date(); val === 0 ? "" : now.setTime(now.getTime()原创 2021-11-16 11:46:38 · 2540 阅读 · 0 评论 -
echarts异步数据加载
1.安装echarts插件命令行:npm install echarts --save2.组件导入echarts如图:运行效果:<template> <div id="tu"> <div id="lond"></div> </div></template><script>import { getlond } from "../api/lond";import * as echarts from转载 2021-11-10 17:12:15 · 824 阅读 · 0 评论 -
兄弟组件传递方法
1.在utils中创建bus.jsimport Vue from 'vue'export default new Vue();2.在组件A中//引入`在这里插入代码片`import Bus from '@/utils/bus.js'//创建监听方法 this.$nextTick(function () { // DOM 现在更新了 Bus.$emit('getCwbxList') }) //在路由跳转之前beforeDestroy () { // 销毁监听事件原创 2021-12-10 15:42:57 · 591 阅读 · 0 评论 -
echars visualMap属性设置
visualMap = [ //视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物(如文字标签)的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。 { show: true, //是否显示 visua转载 2021-11-05 15:51:45 · 754 阅读 · 0 评论 -
Element --日期时间的禁用(约束)
<template> <div id="app"> <el-date-picker :picker-options="setDisabled" > </el-date-picker> </div></template><script>export default { data() { return { setDisabled: { d原创 2022-01-11 17:29:22 · 1338 阅读 · 0 评论 -
Vue--router路由跳转
Vue--router路由跳转原创 2021-12-20 17:01:59 · 807 阅读 · 0 评论 -
计算两个时间戳的差值
1.在utils里创建一个time.jsexport function formatTimes(startTime, endTime) { let diff = endTime - startTime; let str = ''; // 毫秒化天 let d = Math.floor(diff / (24 * 3600 * 1000)); if (d > 0) { str += d + '天' } // 毫秒化小时 let rh = diff % (24 *原创 2021-12-31 15:52:01 · 1550 阅读 · 0 评论 -
rem与px配置自适应布局
1.安装npm i lib-flexible -S2.在main.js引入import 'lib-flexible/flexible.js'3.在flexible.js中(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size // 设置 em 默认字体原创 2022-02-07 11:58:03 · 547 阅读 · 0 评论 -
element表单验证
data() { let nameRule1 = (rule, value, callback) => { let regExp = /^[a-zA-Z0-9_]+$/; if (regExp.test(value) === false) { callback(new Error("用户名格式错误")); } else { callback(); } }; return { //表单验证原创 2021-12-23 15:06:53 · 182 阅读 · 0 评论 -
前端使用js-file-download下载文件和下载视频音频
1.安装js-file-downloadnpm install js-file-download --save2.在页面引入import fileDownload from "js-file-download";3.调用导出接口exportTextResult() { exportTextResult({ id: this.aid }).then(res => { fileDownload(res.data, `${this.fileName}.docx`);原创 2021-12-31 15:34:12 · 9175 阅读 · 0 评论 -
Vue 全选/取消全选,反选/取消反选 小demo
<template> <div> <div> <input type="checkbox" v-model="isCheckAll" @change="checkedAll" /> 全选/取消全选 <input type="checkbox" v-model="isCheckInverse" @change="checkedInverse" /&g原创 2022-02-07 17:08:20 · 546 阅读 · 0 评论 -
解决按钮连点多次调用的问题(防连点)
1.定义<el-button @click="onLogin"></el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } }}2.调用方法methods:{ onLogin(){ //获取当前时间的时间戳 let now = new Date().valueO原创 2021-12-23 11:04:32 · 2372 阅读 · 1 评论 -
VUE打包详细步骤
一、修改请求静态资源的路径打开config文件夹下的index.js文件,修改assetsPublicPath的值,从"/“改为”./"。即从根路径改为相对路径。二、修改本地图片的路径打开build下的utils.js文件,增加 publicPath:’…/…/’三:运行打包代码npm run build...原创 2021-12-23 15:33:27 · 3982 阅读 · 0 评论 -
数据处理(数组拼接)
var arrs = []; var objs = []; for (var i = 0; i < 10; i++) { var obj = {}; arrs.push(i); obj.id = arrs[i]; obj.name=""; objs.push(obj); } console.log(objs); ..原创 2021-12-17 14:43:33 · 521 阅读 · 1 评论 -
给循环出来的div加类名
1.循环div <div class="frame_one" v-for="(item, index) in data" :key="item.id"> <div class="picture" :id="getId(index)"></div> </div>2.给div加类名methods:{ getId: function(index) { return "person_" + ind原创 2021-12-21 11:33:45 · 811 阅读 · 0 评论 -
JS--多久前,当前月,当前年转时间戳
【代码】JS--多久前,当前月,当前年转时间戳。原创 2022-05-30 15:33:40 · 603 阅读 · 0 评论 -
JS--总结几种处理数据的常用方法(api)
JS--总结几种处理数据的常用方法(api)原创 2021-12-23 15:10:43 · 1135 阅读 · 0 评论 -
JS --使用map集合代替if,else判断
JS --使用map集合代替if,else判断原创 2023-03-03 10:50:24 · 157 阅读 · 0 评论 -
el-tree树形控件小demo
【代码】el-tree树形控件小demo。原创 2022-01-07 11:59:16 · 420 阅读 · 0 评论 -
axios的简单封装及使用(拦截器)
axios的简单封装及使用(拦截器)原创 2021-11-05 15:41:47 · 689 阅读 · 0 评论 -
vue使用element导入Excel文件
vue使用element导入Excel文件。原创 2023-02-13 10:26:08 · 547 阅读 · 0 评论 -
使用element的upload上传文件并导出excel
<template> <div> <el-upload class="upload-demo" ref="upload" action="" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" > <el-but原创 2022-05-20 17:09:13 · 633 阅读 · 0 评论 -
常用的深拷贝
一.使用JSON二.使用递归进行深拷贝1.创建deepCopy.js2.页面调用原创 2022-07-13 13:49:02 · 107 阅读 · 0 评论 -
Vue修改网页标签栏标题以及标签栏图标
Vue修改网页标签栏标题以及标签栏图标原创 2023-01-30 17:19:28 · 2129 阅读 · 0 评论 -
js给数组的每个对象添加字段(字段值对应下标)
代码】js给数组的每个对象添加字段(字段值对应下标)原创 2022-08-18 16:54:07 · 2245 阅读 · 0 评论 -
搜索筛选文字高亮
搜索框的筛选文字高亮原创 2022-06-27 16:11:04 · 98 阅读 · 0 评论 -
http协议自动升级
http协议自动升级1.HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的。2.解决办法//页面的head中加入:<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">//意思是自动将http的不安全请求升级为https...原创 2022-03-14 11:55:21 · 562 阅读 · 0 评论 -
添加阿里infont图标
1.创建css@font-face { font-family: 'iconfont'; /* project id 3292342 */ src: url(''); src: url('?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_3292342_f529rt08ywt.woff2') format('woff2'), url('//at.alicdn.com/t/font_3292342_f.原创 2022-03-31 14:12:17 · 966 阅读 · 0 评论 -
父子,兄弟组件传值
一、bus组件传值**1.新建bus.js文件,引入vueimport Vue from 'vue'const bus = new Vue();// 使用 Event Busexport default bus;2.在main.js中引入vue bus (也可以在使用的组件中引入)import Bus from './common/bus'; Vue.prototype.$bus = Bus3.在A页面传递this.$bus.$emit("Page",value); //很像父子之原创 2022-03-04 11:38:08 · 301 阅读 · 0 评论 -
js数组与树形结构的相互转化
2.在util中创建树形结构转一维数组的js文件。1.在util中创建数组转树形结构的js文件。原创 2022-09-22 10:49:13 · 216 阅读 · 0 评论 -
根据数据名称动态更换组件(大屏四合一)
<template><div class="box"> <!-- 热点分析3.0 --> <div class="box_1"> <component v-bind:is="loadertpl1" v-if="loadertpl1"></component> </div> <!-- 京开咨询 --> <div class="box_2">原创 2022-03-22 11:50:41 · 101 阅读 · 0 评论 -
Element-- el-dialog弹框
Element--el-dialog弹框原创 2022-04-25 14:16:36 · 2217 阅读 · 0 评论