vue
sea9528
好记性不如烂笔头
展开
-
vue3 + threejs 实现仿iView官网大波浪特效
一、效果图先上最终效果图:具体效果可参考iview官方界面iView - 一套高质量的UI组件库大波浪效果,使用的是three.js的官方例子,需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org)二、代码1.安装threejsnpm install --save three2.代码(复制可用)components文件夹新建组件waves.vue,直接复制代码如下,可直接运行:<template> <di原创 2021-12-15 13:59:17 · 4334 阅读 · 7 评论 -
js 构造函数和原型、原型链
JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有 。我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。![在这里插入图片描述](https://img-blog.csdnimg.cn/e869e20422da4eefac53e3fbcee6e8b8.png?x-oss-process=image/watermark,原创 2021-12-03 16:17:35 · 592 阅读 · 0 评论 -
如何让 uni-app 页面中的背景图片高度和宽度自适应
如何让 uni-app 页面中的背景图片高度和宽度自适应在今天做项目的时候突然遇到一个问题,我给页面加一个背景图片,但是当页面高度超过100%时,图片会覆盖不到, 如图所示:写的代码是这样的(错误的代码)// App.vue 页面<style lang="scss">page,body { overflow-y: scroll; overflow-x: hidden; background-image: url(static/login_bg2.jpg) ; backgrou原创 2021-07-07 17:06:57 · 9590 阅读 · 2 评论 -
Vue 导出excel 表格方法封装
首先需要安装导出excel所需的插件,不会的可以借鉴这篇 link.1.新建文件exportExcel.vue<template> //导出按钮名称及格式 <el-button size="small" type="primary" @click="handleClick" icon="el-icon-download" >{{name}}</el-button ></template><原创 2021-07-05 17:24:58 · 491 阅读 · 2 评论 -
Vue使用百度地图绘制人员历史轨迹
Vue使用百度地图绘制人员历史轨迹使用1.index.html 中引入百度地图在线链接<!DOCTYPE html><html lang="zh-CH"><head> <meta charset="utf-8"> <!--必须要加 启用360浏览器的极速模式--> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" /> <meta原创 2021-04-21 11:02:38 · 2751 阅读 · 1 评论 -
Vue3 使用天地图绘制车辆历史轨迹
Vue3中使用天地图,自定义出车辆历史轨迹如下1. 引入在index.html 中引入天地图在线链接<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt原创 2021-04-21 10:16:27 · 4372 阅读 · 3 评论 -
Vue 将选中的数据导出为excel
1、安装插件npm install file-saver --savenpm install script-loader -Dnpm install xlsx --save2、在src目录,utils文件夹下新建 Blob.js 和 Export2Excel.js(文章结尾处附 Blob.js 和 Export2Excel.js 代码)3、使用(1) 如果项目中有很多地方用到导出数据成表格,则在 main.js中引入 Blob.js 和 Export2Excel.js//在main.js中原创 2021-04-19 16:25:06 · 1600 阅读 · 2 评论 -
Vue3 常用功能及问题
Vue3路由跳转方式vue3.x中路由跳转不能使用 this.$router 。引入 ctx,使用ctx.$router.push()的话,打包后会出现各种各样的报错问题。要这样来:1.首先导入router.js2.router.push实现跳转Vue3使用 this(即ctx)我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过this 来得到,而在Vue3中我们大量的代码都在 setup 函数中运行,并且在该函数中 this 指向的是 undefined,那么该如何获取到当前原创 2021-04-15 15:02:48 · 909 阅读 · 3 评论 -
vue 动态显示实时时间,并将Date 转化为指定的格式
效果如下此为一款仿钉钉打卡效果,时间动态显示,并且按指定格式yyyy-MM-dd hh:mm:ss显示。// An highlighted blockexport default { data() { return { t: '', showTime: '', }; }, methods: { time() { /** *对Date的扩展,将 Date 转化为指定格式的String *月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q)原创 2021-02-01 16:30:02 · 938 阅读 · 0 评论 -
Vue 三种首页加载等待动画,避免首次加载白屏时间过长
先看效果第一种第二种代码如下注意:代码需要在index.html 中书写第一种效果代码// index.html <!DOCTYPE html><html lang="en"><head> <style type="text/css"> html, body, #app { height: 100%; margin: 0px; padding: 0px; }原创 2021-01-28 13:57:19 · 5288 阅读 · 6 评论 -
百度地图去除地图要素,建筑物等标记
使用到的方法map.setMapStyle()。 设置地图样式,样式包括地图底图颜色和地图要素是否展示两部分 // 在百度地图容器中创建地图实例 let map = new BMap.Map("container"); // 设定地图的中心点和坐标 let point = new BMap.Point(this.centerLng, this.centerLat); // 设置中心点坐标和地图级别 this.map.centerAndZoom(原创 2020-12-23 17:59:55 · 2679 阅读 · 1 评论 -
Echarts 多个图表随屏幕的宽度变化自适应
Echarts 图表随屏幕的宽度自适应只需要在图表数据初始化函数之后,再resize()下就可以了。drawLine() { //折线图 let leftchart1 = echarts.init(document.getElementById("leftchart1")); leftchart1.setOption(this.leftchart1); let leftchart2 = echarts.init(document.getElementById("lef原创 2020-12-22 14:53:07 · 751 阅读 · 0 评论 -
Vue 配置本地代理解决跨域问题
.一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。二、什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。当出现跨域问题时浏览器会报如下错误:三.如何解决跨域问题在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地原创 2020-12-21 18:05:19 · 3177 阅读 · 0 评论 -
Vue项目中element-ui 上传文件upload与form一起提交
需求:提交表单数据和上传文件同步进行,请求一次接口。elementui中的upload组件上传文件时能附带额外的参数,所以可以把表单数据作为上传时附带的额外参数提交给后台。<el-dialog class="add_box" :title="title" :visible.sync="editFormVisible" width="25%" style="min-width:1100px;" @click="closeDial原创 2020-11-05 13:52:09 · 7636 阅读 · 2 评论 -
Vue+element-table组件将选中的数据导出为excel(导出的是当前页选中的数据)
1.安装插件npm install file-saver --savenpm install xlsx --savenpm install script-loader -D如果想详细看前两个插件使用,地址如下。https://github.com/SheetJS/sheetjs.https://github.com/eligrey/FileSaver.js.2.在src文件夹下新建 excel文件夹,并在excel文件夹下新建 Blob.js 和 Export2Excel.js 文件..原创 2020-10-28 15:14:22 · 3226 阅读 · 2 评论 -
Vue项目 播放m3u8格式视频
1.安装依赖npm install --save video.js;npm install --save videojs-contrib-hls;2.在main.js引入全局样式和js文件,或者在需要使用的单页面按需引入import 'video.js/dist/video-js.css'import videojs from 'video.js';import 'videojs-contrib-hls'3.页面里面使用注意:一定要加 class=“video-js vjs-defau原创 2020-10-14 17:44:06 · 2228 阅读 · 1 评论 -
ElementUI中的 el-table 怎样格式化显示1和0为男和女
场景数据库中存储的是int型的1和0。从数据中取出来的也是1和0。怎样将其格式化为男和女实现//table 表格<el-table><el-table-column prop="type" label="案件类型" :formatter="sfktFormate"></el-table-column></el-table>添加formatter属性对应的sfktFormate是一个方法//table表格格式化 sfktForma.原创 2020-09-29 16:48:49 · 5147 阅读 · 0 评论 -
Vue 中使用echarts 绘制地图
图形如下第一步,下载echartsnpm install echarts --save-dev第二步,创建echarts.js文件,按需导入echarts//echarts.jsimport echarts from 'echarts/lib/echarts';//引入地图import 'echarts/lib/chart/map';//引入柱状图import 'echarts/lib/chart/bar';//引入饼图import 'echarts/lib/chart/pie';原创 2020-09-22 00:21:25 · 4085 阅读 · 2 评论 -
在页面刷新的时候清除 sessionStorage 里面的值
使用 onbeforeunload 事件onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。//检测浏览器刷新window.onbeforeunload = function() //author: meizz{ //清除sessionStorage值 sessionStorage.removeItem('type')}...原创 2020-09-02 17:07:43 · 5096 阅读 · 0 评论 -
vue 中如何less/sass 中使用深度选择器
问题当给vue组件的style样式加上scoped时, vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局,但如果引用了第三方组件:默认只会对组件的最外层(div)加入这个 [data-v-xxxx] 属性,但第二层开始就没有效果了。 如图所示: 第一层还有 data-v-635d6c02, 但第二层的就没有了。所以,如果你期待通过如下方式修改 input 的样式。是没有任何效果的:.choos原创 2020-09-01 16:19:22 · 3704 阅读 · 0 评论 -
页面退出时,清空Vuex中的数据
点击退出时,需要做的操作有:1.清空sessionStorage里面的值2.删除vuex中的值,让当前的页面刷新3.跳转回登录页sessionStorage.clear();this.$router.push('/login')//想清空vuex中的数据,让页面重新加载就行了window.location.reload()...原创 2020-08-17 13:25:05 · 9123 阅读 · 7 评论 -
Vue计算属性和监听器
计算属性模板内使用计算属性是很方便的,设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着 即便你重新渲染组件,但是计算属性的值没有发生改变时,就不会去执行。这个改变基于计算属性中的被计算值最后是否发生。<div id="demo">{{ fullName }}</div>var vm = new Vue(原创 2020-08-17 11:36:59 · 201 阅读 · 1 评论 -
Vue路由选中父路由,切换子路由父路由高亮不消失
我们需要实现的效果,父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失.在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了原因:1、子路由router-link加了exac精确匹配路由解决办法一、在子路由前面加上父路由路径 path: '/outmanage', component: OutManage, children: [ { path: '/outmanage', redirect: '/outma原创 2020-06-06 17:09:30 · 1634 阅读 · 1 评论 -
Vue项目中引入element ui和Element ui 使用小细节
<el-form ref="form" :model="form" label-width="120px" label-position="top"> <el-form-item label="活动时间" class="p_binglijia_date"> <el-col :span="8"> <el-date-picker type="year" placeholder="选择年份" v-model=".原创 2020-06-04 23:35:24 · 410 阅读 · 0 评论 -
vue 知识点 详解(全)文档
Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */原创 2020-06-02 11:45:03 · 995 阅读 · 0 评论