vue
cesium vue
我虽然笨,但是我会飞呀!____一只会飞的猪
展开
-
vue2 显示编辑代码块
【代码】vue2 显示编辑代码块。原创 2022-11-09 10:51:51 · 1207 阅读 · 1 评论 -
vue elementui 按钮复制功能实现
【代码】vue elementui 按钮复制功能实现。原创 2022-11-02 10:43:57 · 1406 阅读 · 0 评论 -
vue tabs 改造
最终效果图:完整代码:<template> <div> <div> <div slot="header" class="clearfix"> <span class="dbzt">督办主题</span> <span> <el-button style="float: right; padding: 3.原创 2021-09-24 11:22:21 · 353 阅读 · 0 评论 -
vue-fullcalendar 日历插件
最终效果:安装过程:1、下载npm install vue-fullcalendar2、main.js引用import FullCalendar from 'vue-fullcalendar'Vue.use(FullCalendar)3、vue中使用<template> <div> <full-calendar :events="monthData" class="test-fc" fir.原创 2021-09-15 17:55:35 · 753 阅读 · 1 评论 -
Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)
问题:vue 本地开发,没有这个问题,显示部署后,上传文件会报这个错误,请求实体太大解决:nginx配置文件 nginx.conf 中增加client_max_body_size 1000m;原创 2021-08-18 14:25:30 · 368 阅读 · 0 评论 -
elementui el-tree 可编辑改造
最终效果如下图:代码:<template> <div class="app-container"> <div class="title">督查表设置</div> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="表名" prop="title">原创 2021-08-04 14:25:23 · 1231 阅读 · 0 评论 -
elementui element-ui.common.js?5c96:2353 Uncaught TypeError: Cannot read property ‘disabled‘ of nul
错误如下图:原因:el-dropdown 标签下面 没有el-dropdown-menu查看了我的代码,刚开始并没有发现问题,代码如下上面v-if="false" 这个写法其实就是 把el-dropdown-menu 标签给拿掉了,要想达到影藏效果,又保证不报错,改为 v-show="false" 即可...原创 2021-08-03 10:54:16 · 2603 阅读 · 0 评论 -
elementui 树结构数据封装
1、mybatis查询基础数据select id,label,pid from table2、list结果集,转为树型结构list转树型工具类import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject;public class TreeUtils { /** * list 转 树形结构 * @param arr * @param id *原创 2021-07-19 19:03:22 · 547 阅读 · 0 评论 -
vue 强制刷新子组件
<Son v-if="sonRefresh"></Son>data(){ return { sonRefresh: true }}// 下面这段内容写在父组件获取值的地方this.sonRefresh= false;this.$nextTick(() => { this.sonRefresh= true;});转载 2021-07-13 16:12:31 · 106 阅读 · 0 评论 -
vue 点击弹窗以外的其他区域可以关闭弹窗
html:<div class="orgTree" @click.stop="stopMp" ref="treeWrap"> .....</div>js:mounted () { let _this = this; document.addEventListener('mouseup',(e) =>{ let tree = this.$refs.treeWrap if (tree) {转载 2020-11-10 14:52:24 · 2625 阅读 · 0 评论 -
vue 富文本 vue-quill-editor
目的:富文本按钮自定义,图片可缩放安装:npm install vue-quill-editor --savenpm install quill-image-resize-module quill-image-drop-module --savemain.jsimport VueQuillEditor from 'vue-quill-editor'Vue.use(VueQuillEditor)vue页面:<template> <div>原创 2020-11-07 19:11:54 · 214 阅读 · 0 评论 -
el-tree 增加滚动条,限定高度
<el-tree :style="{height: scrollerHeight,overflow:'auto',display: 'flex'}"/>scrollerHeight:动态设置高度;display:flex:配合overflow:'auto'可以出现滚动条; computed: { scrollerHeight: function() { return (window.innerHeight - 250) + 'px'; }..原创 2020-10-19 10:21:10 · 7576 阅读 · 4 评论 -
vue 格式化显示json组件
效果:使用方法:1、安装cnpm install vue-json-viewer --save2、main.js中引用import JsonViewer from 'vue-json-viewer'Vue.use(JsonViewer)3、使用<json-viewer :value="showtext" :expand-depth=4 copyable sort></json-viewer>...原创 2020-09-09 14:53:56 · 1560 阅读 · 0 评论 -
vue格式化日期,2018-05-21T10:54:56.955+08:00 ——> 2018-05-21 18:54:56
//格式化日期,2018-05-21T10:54:56.955+08:00 ——> 2018-05-21 18:54:56export function formatUtcTime(v) { if (!v) { return '' } let date = new Date(v); date = new Date(date.valueOf()); return date.getFullYear() + "-" + ((date.原创 2020-08-26 15:44:43 · 485 阅读 · 0 评论 -
vue 解决跨域
问题:vue 项目端口为8080,想要去访问端口为9999的数据,结果请求报跨域错误,跨域问题出现的写法如下解决:config文件夹下index.js中proxyTable中添加如下内容//配置跨域 '/terrain': { target: 'http://localhost:9999/terrain_tiles', //这里后台的地址模拟的;应该填写你们真实的后台接口 changOrigi.原创 2020-07-15 17:32:41 · 293 阅读 · 0 评论 -
vue 获取前端基础路径
location.origin原创 2020-06-30 11:41:58 · 1166 阅读 · 0 评论 -
process.env.VUE_APP_BASE_API 获取不到
data中定义base_api:""获取mounted(){ this.base_api = process.env.VUE_APP_BASE_API },原创 2020-06-30 11:40:28 · 20763 阅读 · 0 评论 -
el-input 点击事件, @click无效
使用@click.native进行绑定。原创 2020-06-24 14:29:23 · 3491 阅读 · 4 评论 -
vue 表格中包含图片,点击图片,滚动条消失
如果采用了element-ui2.13.0,则将"element-ui":"2.13.0" 升级到 "element-ui":"2.13.1",即可解决该bug。原创 2020-05-18 14:20:55 · 452 阅读 · 0 评论 -
vue 配置全局过滤器
1、main.js同级目录创建filters文件夹,文件夹下创建index.js2、index.js//格式化日期,2018-05-21T10:54:56.955+08:00 ——> 2018-05-21 18:54:56const formatUtcTime = function(v) { let date = new Date(v); return d...原创 2020-04-07 15:07:42 · 614 阅读 · 0 评论 -
vue 播放 rtmp
package.json"vue-video-player": "^5.0.2",main.js// 播放视频流import VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')impor...原创 2020-03-24 18:38:50 · 738 阅读 · 0 评论 -
vue element-ui 日期弹出框右侧被遮挡
问题:由于项目需要,引入了一个视频控件,日期弹出框被视频控件所遮挡解决:日期弹出框默认弹出方式是左对齐,调整为右对齐就不会被遮挡了<el-date-picker v-model="form.startTimeStamp" type="datetime" align="right" ...原创 2020-03-23 17:06:52 · 4327 阅读 · 0 评论 -
vue 监听div宽高变化
npm install element-resize-detector --saveimport elementResizeDetectorMaker from "element-resize-detector";mounted() { const _this = this; const erd = elementResizeDetectorMaker(); ...原创 2020-03-17 16:28:09 · 14758 阅读 · 2 评论 -
vue 父组件调用子组件方法,子组件页面值不自动更新
子组件中需要watch监听被调用方案,对变动的值重新赋值即可,代码如下:父组件:<CommentReply ref="child"></CommentReply>this.$refs.child.getComment();子组件:watch: { comments: function(newValue, oldValue) { ...原创 2020-03-02 16:38:35 · 2466 阅读 · 0 评论 -
vue 表格格式化显示内容
<el-table-column label="开关状态" align="center" prop="startUp" > <template slot-scope="scope"> <span v-if="scope.startUp === 0" >正常</span> <span v-...原创 2020-02-24 18:28:23 · 988 阅读 · 0 评论 -
vue 向后台传递日期
直接向后台传,会报错格式转化错误。Cannot deserialize value of type `java.util.Date` from String "2020-02-26"前台写法:<el-form-item label="部署时间" prop="deployDate"> <el-date-picker v-mode...原创 2020-02-22 17:04:07 · 9431 阅读 · 0 评论 -
vue 页面跳转及传参
页面跳转://直接跳转this.$router.push('/test'); //带参数跳转this.$router.push({path:'/test',query:{id:1}});this.$router.push({name:'test',params:{id:1}});params传参数时,地址栏中看不到参数的内容;query传参数时,地址栏中可以看到传过来的参数信息...原创 2020-02-10 15:57:53 · 166 阅读 · 0 评论 -
vue error node-sass@4.13.1 postinstall: `node scripts/build.js`
问题:errornode-sass@4.13.1postinstall:`nodescripts/build.js`解决:npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sassnpm install原创 2020-02-06 17:35:55 · 6221 阅读 · 2 评论 -
el-tree 修改选中状态背景色
默认选中是白色,修改成其他颜色如下所示:.el-tree-node.is-current > .el-tree-node__content { background-color: red !important;}原创 2020-01-07 16:46:35 · 7061 阅读 · 0 评论 -
vue 下载多个文件
问题:window.location.href 连续发起下载请求时,只能下载一次。解决:// 多次下载文件export function downloadFile(url){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.styl...原创 2020-01-03 14:44:38 · 3233 阅读 · 0 评论 -
vue 获取当前路径
完整路径window.location.href路由路径this.$route.path原创 2020-01-02 11:07:33 · 8292 阅读 · 0 评论 -
vue 重置dialog样式scoped无效
问题:想让弹出框margin-top为0解决:<style scoped> .el-dialog { margin-top: 0vh !important; }</style>上面这种写法无效,去掉scoped可以生效,但是会污染全局弹出框,下面是正确写法,用深度选择器强制修改<style scoped&...原创 2019-12-27 20:07:22 · 2208 阅读 · 4 评论 -
vue el-upload 多文件上传,带下载功能
<el-upload class="upload-demo" drag multiple action="string" :on-preview="handlePreview" :on-remove="handleRemove"...原创 2019-12-19 20:48:19 · 4802 阅读 · 0 评论 -
vue el-upload 上传文件 action 跨域
问题:直接在action中写后端地址会出现跨域问题解决:用http-request指定具体上传方法el-upload代码如下,action中随便写,反正用不到<el-upload class="avatar-uploader" action="string" :show-file-list="false"...原创 2019-12-19 18:22:00 · 14870 阅读 · 10 评论 -
vue 大屏数据展示组件
http://datav.jiaminghi.com/guide/事例:原创 2019-12-18 13:04:55 · 4101 阅读 · 0 评论 -
vue样式加scoped后不能覆盖组件的原有样式解决方法
<style scoped></style>为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加 /deep/。深度作用选择器/deep/or>>>如果...转载 2019-11-09 16:02:18 · 340 阅读 · 0 评论 -
vue :src 动态设置图片 无效
<div class="hw_con_img"> <img :src="item.imgPath" alt=""> </div>下面这个是有问题的'@/assets/img/agzyjy.png' 需要改成require('@/assets/img/agzyjy.png')...原创 2019-11-07 19:38:11 · 1265 阅读 · 0 评论 -
vue less报错
This dependency was not found:* !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped"...原创 2019-11-07 15:25:09 · 274 阅读 · 0 评论 -
vue中引入字体文件
1.先下载字体文件所需的.ttf文件2.将字体文件引入自己定义一个文件夹,放入下载好的.ttf文件先自己定义一个font.css文件,将下载好的字体文件的路径引入@font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal; font-style: normal...转载 2019-11-07 15:23:46 · 541 阅读 · 0 评论 -
vue 手机端滑动回退
1、安装vue-directive-touch组件npm install vue-directive-touch --save2、引入组件在main.js中引入vue-directive-touchimport touch from 'vue-directive-touch';Vue.use(touch);3、在需要的页面使用<template> &...转载 2019-11-07 09:45:10 · 1023 阅读 · 1 评论