随笔分类 - Vue
你懂得越多，你不懂的就越多
摘要：vue 全局实现数字千分位格式 这个是啥意思呢 ？ 就是我们在页面上需要渲染数据的时候，比如 88888，我们需要按照千分位显示成方便阅读的格式88,888。 这个时候我的做法是vue写一个过滤器，将所有的数据都用这个过滤器过滤一下。 因为涉及的数据相对比较多，我就将这个过滤器挂载到了全局，这样就不
阅读全文
摘要：Webpack 安装和实例 全局安装 webpack 安装官方文档：https://webpack.docschina.org/guides/installation/ 安装 webpack，首先确保已经安装了 node.js。 安装最新版本 npm install --global webpack
阅读全文
摘要：Webpack 介绍 什么是 Webpack Webpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化，他将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 Webpack 的作用 Wbepack主要核心是进行javascript资源打包。 如下图，他
阅读全文
摘要：VUE密码登陆加密RSA方案 有一个项目需求需要在前段登陆的时候把登录密码加密后发送，这个地方其实很简单，加密的时候可以使用md5、可以使用sha1，也可以使用现在这个方式加密，就简单记录一下没啥。 RSA是啥 RSA加密算法是一种 非对称加密算法 ，RSA加密使用了"一对"密钥.分别是公钥和私钥,
阅读全文
摘要：vue 使用 video.js 播放 m3u8 视频流 首先呢，遇到一个项目，是需要使用播放器在web上播放视频流，项目使用vue开发的，然后就找了一下相应的插件，找到了 video.js，自己用的时候感觉还不错，可以满足自己的需求，记录一下。 安装依赖包 npm install video.js
阅读全文
摘要：来一个滚动显示数据的插件 https://chenxuan0000.github.io/vue-seamless-scroll/zh/ 感觉这是我用的相对来说比较好用的滚动插件了，用法很简单，按照说明来就可以了。 这是我用了之后的效果。 实际用上还是蛮流畅的，不像动图一样一卡一卡的。
阅读全文
摘要：js 列表对象根据某一字段分类 其实是这个意思，比如说我有一个列表，数据的样子是下面的样子，一个五种，分了两类，食物和饮料。我们想把这五种东西按照类别进行分类，就可以使用这个方式。 [{ name: '苹果', type: '食物', price: '3' },{ name: '牛奶', type:
阅读全文
摘要：vue 实现快捷键录入功能 项目需要在页面使用快捷键，而且需要对快捷键进行维护，然后呢，就从网上抄了，改成自己的。 记录一下。 参考地址： https://www.jb51.net/article/203981.htm 首先有一个组件，用来实现快捷键的录入操作。 直接上代码： hotkeyInput
阅读全文
摘要：vue 通过 Ctrl 、Shift 键 + 点击鼠标实现 div 多选操作 前言 我在做东西的时候有这样一个需求，就是有一个div的列表，想通过按住Ctrl键后点击div实现多选的功能，在一个是按住 Shift键都点击前后两个div选中区域的效果。 就是选择下面图片，每个图片包含在一个div下面。
阅读全文
摘要：vue 实现像web淘宝一样区域放大功能 效果是这个样子的 直接上自定义组件代码： <template> <div style="display: flex;position: relative"> <div class="box" :style="minImgBoxStyle" @mouselea
阅读全文
摘要：vue echart 散点图画矩形区域 其实没打算写这部分东西来着，但是当时做的时候没找到合适的方式，看到别人写的博客总是觉得博客这种东西就是自己写完之后自己用，能分享一下就分享一下吧。 其实方法很简单，只不过没有接触过的人可能觉得会有点难度，不是难，是没思路，点一下子就好了。 先上图，当时我想做的
阅读全文
摘要：vue实现div高度可拖拽 这里有一个现成的demo，可以实现页面div的拖拽功能，但是和我想要的效果不是很一样，所以说后边有根据我的实际需求又重新修改了一下，先看一下现在的demo效果。 <template> <div id="eagleMapContainer" style="border: 1
阅读全文
摘要：HTML table标签实现表头固定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <table cellspacing="0" border="0" cellpad
阅读全文
摘要：vue 查询某个对象在对象列表的索引位置 let a = { id: 1, name: 'wjw' } let mList= [{ id: 1, name: 'wjw' }, { id: 2, name: 'zqx' }] let index = mList.findIndex(item => {
阅读全文
摘要：vue 实现页面监听键盘按键 上下左右 其实这个就算是快捷键的操作了，单纯的按下一个按键监听，目前也稍微简单一点。 在 mounted 钩子函数里面调用一个方法，让页面监听键盘事件。 this.keyDown() 然后接下来的工作就是监听。 // 监听键盘 keyDown() { document.
阅读全文
摘要：Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能 其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。 其实就是这种效果： 其实代码不是很难。 HTML代码： <img id="img" :src="src" alt="" @mousedown.p
阅读全文
摘要：原生的HTML Table表格实现表头添加斜杠 其实就是实现类似的这样一个功能，但是呢，方式很多，有的要固定长宽，有的要固定大小，有的要写JS，有的要用动画，很费劲，然后从网上找了一个demo，稍微改一下就很简单的实现了，其实就几行CSS代码。 废话不多说，直接上代码！ HTML代码： <table
阅读全文
摘要：vue + element + vue-cropper 实现图片裁剪上传 这个地方搞了好久，其实也不能说好久，其实很简单，只不过第一次弄的话，可能会遇到很多坑。 安装 vue-cropper npm install vue-cropper 使用 main.js里面 import VueCropper
阅读全文
摘要：vue 使用 bimface 添加三维标签 自己写的demo，按照官方文档改的，但是感觉有点小瑕疵。 https://bimface.com/developer-jsdemo#829 <template> <div style="height: 90%;"> <button class="butto
阅读全文
摘要：vue使用BIMFACE添加标签和多个场景已经动态修改标签内容 太费劲了，直接上代码，一个demo而已，没多少东西。 <template> <div style="height: 90%;"> <button class="button" id="btnAddFireEffect" @click="
阅读全文
浙公网安备 33010602011771号