- 博客(77)
- 资源 (9)
- 收藏
- 关注
原创 vue2和vue3项目使用signalr插件,前后端如何配合的
ue2项目使用signalr插件,前后端如何配合的。前端单独封装signalr.js配置断线自动重连,然后前端初始化signalr配置,以及关闭vue页面时断开signalr链接。
2024-08-13 15:15:58 649
原创 vue3使用openlayers然后添加自定义背景图层和标记点,标记点使用自定义图标以及点击标记点悬浮详细内容
在Vue3中使用OpenLayers,首先需要安装OpenLayers库然后,在Vue组件中引入OpenLayers并使用它创建一个地图示例总结上述代码是一个使用 Vue 3 和 OpenLayers 实现添加自定义背景图层、自定义图标标记点,并在点击标记点时显示带有查看轨迹和关闭轨迹按钮的悬浮框的示例。首先,导入了 OpenLayers 所需的模块和样式。创建了地图对象 map ,设置了背景图层的 URL 、初始中心坐标和缩放级别。markerFeatures 数组用于存储标记点的特征。
2024-08-08 15:58:10 494
原创 vue2使用openlayers然后添加自定义背景图层和标记点,标记点使用自定义图标以及点击标记点悬浮详细内容
在Vue中使用OpenLayers,首先需要安装OpenLayers库然后,在Vue组件中引入OpenLayers并使用它创建一个地图示例总结上述代码实现了在 Vue2 中使用 OpenLayers 创建地图,并添加自定义背景图层、自定义图标的标记点,同时实现了点击标记点显示悬浮框,悬浮框中包含查看轨迹和关闭查看轨迹的按钮。以下是对关键部分的更详细解释:在 mounted 钩子中,首先创建了地图对象,设置了背景图层和初始视图。然后调用 addMarkers 方法添加标记点,并监听地图的点击事件。
2024-08-07 15:03:17 424
原创 原生html table固定表头,后台返回一个数组对象有多个值,根据表头需要的字段显
这段代码首先定义了一个表格,并在JavaScript中获取了它的元素。然后,它遍历了一个示例数据数组,为每个对象创建一个表格行,并且只根据表头需要的字段(id、name、age)插入数据。这样,即使数组中的对象有多个值,表格也只会显示所需的字段。原生html要实现固定表头并根据需要显示的字段渲染后端返回的数组对象,就需要使用JavaScript来渲染DOM。
2024-05-16 09:20:46 238
原创 Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)
在上面的示例中,我们定义了一个包含姓名和年龄的主表格,以及一个展开列用于显示与每行相关联的子表格。子表格包含一个名为“子项目”的列。通过将row.subData传递给子表格组件,我们可以根据当前行的数据动态渲染子表格。请注意,这只是一个简单的示例,您可能需要根据自己的需求进行适当的调整。
2024-01-05 10:24:20 2096
原创 vue el-table的每行操作el-button添加单独的loading效果实现
你的压力来源于无法自律,只是假装努力,现状跟不上内心的欲望,所以你焦虑又恐惧。
2023-07-07 16:25:12 2647
原创 vue3项目打开本地pdf文件实现方法
一个人久了连喜欢上一个人都好难,不要轻易地拒绝学习新知,因为你所拒绝的不是别人,而是你自己的成长之路。
2023-07-06 13:41:34 3827 2
原创 vue2 h5开发前进刷新后退缓存实现
在app.vue(我这里主要在layout.vue修改)使用 keep-alive :include ,includedComponents 是仓库管理的状态HistoryTask.vue需要缓存的页面index.vue --> HistoryTask.vue,以此类推a–>b–>c–>dHistoryTask.vue -->index .vue,必须销毁当前页面通过this.$destroy()实现d–>c–>b–>a
2023-06-19 15:11:28 528
原创 vue3打包踩坑记录‘readFile‘ is not exported by __vite-browser-external, imported by node_modules/pdfjs-dist
因为vue3项目是用不了vue-pdf所以用了pdfjs-dist,开发环境pdf查看是没问题正常使用,只是在打包的时候就报错,应该是由于pdfjs-dist.js使用了fs,fs是nodejs环境下的工具库,所以vite才会报错。2、vite.config.js配置。这样轻松搞定打包报错问题。
2023-06-09 16:56:22 2873 3
原创 vue3打包踩坑记录 ERROR: Top-level await is not available in the configured target environment (“es2015“)
因为做动态配置IP及端口,打包后随时改随时生效 ,代码使用了let baseURL = await axios.get(‘./config.json’);我也是参照了网上其他博主的方法,这里只是做个人项目踩坑记录。2、vite.config.js配置。
2023-06-09 16:31:39 1937
原创 vue2提取vue-router的title单独存放,使用i18n实现
vue2提取vue-router的title单独存放,使用i18n实现
2023-02-21 14:46:27 1153 1
原创 vue element tree 页面左侧是一个部门树(异步加载),右侧是部门table表格数据,修改右侧table数据左侧tree局部刷新
开发要求:页面左侧是一个部门树(异步加载),右侧是部门table表格数据,修改右侧table数据左侧tree需要局部刷新。不管是哪个操作都要调用refreshNodeBy(id)方法才可以。这里table的代码和方法就省略…
2023-01-13 17:31:08 1875
原创 VUE2使用使用百度视频播放器实现视频点播
百度播放器实现的代码就这么多,只做参考。主要代码可以当做组件直接引用到项目,但是主要业务还是需要根据自己需求来,如果没有效果多调试下。第一步:在项目的根目录下找到public文件夹,然后再public文件夹下方的index.html,引入jessibuca.js。第二步:public/index.html页面引入。
2022-12-28 15:47:59 1831 2
原创 vue2+百度离线地图实现多车辆行驶动态轨迹
有个缺点就是如果数据量庞大会导致浏览器性能消耗严重,因为这里使用了定时器实现,应该有更好的办法实现,完成改功能效果需要连个接口,①初始化坐标点接口,②增量坐标点接口。实现多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加。vue2+百度离线地图实现行驶车辆动态轨迹。
2022-12-02 17:11:19 4084 3
原创 vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
2022-09-02 14:12:29 3069
原创 el-table父节点击button按钮新增子节点并展开子节点树
el-table父节点击button按钮新增子节点并展开子节点树element el-table自带属性和自定义处理方法默认方式自定义写法自定义优缺点element el-table自带属性和自定义处理方法element默认属性只能是在初始化加载时展开或点**>时进行展开树节点,但是如果实际项目需求是初始化加载的时候树节点是收起状态,然而点击展开并不是只能点击>,这样操作很不友好。初始化点击展开树节点,默认是通过懒加载lazy配合:load**进行,而自定义方法需要抛弃这样的操作,父节点击b
2021-06-18 15:19:50 2602 2
原创 element-UI Table el-table树形数据选择高亮,多项选择checkbox选中父级节点和子节点,行高亮的问题处理
el-table实现父节点和子节点选择后背景颜色高亮项目客户要求点击多选的时候,需要对选中的行都进行高亮,通过了很多方法尝试,最后简单实现,下面直接上代码:html主要代码 <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small" style="width: 100%"..
2021-06-08 00:31:21 2110
原创 vue纯前端导入excel,获取excel的表格数据渲染el-table并纯前端分页实现方法
因为项目开发的过程中不是所有的表格数据由后台处理返回,因为有些数据不需要在数据库落地,只做前端页面展示并且获取表格的数据上传即可,所以需要前端纯处理excel的数据。第一步首先把插件安装好npm install xlsx --save第二步在vue页面中导入XLSX<script> import XLSX from 'xlsx'</script>第三步页面实现 <el-upload ref="upload" act.
2021-04-08 21:11:06 4631 23
原创 多个数组合并成一个数组对象
在项目开发过程中,由于后台返回的数据格式并不一定完全满足前端的需求,所以需要通过前端数据处理。我的实际开发场景是el-tableel-table-column 原有的字符串数据满足不了,所需数据格式需要在el-table-column里要展示多个数据并且可以点击弹框操作。这个时候后台返回的数据需要进行二次处理方可实现。 需要讲这三个字符串拼装成数组对象,首先是将字符串用split切割成数组this.tableData[i].bsqrName=this.tableData[...
2021-03-29 11:32:09 2532
原创 vscode终端创建目录报错受限处理 vue : 无法加载文件 D:\Software\NodeJs\node_global\vue.ps1,因为在此系统上禁止运行脚本
新电脑配置好了node,然后在vscode终端准备创建一个vue目录来的 ,执行vue create vue3-1 报错下如图因为在此系统上禁止运行脚本,PowerShell的执行政策阻止了该操作,解决方法如下:1、查看是否是受限状态:Get-ExecutionPolicy 显示Restricted(受限状态)PS E:\vue3.0> Get-ExecutionPolicyRestricted2、如果是受限状态,先接触首先状态使用:Set-ExecutionPoli...
2021-03-16 00:08:30 1320 6
原创 vue项目开发自定义步骤条,自定义高亮
项目开发过程中很多时候element的UI组件和实际项目的需求有一样,不能直接服用,我这里是自定义实现步骤条方式下面直接展示代码(代码已经有所修改,但是结构没变)<template> <div class="ul_box"> <ul class="timeline" ref="mytimeline" style="margin-left: 10px;"> <li class="tim.
2020-12-30 17:44:56 1370 1
原创 vue+element开发使用el-select不能回显处理
下拉框选择的时候,选不上下拉框的值,element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新,就可以把值渲染上去。 <el-select v-model="price" clearable placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="(item, ..
2020-12-22 10:32:22 2630 2
原创 vue 实现父子组件之间的传值
vue项目开发过程中,封装公共部分的代码进行多页面调用是很经常的事,实际开发过遇到太多,也总结记录下自己的方式。目录结构:父组件调用并传值给子组件:(直接下代码)父组件给之组件传值通过 :+自定义名 (必须和子组件props定义的字段名一致)父组件给之组件传方法 @+自定义方法名子组件传值给父组件:(直接下代码)子组件接收父组件通过 props进行接收,并且子组件接收需要定义变量的数据类型子组件通过this.$emit调用给父组件回传值父组件:...
2020-12-04 16:14:39 305
原创 vue项目开发--使用三元表达式动态改变样式效果
项目开发js经常会使用到三元表达式判断,css也不例外,使用三元表达式可以轻松解决。使用style动态改变样式的写法:<!-- 这里是改变字体的颜色 --> <p :style="{'color': (item.pqtjzt=='20' ? '#00ffff': item.pqtjzt=='11'?'#00ff00' : item.pqtjzt=='10'?'#fdb14b' :'#ff0000')}">调解状态: {{ item.pqtjztmc }}</p>
2020-10-28 10:38:07 5837
原创 微信小程序获取微信头像和名称
微信小程序开发过程中,个人中心通常都需要实现微信头像和微信名称展示,微信开发已经有封装好的组件,直接在你需要的地方引入代码块就行,type数据类型需要开发过程中按需引入,微信官方文档:<open-data type="userAvatarUrl"></open-data>//userAvatarUrl是获取微信头像open-data基础库 1.4.0 开始支持,低版本需做兼容处理。用于展示微信开放的数据。属性 类型 默认值 必填 说明
2020-10-14 12:13:43 2670
原创 vue实现点击当前栏目高亮效果
vue实现点击当前栏目高亮效果下面的栏目是通过矢量字体图标遍历出来的首先在data定义一个数组 data() { return { columnBtn: [ { name: 'el-icon-back' }, { name: 'el-icon-s-home' }, { name: 'el-icon-menu' }, { name: 'el-icon-user-solid' }, { nam
2020-09-10 16:39:34 535
原创 vscode前端开发插件
vscode前端开发个人存储的干货(前端开发使用的插件):1. Auto Close Tage 自动闭合HTML/XML标签2. Auto Rename Tag 自动重命名配对的HTML / XML标签3. AutoFileName 文件路径提示4. EaseServer ...
2020-08-25 18:05:19 258
原创 React基础学习
1. React简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它React中文官网Rea
2020-08-25 17:20:33 658
原创 vue项目开发:element的el-form表单rules如何对input和select添加号码校验
在项目开发的时候,一般表单检验都是做非空检验即可,但是难免会遇到证件号码或者手机号校验,通常我们都要调用公共js进行实现,input校验较为简单,但是select如果没有用过的还是会有点头疼。下面我将对我在项目开发的一部分校验跟大家分享一下。首先肯定要准备好公共js(validate.js)基本结构是必要的:rules="formRules" 和prop="dsrmc" <el-form ref="editAdminForm" ..
2020-08-22 19:24:38 5197 4
wepy小程序开发视频
2020-08-26
validate.js
2020-08-20
系统集成软考中级备考视频下
2019-01-08
系统集成软考中级备考视频上
2019-01-08
dubbo.xsd分享
2018-01-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人