自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(72)
  • 资源 (5)
  • 问答 (1)
  • 收藏
  • 关注

原创 循环列表中使用ul-upload上传文件

需求分析:在备案的时候需要提交材料,但是每各阶段可能需要提交的材料是变化的,为了应对这种变化,将准备资料弄成动态的, 然后申请每一项备案的时候动态加载,然后上传对应的附件。

2023-06-15 11:21:48 609

原创 ES6原型继承

ES6原型继承

2022-07-22 11:30:07 553 1

原创 JavaScript中this指向问题

javascript 中的this指向,谁调用它,this就指向谁。

2022-07-12 11:35:55 277

原创 Vue单文件组件

Vue单文件组件

2022-07-07 10:21:44 216

原创 webpack基本使用

webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。........................

2022-06-21 08:41:30 191

原创 模块化相关规范

前端工程化-------模块化相关规范

2022-06-16 10:23:49 139

翻译 软件过程模型

瀑布模型----需求明确、文档驱动,不支持软件重用和多项活动集成V模型(瀑布模型的变体)----质量保证活动增量模型(瀑布模型的变体)----第一个往往是核心产品,快速提供一个版本以便进行测试演化模型----需求不明确、需求经常变化、迭代开发、尽快投入使用原型模型(是一种演化模型)----用户需求不清、需求经常变化、系统规模不是很大也不是很复杂时螺旋模型(是一种演化模型)----瀑布模型与演化模型结合,加入风险分析、用户评估;适用于庞大、复杂且具有高风险的系统喷泉模型----以用户需求为动力,以

2022-05-30 11:12:12 108

翻译 vue-router 路由跳转传参刷新页面后参数丢失问题

常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据。我们先来看看路由跳转的几种方式:1、通过params方式传参通过$route.push的path携带参数方式(路由配置中指定参数)// 路由配置{ path: '/detail/:id', //若id后面加?代表这个参数是可选的,即使不传id也不会导致页面无法访问 name: 'detail', component: Detail }// 列表中跳转this.$router.push({

2022-02-15 09:51:33 17575 5

原创 java使用stream流构建自定义树形结构

实现效果:查询基础数据做准备:java实现:package com.aa.web.controller.tree;import com.alibaba.fastjson.JSONObject;import com.aa.common.core.domain.AjaxResult;import com.aa.system.domain.tree.MonitorCar;import com.aa.system.domain.tree.MonitorParams;import ...

2022-01-12 11:04:55 533

原创 vue如何使用字体图标

先简单介绍一下什么是字体图标:字体图标就是一种比较特殊的字体。通过这种字体,显示给用户的就像一个个图片一样,广泛应用于Web项目的开发 ,如下图:这些就是一个个字体图标,刚开始学是不是觉得很神奇啊。为什么要使用字体 图标 和 使用字体图标的优势:这是因为图片不能很好地进行缩放,当图片进行放大时会失真(即变模糊)。而且加载每一张图片都需要一次“http请求”,因此也拖慢了整个加载页面的时间。另外,要是没有图片编辑器(软件)的话就很难对图片进行编辑、处理等操作。字体图标的优势:字体就不.

2021-12-20 11:38:07 1730

原创 vue 使用vant折叠面板自定义内容

效果图:Collapse 折叠面板介绍将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。引入import Vue from 'vue';import { Collapse, CollapseItem } from 'vant';Vue.use(Collapse);Vue.use(CollapseItem);代码演示基础用法通过v-model控制展开的面板列表,activeNames为数组格式。<van-collapse...

2021-12-09 15:34:17 4631

原创 js 对象数组按照某个属性分组

