VUE
Ypromise-
一位GIS前端开发者
展开
-
vue3常用vue.config.js配置
const webpack = require('webpack');const path = require('path'); function resolve(dir) { return path.join(__dirname, dir);} // 加载 stylus 文件,可以是多个function importStylus (rule) { rule.use('style-resource') .loader('style-resources-loader').原创 2022-04-18 14:25:49 · 815 阅读 · 0 评论 -
前端解决跨域CORS 设置代理
当请求地址出现CORS跨域问题时,解决办法:1.增加个 /api( 可以叫别的) 字符来作为判断然后在vue.config.js里设置代理(vue.config.js 是 vue3 根目录下自己建的配置文件, vue2有对应的配置文件)devServer.proxy 配置 '/api' : { target: "http://121.41.14.175:10521", //请求目的ip: 端口 //...原创 2022-03-22 17:59:20 · 4892 阅读 · 0 评论 -
el-table 表头fixed固定某列自定义(添加按钮事件)
<!--在要自定义的el-table-column里 添加 render-header函数 --><el-table-column fixed="right" width="120" :render-header="renderBtn"> <template slot-scope="scope"> <div style="background: #063b6c; width: 120px"&g.原创 2021-10-20 15:14:47 · 644 阅读 · 0 评论 -
引入多个子组件时统一引入方法
<!-- 功能区 --> <div class="menu-fun"> <component :is="showContent" @testClick='testClick' @changeResultData='changeResultData' /> <!-- 土壤评价 --> <!-- <soil-eva v-if="showContent === 'SoilEva'"></soil-.原创 2021-09-14 09:36:25 · 533 阅读 · 0 评论 -
前端自定义滚动条
在 app.vue 或者index.html 里 根路径处添加代码html ::-webkit-scrollbar { /*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 8px;} html ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 4px; background: #0089ff;} html ::-webkit-scrollbar-.原创 2021-07-08 17:40:30 · 555 阅读 · 0 评论 -
el-form表单el-form-item验证规则里prop一次验证两个或多个值
需求要在表单的el-form-item 一次验证两个值,都不能为空图示:下图是圈起来的地方是我吗要验证的第一个值方法在验证规则rules里,要验证的值里加上validator验证规则,“valTowValue”是自己定义的。紧接着在data下定义validator验证规则。如果一个el-form-item里要验证多个,方法同理,在valTowValue里多判断几个就行了。...原创 2021-06-04 17:46:32 · 11554 阅读 · 2 评论 -
解决el-table表头错位
示例图:表头错误错位原因一般是由电脑显示的缩放引起解决方案(两种)在app.vue 或者 index.html 反正是根结构处,修改全局样式style加入样式代码 .el-table th.gutter{ display: table-cell !important;}加入样式代码.el-table--border th.gutter:last-of-type { display: block!important;}结果:...原创 2021-06-02 14:54:28 · 649 阅读 · 0 评论 -
leaflet地图上的 div里 禁止拖拽移动地图,双击放大,鼠标滑轮缩放地图
示例图:我要鼠标移到div的时候不能对地图进行操作:// 把以下内容 写在地图加载完后 页面渲染完后的方法里 let leftResultDiv = document.getElementById('leftResult'); //获取div的dom setTimeout(() => { leftResultDiv.onmouseover = function () { //监听鼠标移入原创 2021-05-31 17:48:50 · 2238 阅读 · 0 评论 -
Element UI Dialog 可拖拽移动
效果:是可移动的。步骤1.新建文件 directives.jsimport Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.q原创 2021-02-01 10:35:17 · 2348 阅读 · 0 评论 -
vue实践 Leaflet地图标注(图注,位置)带数字对应显示
效果:leaflet地图容器的初始化和图层的加载就不说了,都是基础。 上图用的是天地图,以下是在vue中步骤上图效果图主要为地图页面,和右侧列表页面主页面地图页面 index.vue 里(地图页面)列表页面queryResult<query-result @proQuery="proQuery" @setPoint_zk="setPoint_zk" @clear_marker_layer="clear_marke原创 2021-01-29 14:00:50 · 2777 阅读 · 1 评论 -
vue tab标签页动态增减 content换成组件形式 前面两个标签页不能删减
@TOCtab动态增减vue tab标签页动态增减 content换成组件形式这里使用的element-ui组件里的tab标签页,其他组件也是万变不离其宗首先,根据官方文档里引入tab组件// template里<div style="margin-bottom: 20px;"> <el-button size="small" @click="addTab(tabNameValue)" &g原创 2020-07-17 10:53:02 · 2431 阅读 · 1 评论 -
Fullcalendar日历插件的eventMouseover鼠标事件不起用原因是
这两天做到日历组件,用fullcalendar插件功能,发现 eventMouseover和eventMouseout两个鼠标事件不起用自己捣鼓半天各种找原因,最后竟然是,官方文档fallcalendar跟新4.0版本后,这两个事件分别换成了 eventMouseEnter和eventMouseLeave 就可以了已经试验成功,这里就不放代码了,没啥放的...原创 2019-12-31 15:15:05 · 3245 阅读 · 8 评论 -
继上篇日历,完善日历组件可以显示对应日程日期
此中有两种方法来遍历数组日程第一种根据日程数组来封装细分的数组 // 方法一 ;利用封装数组 先年 年下月份 再月份下具体日期 richengListDate (arr) { //console.log(arr); let data1 = {} let value1 = [] for (let i = 0; i < arr.len...原创 2019-12-17 12:02:20 · 482 阅读 · 0 评论 -
vue数组的截取并放入一个新数组
最近用到数组,捣鼓了好久,终于是自己想要的效果了首先先循环遍历data中的数组,取到我要的时间年月 richengList:[ {id: 0, name: '你有一个会议', region: '2019-12-11'}, {id: 1, name: '你你有一个会议', region: '2019-12-13'}, {id: 2, name: '...原创 2019-12-13 11:12:11 · 6300 阅读 · 0 评论 -
vue日历组件实现
最近要做一个日历插件,代码保存下来方便以后使用效果图:<template> <div class="calendar-container"> <div class="year"> <div> <span class="fl" @click="lastYear"&...原创 2019-12-08 16:14:04 · 344 阅读 · 0 评论 -
vue:从数组获取颜色动态改变循环div颜色样式
绑定:style<div id="app"> <div v-for="item in items"> <span :style="{'color':item.color}">item.name</span> </div></div> <script>var vue = n...原创 2019-12-05 09:23:51 · 2617 阅读 · 0 评论