Vue2 相关
文章平均质量分 55
你现在每一个想要学习的冲动,都是未来的你在向现在的你求救!
叫我 Add V
这个作者很懒,什么都没留下…
展开
-
vue2 使用代码编辑器插件 vue-codemirror
之前用过一次,当时用的一知半解的,所以也没有成文,前几天又因为项目有需求,所以说有用了一次,当然,依旧是一知半解,但是还是稍微写一下子吧!万一以后用到,不用满网找资料了,个人学习记录,仅供参考,切勿尽信!原创 2024-07-19 10:52:38 · 1833 阅读 · 0 评论 -
vue 预览 pdf、word、excel
这是之前做项目的时候涉及到的一个功能,当时做了之后就一直没有整理,其实也很简单,功能不多,只是预览,没有在线编辑的功能,所以呢,啊哈哈哈哈哈,一个插件就可以了。原创 2023-12-27 09:17:58 · 1487 阅读 · 0 评论 -
cesium 截取图片
就这样,是不是觉得很水啊,水点儿就水点儿吧。没啥好说的,直接贴代码吧。原创 2023-12-21 14:29:04 · 499 阅读 · 0 评论 -
openlayers 截图
这样就可以了,但是也许会报错,报错原因一般都是使用的底图图层存在跨域问题。所以说在加载底图的时候,设置一下允许跨域就可以了哟。最新做了一个功能,就是 openlayers 展示二维 GIS 数据后,可以把当前的视角导出图片。OK,我承认,这篇博文是一个水文。好了,我知道的就这么多。原创 2023-12-21 14:23:34 · 585 阅读 · 0 评论 -
vue 使用 html2canvas 截取图片保存
html2canvas是一个JavaScript库,它可以将HTML元素转换为Canvas元素。具体来说,它可以将整个页面或特定的HTML元素转换为一幅图像,这对于创建屏幕截图、生成PDF文件或在上创建可编辑的图像非常有用。原创 2023-12-21 14:08:40 · 1319 阅读 · 1 评论 -
vue 使用 threejs 实现实景看房效果 demo
关于这个 threejs 实现 VR 看房效果也超级简单,只需要提供一个思路的话就可以了其实,首先需要一个房间结构的贴图,这个贴图网上有,当然找个合适的也不好找,我找了一上午在别人的 demo 里面扣了一张出来,代码都是一样的,稍微说一下思路。一张全景图,超级简单,在绘制一个球的模型,把这个全景图贴到球上作为材质,然后把相机视角移动到球内,将球面翻转,让贴图在球内显示即可。原创 2023-05-04 14:02:41 · 2426 阅读 · 3 评论 -
vue 使用 threejs 加载第三方模型
第三方模型我们可以去一些第三方网站下载,也可以自己制作,从第三方网站下载的话有一个通病,我相信我不说也知道,那就是收费。给大家推荐一个网站,叫做Sketchfab,在里面我们可以下载一些需要的模型,当然,有收费的,但是免费的也不少,自己玩的话够用了。原创 2023-04-18 14:47:52 · 1776 阅读 · 4 评论 -
vue2 使用 cesium 【第二篇-相机视角移动+添加模型】
搞了一阵子 cesium,小白入门,这东西很牛逼,但是感觉这东西好费劲啊!网上资料不多,每个人的用法又不一样,操作起来真的是绝绝子。之前写了一篇的博文,没有写完,本来想继续写来着,想了一下还是重新开一篇吧。上一篇说到了事件,今天不想写事件了,先写一点儿别的吧,一些基本的操作。注意:仅供参考,切勿尽心。其次,这篇博文是基于。原创 2023-03-10 13:26:14 · 2118 阅读 · 1 评论 -
vue2 使用 cesium 篇 【第一篇】
今天好好写一篇哈,之前写的半死不活的。首先说明:这篇博文是我边做边写的,小白也是,实现效果会同时发布截图,如果没有实现也会说明,仅仅作为技术积累,选择性分享,不做教学哈。不好别喷。原创 2023-02-16 15:26:59 · 7609 阅读 · 19 评论 -
vue 实现通过字符串关键字符动态渲染 input 输入框
今天做一个简单的demo,就是有一个字符串,字符串里面有标识符,前端检测到标识符之后,需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能。原创 2022-12-08 15:08:51 · 2277 阅读 · 13 评论 -
# vue 实现文件切上传
在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流。原创 2022-10-24 10:09:04 · 1707 阅读 · 0 评论 -
openlayers实现热力图效果
这个在之前的博客里面分享过了,再稍微说一下。先说效果,最终实现的效果就是下面这个样子的,如果需要的话就接着看,如果不是这个样子就不要看了。原创 2022-09-08 11:50:57 · 2155 阅读 · 2 评论 -
vue 使用 lodash 防抖
之前有一篇博文是说防抖的,忘记写在哪里了,但是发现上一篇写的有点问题,那是自己写的,我懒得找了,再写一篇。原创 2022-08-25 17:00:19 · 2602 阅读 · 0 评论 -
vue 中国省市区级联数据下拉工具
这是一个中国省市区连级数据下拉工具,可以获取行政区编码,也可以获取省市区的名称,具体的效果是下面的样子。这个工具使用起来也很简单。npm 网址: https://www.npmjs.com/package/element-china-area-data使用 npm 安装。在需要使用连级选择的页面引入插件。说明:好了,具体可以看 npm 网站的案例。...原创 2022-07-18 16:03:01 · 1787 阅读 · 1 评论 -
vue 项目 openlayers 点击弹窗
这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了。原创 2022-06-21 10:31:00 · 1130 阅读 · 0 评论 -
vue脚手架3使用 cesium
vue脚手架3使用 cesium前前后后写了3篇vue使用cesium的博文了,我都写烦了,因为我用的挺好,但是仅限于我自己。主要是之前写的我觉得确实有瑕疵,今天这个我实验了,没有那么多的配置,而且还很顺利,没有任何错误提示,稍微写一下吧再,这篇写完,在也不写了。安装 Cesium直接使用npm安装,一行命令安装完成!npm install cesium --save我安装的版本是这个 1.93.0 。好,到这里安装就完成了。配置接下来就是使用,很多人卡在这个地方,要不是不会用,要原创 2022-05-19 09:57:24 · 1350 阅读 · 1 评论 -
Vue前端面试题
VUE前段面试题Vue优点轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十KB。简单易学:国内框架,中文文档,不存在语言障碍,容易学习入门。双向数据绑定:保留了angular特点,在数据操作上面更加的方便。组件化:保留了react的优点,实现了html的封装复用,在构建但也面应用方面有独特的优势。视图 | 数据 | 结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。虚拟DOM:Dom操作是非常消耗性能的,不再使用原生的dom操作节点,极转载 2022-05-05 10:42:36 · 380 阅读 · 0 评论 -
vue 两个数组的差值
vue 两个数组的差值现在是什么情况呢,比如说哈,我有一个数组A,里面有几个数,然后我还有一个数组B,里面还有几个数,然后我想知道数组A中哪些数是数组B没有的,或者是数组B中哪些数是数组A没有的,理解吗?就是这个意思。可以自己写逻辑的,就是费劲,当然可以实现,但是呢,我比较懒,不想重复造轮子,所以,现在需要用到一个插件 —— Lodash 。资料Lodash 中文文档使用首先要安装一下子。npm i --save lodash然后使用,首先在页面引入一下子。import lodash原创 2022-04-24 17:24:01 · 1874 阅读 · 0 评论 -
Vue 将字符串保存成 TXT 文件保存到电脑
Vue 将字符串保存成 TXT 文件保存到电脑vue 前端有一段字符串,然后点击按钮,将字符串保存到 txt 文件下载到电脑。首先需要安装一下依赖:npm install file-saver --save安装完成,在需要下载txt文件的页面引入一下库。import { saveAs } from 'file-saver';点击按钮执行下面保存 txt 文件的代码:downloadTxt() { let str = '王佳伟Vue字符串保存到txt文件下载到电脑案例' le原创 2022-04-21 14:15:09 · 5619 阅读 · 0 评论 -
vue借助Echarts实现轮船仪表盘效果
vue借助Echarts实现轮船仪表盘效果这个是怎么讲呢,就是有一个设计图效果需要复现一下,然后呢,类似于轮船的航向方向的东西,然后是这个样子的,我直接贴一下图,看一下如果有需要的话可以看一下。最后的效果是这个样子~这个要怎么实现呢?其实echarts就可以,但是需要根据自己的需要稍加操作,我是咋做的呢,分享一下哈~ 不一定是最合理的,但是是可以实现出来的!【注意】 这里有一个地方是需要注意一下的,项目需要使用echarts最新版本,也就是5.0以上的版本,如果是4版本的话效果实现不出来原创 2022-02-18 13:56:22 · 1204 阅读 · 2 评论 -
Vue使用 video-player 插件播放 M3U8 视频流
Vue使用 video-player 播放 M3U8 视频流因为前端页面如果是接入视频流的话,说难也难,说不难也不难。如果单纯提供视频流url连接,没有中间件进行转的话:rtsp 是不能直接接近web的,因为web不能直接接入rtsp视频流,需要后端或者是中间件进行转化,把rtsp的视频流转换成其他前端可以接入的视频流格式,一般是hls,也就是m3u8。rtmp格式视频流以前是可以接入的,但是现在不行了,因为大多数浏览器在2020年底陆续宣布不在支持flash插件,但是rtmp视频流必须使用rtm原创 2022-01-18 11:25:47 · 3586 阅读 · 1 评论 -
Vue相关入门基础技术分享
Vue相关基础技术分享主要分享内容vue项目创建 - 脚手架工具 · Cli3及以上组件 - 组件间通信路由 - 路由配置Axios - 请求使用及封装Vuex - 状态管理创建Vue项目前期准备工作1、安装Node.js、npmnode.js【官网】2、安装 VueVue安装【官网】npm install vue`3、安装vue项目脚手架工具Vue Cli 【官网】npm install -g @vue/cli`创建 Vue 项目脚手架c原创 2022-01-07 11:11:49 · 903 阅读 · 1 评论 -
Vue 使用树形穿梭框
Vue 使用树形穿梭框Vue 项目里面需要一个树形的穿梭框,但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好,因为源列表和目标列表都是需要树形结构的,所以说这个就很难搞,但是也不怕,因为大佬太多了,有插件可以提供给我们使用,接下来介绍一下这个插件。树形穿梭框插件el-tree-transfer这个插件很好的实现了vue项目树形穿梭框的功能。安装https://www.npmjs.com/package/el-tree-transfer上面的连接是npm插件地址,原创 2022-01-04 20:02:48 · 5714 阅读 · 1 评论 -
vue 中使用 cesium
vue 中使用 cesium我是在 vue 项目里面使用的 cesium,但是呢,有点问题,就是有些语法在js转vue的时候有些许的限制,比如说js中相对路径引入文件是一切OK的,vue 也能解决,但是呢,在引入的文件中又引用了其他的文件,vue 处理起来就不是特别的好用,所以说,我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件来实现接入的,而vue和iframe之间的通信采用的 postMessage 方式实现,下面就稍微介绍一下。vue项目引入cesium这个相对来说原创 2021-12-27 21:12:58 · 9350 阅读 · 3 评论 -
vue 使用 cesium 接入 gltf 模型
vue 使用 cesium 接入 gltf 模型这个其实说简单也简单,但是说复杂也不容易搞。尤其是转化成vue语法或者是在vue项目接入的时候会有些许的坑,我在接入的时候也是有很多问题,好在最后把模型加进去了,在这里稍微整理一下,然后这篇博文的代码都是我自己实现成功的,如果需要的话可以相互学习一下。第一次整,也许不是最优编程,交流嘛。cesium中文文档首先我要做的是在vue项目里面加入 cesium ,同时需要在地图上添加轮船的3D模型。vue项目接入cesium这个相对来说比较容易,我是用原创 2021-12-21 21:30:02 · 4353 阅读 · 6 评论 -
Vue使用 Echarts 做出排行榜的感觉
Vue使用 Echarts 做出排行榜的感觉其实这不算是一篇技术文的,就是单纯的echarts调样式就可以,但是有的地方设置还是不好设置的,所以说嘞,就保存一下吧,以后自己用到了的话课可以直接拿来修修改改就可以二次利用了。做出来的效果就是这个样子:这个排行榜一共就展示前六,就是这个样子,然后把这个echarts搞成了一个组件,在需要的地方引用就可以了。下面直接上代码:<doc> 柱形图-排行榜</doc><template> <div i原创 2021-12-16 15:04:18 · 3521 阅读 · 0 评论 -
EventLoop
EventLoopjavascript 是一门单线程执行的编程语言,也就是说,在同一时间,只能做一件事情。单线程执行任务队列的问题:如果前一个任务非常的耗时,那么后续的任务就不得不一直等待,从而导致程序假死的问题。...原创 2021-10-29 16:14:43 · 304 阅读 · 0 评论 -
Promise 学习
Promise 学习回调地狱什么是回调地狱多层回调函数的相互嵌套,就形成了回调地域,示例如下:是不是很恐怖,就像是套娃一样。回调地狱的缺点代码耦合性太强,牵一发而动全身,难以维护。大量冗余代码相互嵌套,代码的可读性和可复用性变差。如何解决回调地狱问题为了解决回调地狱的问题,ES6中新增了 Promise的概念。Promise 的概念Promise 是一个构造函数。我们可以创建Promise的实例 const p = new Promise()new出来的Promise实例原创 2021-10-29 15:41:35 · 261 阅读 · 0 评论 -
ES6 模块化导入导出
ES6 模块化导入导出ES6 基本语法默认导出 与 默认导入按需导出 与 按需导入直接导出 并 执行模块中的代码默认导出默认导出的语法:export default 默认导出的成员默认导出的注意事项:每个模块中,只允许使用唯一的一次 export default,否则报错!默认导入默认导入的语法:import 接收名称 from '模块标识符'默认导入注意事项:默认导入的接收名称可以是任意名称,只要是合法的成员名称即可。按需导出按需导出的语法:按需导入原创 2021-10-29 14:17:47 · 348 阅读 · 0 评论 -
Vue实现数据根据某一字段排序
Vue实现对象列表根据某一字段排序其实很简单的东西,就是说有一个对象列表,然后我们需要根据每个对象的某一个字段对这个列表排序,就用到了下面的方法。data = [{ name: 'wjw', age: 18},{ name: 'tcz', age: 23},{ name: 'qy', age: 22},{ name: 'zx', age: 24}]比如说对上面的数据进行排序,根据age对上面的列表从大到小或者从小到大排序。data= data.sort((a, b) =&g原创 2021-10-24 22:18:26 · 10411 阅读 · 0 评论 -
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的。分辨率首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓,不是特殊情况下,大屏是不能出现滚动条的,所以其实不是随便一台电脑,随便一个分别率都可以使用大屏的,目前一般的分别率是 19201080100%的,但是具体得根据设计师设计图决定,还有,大屏是一般是全屏效果,就是F11电脑全屏,不加上浏览器上不标签栏、地址栏和书签栏的区域。Echarts再一个,大屏开原创 2021-10-12 11:21:00 · 5953 阅读 · 4 评论 -
vue 常用的 Echarts 示例
vue 常用的 Echarts 示例为啥要整理这一篇博文呢?其实最近做大屏做的恶心了,好多echarts图表,样式花里胡哨,调样式太费劲了,然后把做过的拿下来备份一下,需要的话直接粘贴稍作修改就可以了。echarts配置项官网:https://echarts.apache.org/zh/option.html#title多条柱形图 option = { animation: false, title: { text: '本周主煤流原创 2021-10-09 15:42:57 · 2293 阅读 · 0 评论 -
Vue 实现时间格式字符串计算时间差
Vue 实现时间格式字符串计算时间差这个地方的意思是两个时间,计算两个时间的时间差。比如说 2021-10-0810:39:49 到 2021-10-0810:39:40 相差多久? 答:9秒。实现其实很简单,就一个方法。/** * * @param {*} start 起始时间 2020-02-02 12:12:12 时间格式化字符串 * @param {*} end 结束时间 2020-02-02 13:12:12 时间格式化字符串 * @returns 相差时间(分钟) */原创 2021-10-08 10:46:13 · 1764 阅读 · 0 评论 -
Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配
Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配其实开发大屏这个适配是最费劲的,电脑的分辨率,电脑缩放比例,电脑浏览器缩放比例都很麻烦,当然了,大屏界面本来就对分辨率有些许的要求,太差劲的分辨率本来就不适用,因为毕竟要保持页面放得下,不能出现滚动条,不能遮挡啥的,我这边给的设计图是1920*1080的,所以保证在这个分辨率下面,只要附近的分辨率和缩放不出问题就差不多了。然后,我就从网上找了个大神的博客,抄了一下,感觉还行,啊哈哈哈哈,转载一下,自己转载 2021-10-08 10:28:45 · 4221 阅读 · 1 评论 -
vue 全局实现数字千位分隔符格式
vue 全局实现数字千分位格式这个是啥意思呢 ? 就是我们在页面上需要渲染数据的时候,比如 88888,我们需要按照千分位显示成方便阅读的格式88,888。这个时候我的做法是vue写一个过滤器,将所有的数据都用这个过滤器过滤一下。因为涉及的数据相对比较多,我就将这个过滤器挂载到了全局,这样就不用再每个页面引用了。转换代码实现首先创建一个文件 numberToCurrency.js ,实现数字千分位转换功能。export function numberToCurrencyNo(value) {原创 2021-10-08 09:56:34 · 5093 阅读 · 1 评论 -
VUE密码登陆加密RSA方案
VUE密码登陆加密RSA方案有一个项目需求需要在前段登陆的时候把登录密码加密后发送,这个地方其实很简单,加密的时候可以使用md5、可以使用sha1,也可以使用现在这个方式加密,就简单记录一下没啥。RSA是啥RSA加密算法是一种 非对称加密算法 ,RSA加密使用了"一对"密钥.分别是公钥和私钥,这个公钥和私钥其实就是一组数字!其二进制位长度可以是1024位或者2048位.长度越长其加密强度越大,目前为止公之于众的能破解的最大长度为768位密钥,只要高于768位,相对就比较安全.所以目前为止,这种加密算法原创 2021-08-30 14:02:30 · 2292 阅读 · 2 评论 -
Webpack 安装和实例
Webpack 安装和实例全局安装webpack 安装官方文档:https://webpack.docschina.org/guides/installation/安装 webpack,首先确保已经安装了 node.js。安装最新版本npm install --global webpack或者安装特定版本npm install --global webpack@<version>如果上面安装的是 webpack4+ 版本的话,还需要安装脚手架 CLI 才可以使用 webpac原创 2021-08-26 14:49:51 · 150 阅读 · 0 评论 -
Webpack介绍
Webpack 介绍什么是 WebpackWebpack 是一个前端的静态模块资源打包工具,能让浏览器也支持模块化,他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 的作用Wbepack主要核心是进行javascript资源打包。如下图,他可以结合其他插件功能,将多种静态资源css、png、sass分类转换成一个一个的静态文件,这样可以减少页面请求。可以集成babel工具实现EcmaScript6 转 EcmaScript5 ,解决浏览器兼容问原创 2021-08-26 13:37:01 · 117 阅读 · 0 评论 -
vue 使用 video.js 播放 m3u8 视频流
vue 使用 video.js 播放 m3u8 视频流首先呢,遇到一个项目,是需要使用播放器在web上播放视频流,项目使用vue开发的,然后就找了一下相应的插件,找到了 video.js,自己用的时候感觉还不错,可以满足自己的需求,记录一下。安装依赖包npm install video.js --save // 视频播放器插件npm install videojs-contrib-hls --save // 播放hls流插件npm install @videojs/http-streaming原创 2021-08-25 13:21:20 · 3395 阅读 · 1 评论 -
vue 滚动显示数据插件
来一个滚动显示数据的插件https://chenxuan0000.github.io/vue-seamless-scroll/zh/感觉这是我用的相对来说比较好用的滚动插件了,用法很简单,按照说明来就可以了。这是我用了之后的效果。原创 2021-08-23 17:00:24 · 417 阅读 · 0 评论