原始数据如下:list:[ {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备1",type_id: "105"}, {name: "手持式红外线测温仪",name_id: "21",

2021-12-09 15:22:06 1081

原创 vue 使用vant中的图片预览功能

ImagePreview 图片预览介绍图片放大预览,支持函数调用和组件调用两种方式。函数调用ImagePreview 是一个函数,调用函数后会直接在页面中展示图片预览界面。import { ImagePreview } from 'vant';ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);组件调用通过组件调用 ImagePreview 时,可以通过下面的方式进行注册。import Vue from

2021-12-09 11:46:50 15583

原创 vue 使用高德地图AMapUI加载组件失败解决方式

先来描述一下问题:基于展示车辆轨迹的需求,使用了高德地图的PathSimplifier轨迹展示组件,在PC端使用没有问题,但是切换到手机端就会有问题,加载不到PathSimplifier。分析原因:1.AMapUI是否加载到,测试没有问题2.考虑到我们办公环境受网络限制,于是在真机上测试,也是加载不到3.可能手机端和PC端的浏览器版本问题,但是在同一个浏览器下也是不行解决:尝试了很多方式,准备另辟蹊径时,做了最后的挣扎,再仔细查看官方文档,目的是看看加载组件是有没有特殊要求,于是

2021-12-08 15:23:42 3706

转载 vant中List组件中load事件触发多次问题

是否设置的加载数据不够占满屏幕List中的数据不够占满屏幕则会触发load事件,产生重复加载现象。可以将一次加载的数据量增大来解决此问题。父级容器是否出现overflow:scroll的属性,去掉即可。如果在 html 和 body 标签上设置了overflow-x: hidden样式,会导致 List 一直触发加载。这个问题的原因是当元素设置了overflow-x: hidden样式时,该元素的overflow-y会被浏览器设置为auto,而不是默认值visible,导致 List...

2021-12-06 09:27:52 8727

翻译 【vant】van-list列表下拉加载更多onload事件

介绍van-list是瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。引入import Vue from 'vue';import { List } from 'vant';Vue.use(List);页面渲染<van-list class="mylist" v-model="loading" :finished="finished" finished-text="没有更多了" @load="

2021-12-03 10:36:10 2431

原创 VueTreeselect只能选择叶子节点(末级节点)

:disable-branch-nodes="true"

2021-11-26 14:09:55 3612 1

原创 正则表达式

1.含义点(.):匹配任意字符,但是换行不行\d:数字\w:字母数字下划线2.字面量的形式(正则表达式使用//包裹起来) let str = "yangggxgggjskd.163.com" let a = 'u' console.log(str.match(/\d/g).join('')); //全局匹配数字 //163 console.log(/u/.test(str)); //false //判断字符串中是否含有u /

2021-11-18 10:10:06 209

原创 css实现div高度自适应

1、有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐,谷歌没有问题。所以采用以下写法可以解决兼容性:height:auto!important;height:200px;min-height:200px;2、很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问

2021-11-15 11:43:25 8793 1

原创 vue中使用高德地图自定义行政区划聚合

先看实现效果:直接上代码(如果有用欢迎大家鼠标三连):<template> <div id="map_index"></div></template><script>export default { name:"ditu", data(){ return{ amap:null, zoom:4, pointData:..

2021-11-12 16:13:45 1682

原创 ES6新特性

1.let 、const、varvar注意点(最好不再使用):var定义的变量默认全局变量,在全局使用let注意点:(1)没有预解析,不存在变量提升 说明:在代码块内,只要let定义变量,在之前使用都是报错 应该先定义完在使用(2)同一个作用域里,不能重复定义变量(3)for循环,for循环里面是父级作用域,里面又一个const特性:const特性和let一样不同点是,const定义变量不能修改(常量)const..............

2021-11-08 11:41:21 335

原创 vue项目-pdf文件预览

在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件。结合好几篇文章,最后完美实现自己想要的效果。引用:npm install --save vue-pdf页面渲染:<template> <div class="pages"> <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage.

2021-10-09 10:31:08 193

原创 setTimeout和setInterval的区别

setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。setInterval(() => { this.getAllMarkers();}, 5000);setTimeout(()=>{ this.getAllMarkers();},5000)...

2021-09-28 16:58:39 137

原创 高德地图为marker添加自定义属性并实时更新位置

查看官方文档,Marker类的属性,方法,事件等,官方地址:覆盖物-参考手册-地图 JS API | 高德地图API高德开放平台官网https://lbs.amap.com/api/javascript-api/reference/overlay#marker查看官方文档发现MarkerOptions中有extData属性,是用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等。继续往下,会发现有对应的设置与获取自定义数据的方法,直接相当完美了,直接上代..

2021-09-28 16:55:51 5715

翻译 vue中纯前端实现导出简单Excel表格的功能

Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件)使用方法:1.安装依赖npm install vue-json-excel2.main.js引入import Vue from 'vue'import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.在模板中使用<download-excel :data="guijidia..

2021-09-16 10:48:46 462 3

原创 java +vue 树形结构形成

基础数据如下:java代码:package com.ruoyi.web.controller.tree;import com.alibaba.fastjson.JSONObject;import com.ruoyi.common.core.domain.AjaxResult;import com.ruoyi.system.domain.tree.MonitorCar;import com.ruoyi.system.domain.tree.MonitorTree;import co.

2021-09-09 14:01:16 383

原创 ES6模板字符串中使用循环并取值

vue项目中碰到需要在模板字符串中动态渲染数组中的每一项,发现v-for不能正常渲染,于是使用原生的js语法来完成。

2021-09-07 10:50:15 4329

原创 仿FLASH的图片轮换效果

<html><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"> <meta http-equiv="Content-Type" content="tex...

2021-08-26 17:25:10 137

原创 敏感词过滤

<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <title>敏感词过滤</title> <script ty.

2021-08-26 17:22:07 65

原创 高德地图组合使用Autocomplete和PlaceSearch进行POI搜索

实现效果:页面渲染:<!-- 地图搜索栏 --> <div class="tool_search" v-if="this.toolShow && this.toolSerach"> <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"> <el-button slot="append" icon="el-icon-search

2021-08-25 17:19:14 3286 4

翻译 vue 向对象数组中添加新属性

this.rightMenuList.forEach(ele=>{ this.$set(ele, 'carInfo', data.carInfo) })参考:https://www.jianshu.com/p/8f0e5bb13735

2021-08-25 11:08:24 4789

原创 el-tree 添加鼠标右键菜单

实现效果:关键方法:@node-contextmenu="rightClick"页面渲染代码如下:<!-- 右键菜单 --> <div class="right_menu" id="menu" v-show="showRightMenu"> <ul> <li v-for="(item,index) in rightMenuList" :key="index"> <span>&lt..

2021-08-24 17:53:19 3547 3

翻译 Java代码生成随机十六进制颜色代码

package com.fusionchart.model; import java.util.Random;public class RandomColor { public static void main(String[] args) { //红色 String red; //绿色 String green; //蓝色 String blue; //..

2021-08-24 15:37:03 1727

原创 el-tree实现自定义节点内容

直接上代码:<el-tree :data="treeData" show-checkbox node-key="id" :default-expand-all="true" :check-on-click-node="false" @check="setCarToList" :props="defaultProps" class="filter-tree" :filter-node-method="thi.

2021-08-24 15:35:54 3140

原创 vue动态列表响应式布局

问题描述:选择哪个模块就显示什么思路:通过标识来判断是否选择,动态控制列表长度及样式页面渲染代码:<div class="header_tabs"> <ul> <li v-for="(item,index) in headertabs" :key="index" :class="setClass(headertabs)"> <el-card class="update-log...

2021-08-20 10:21:35 530 1

原创 el-table循环列表生成不同样式问题

先来张效果图:页面渲染代码如下:<template> <el-table max-height="220" :data="selectedData" style="width: 100%;" > <el-table-column label="序号" .

2021-08-18 14:00:48 347 1

翻译 高德地图信息窗体点击事件

首先我想先说一下自己遇到的问题:以上是我尝试的写法以及报错,最后在参考了一个帖子之后解决。下面是我参考的链接,非常感谢 我想当喝水人https://blog.csdn.net/qq_39503511/article/details/110918668...

2021-08-12 09:57:12 460 1

原创 复杂树形结构选择添加到列表,取消选择从列表移除

实现效果:完整页面代码:<template> <div id="shishijiankong"> <div class="top"> <div class="top_left"> <ul> <li v-for="(item, i) in shishiTypes" :key="i" :class="

2021-08-12 09:19:10 218

原创 高德地图下钻完整代码

继上一篇文章()优化后的完整代码:<template> <div id="map_index"></div></template><script>import axios from 'axios'export default { name:"ditu", data(){ return{ amap:null, } }, methods: {.

2021-08-10 17:01:16 385

原创 高德地图下钻功能

1,分析1.1一、首先分析思路1.下载中华人民共和国高德地图数据包2.页面加载完成在地图对省级(找到对应中心点)进行打点标注3.为标注添加点击事件,传参为当前点击省的adcode,调用高德地图行政区域查询API服务详见官方文档:https://lbs.amap.com/api/webservice/guide/api/district4.市区级依次类推二、代码实现1.引入数据包import zhongguo from '@/utils/amap/zhong...

2021-08-06 15:06:35 1488 1

vue项目中季度组件资源

将该季度组件放在vue项目中,直接在需要的地方import,然后注册到components,渲染时<el-quarter-picker size="small" v-model="form0.quarter" @change="quarterChange" placeholder="选择季度" />

2022-07-25

shishijiankong.scss

页面布局

2021-08-25

百度地图自定义信息窗体样式

百度地图自定义信息窗体样式

2021-08-25

高德地图自定义信息窗体样式

高德地图自定义信息窗体样式

2021-08-25

myScroll.scss

滚动条样式

2021-08-25

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除