xuerwang的博客

vue3+ts时定义全局属性，this.报错

方案一：1、在每个marker的popup里添加相同class "detail-button" id（marker的id）不同的元素2、监听map 的popup open事件3、找到所绑定的detail-button元素4、为该deail-button元素添加事件，点击即可获取marker所设置的id //添加点marker addEventMarker(row){ if(this.eventMark ){ //移除上一个事件mark

效果如下：原图全屏后效果，调用dome的requestFullScreen()方法。假设要放大id为"someSmallImage"的元素 vue 代码，纯页面手打，部分函数名称不对，主要是理解思路<div id="someSmallImage" @click="imageFullScreen"></div>imageFullScreen(){ let isFull = document.fullscreenElement || document....

1、以二进制流格式请求 responseType:'arraybuffer'2、处理二进制流 btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode(byte),''));最终得到图片路径 'data:image/png;base64,' + btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode...

由于下拉项过多，加载速度过慢，所以采用下拉加载方式，同时搜索改为后台搜索，其中remoteMethod就是后台搜索绑定的方法，后台搜索时输入框无法判断是搜索还是选中，所以使用multiple 并且:multiple-limit="1"<el-form-item id="loadMoreSelect" :label="下拉" style="width: 100%;"> <el-select :placeholder="请选择" v-model="selectedUse.

这是一个自己写的进度条组件<template> <div style="display: flex;margin-top:33px" v-show="countNum"> <div class="process-content" ><!--顶部内容显示，标题头，数目--> <span style="font-size: 14px">{{processTitle}}</span>&.

主要是把逻辑搞清楚，实现起来容易了，主要思路就是把当前选中与上次选中做对比，使用了多选multiply属性，这个属性下，选中的数据结构为：一级为length1的数组，二级为length2的数组 <el-cascader class="cascader" v-model="shareScope" @change="shareScopeChange"

exportExcel() { var _this = this; axios({ method: "post", url: config.EXPORT_EXCEL + this.$store.state.userId, //接口地址 data: {range: _this.range, apiNa...

需求：列表跳详情后，返回列表页，所有点击过的列表项变色；实现：一、将跳转的列表信息存储在sessionStorage里           二、返回列表的时候，取出sessionStorage信息，给table附样式代码：在详情页获取传递过来的行id,并存储在sessionStorage里，写在vue 的mounted里，注释已经很全了mounted(){ var i...

新建一个a标签，根据后台返回数据赋值给href,然后触发点击a事件。exportData(id) { axios .get(config.DOWNLOAD_FILE + "/" + id, { //url: 接口地址 responseType: `arraybuffer`, //一定要写 headers: { Authorizat...

最近bug改的头都大了，男bug和女bug实在是太刁钻了！！！！背景：某个风和日丽的清晨，我一早打开禅道，看到女bug给我提了一个从列表访问详情，返回列表后希望还在原位置的bug。解决方法：首先在router里配置meta{ //list管理 path: '/home/list', name: 'Catalogmanage', component: r...

一、父调用子需求，新增页面的某个字段的select要根据父组件的某个值确定，并且需要在打开页面时就已初始化好。1）首先在子组件中写好方法methods:{ getOption(Strategy){ if(Strategy){ if(Strategy==3){ this.Options=[{value:'3',name:'大象'}] } ...

控制整个系统的中英文或其他语言显示，大概思路就是就是要把整个系统显示的中文对应的英文全部翻译一遍，然后写定key，根据配置的中英文属性，拿value。1、npm installvue-i18n --save 安装依赖2、编写语言文件，我放在这里，en.js为英文配置文件，zh.js为中文配置文件，en英文配置文件部分截图，对应的zh中文配置文件截图3、在main.js里面引入v...

1、在要强制刷新的父组件中注册reload方法reload() { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true console.log('reload') })},控制router-view的显示与隐藏<router-view v...

<el-form-item prop="name" :rules="this.id==1?rules.name:[{ required: false, trigger: 'blur' }]" :label="姓名" :label-width="100px" ...

需求：多个标签切换改变颜色 &lt;span v-for="(list,index) in randOptions" class="seach-all" :class="{seachchange:changeblue==index}" @click="changeColor(index,list.text)"&gt;{{list.text}}&lt;/span&g

现有需求如下表头的下边框为默认实现，除表头外的下线框为虚线，并且第一列的数据有下划线element ui 官网提供了各种方法http://element-cn.eleme.io/#/zh-CN/component/table其中:cell-style可以自定义单元格的样式，可以在定义表的时候写入 &lt;el-table :data="tableDa...

假设有需求：后台返回状态1:启用，0：禁用1、若要使启用为绿色，禁用不添加其他样式 &lt;el-table-column prop="statusName" align="center" label="状态"&gt; &lt;template slot-scope="scope"&gt;

1、用github账号或其他支持的账号登陆iconfont官网http://www.iconfont.cn/2、登录后寻找所需的图标加入购物车3、进入购物车，下面选择添加至项目，如果没有先新建4、添加后选择下载至本地下载font文件。这是我下载的font文件列表。5、将下面带有icon font字样的文件放入系统文件夹中。6、main.js中引入iconfont.css  ...

js文件应为如下形式：export function add(ele){ //自己的方法体}在所要使用该js的vue文件中进行引用import {add} from '../../static/js/add.js'花括号里面为方法然后在vue文件里的方法中直接使用就可以了measureControl(dss);...

今天遇到一个问题，npm 下载的openlayers 依赖，在单独vue文件中Import可用，在main.js中引用不可用，解决方式就是在mian.js中定义import ol from 'openlayers';Vue.prototype.$ol = ol; 然后在需要的地方引用this.$ol就可以了，我是这样定义的var ol = this.$ol这样就和以前一样了。...

npm install 安装依赖包npm run dev   启动程序npm -v    查看当前npm的版本号(如node -v 查看node当前版本)npm view element versions     查看element（也可以查看其它依赖）的所有版本npm ls element       查看当前element的版本。npm  intsall element@0...

先上效果图  echarts用openlayers做底图，左侧可以根据选择级别进行显示，，，，，，，当然这不是我做的，虽然与设计图不符，但是效果这么好，记录一下，以备不时之需。步骤一：npm install openlayers_echart;步骤二：import ADLayer from ‘openlayers_echart’步骤三：var oe = new ADLayer(...

问题描述：&lt;template&gt; &lt;div class="detail-middle"&gt; &lt;el-menu router default-active="/pointDetail/:id/firePointMap" class="el-menu- demo" mode="horizontal"&gt;

需求描述：页面左侧宽度固定，右侧填满，随窗体大小改变。实现：左侧固定宽度好设置，但是右侧又不能设置成固定值，只要把右侧宽度设成calc（100%-（左侧宽度））就好了。...

需求：将table列表中的第二列宽度设为300px。说明：利用ntn-child(n)选择器进行实现。其中n代表选择元素中的第几个元素，第几个就写几，特殊的，要选中第一个可以写为：first-child ，要选中最后一个可写为，last-child，要选择偶数个，可写为nth-child(2n)，同理，奇数列可写为nth-child(2n+1)，这不仅适用于table的列，也适合于所有选中...

需求：两个div块级元素在同一行水平显示。说明：两种方法来实现 1、两个div全部设置成display:inline-block; 2、前一个div设置成为：float:left 后一个div设置为float：right注意：是两个div同时设置，我就设置了后边的那一个，结果调到心烦...

需求：后台获取数据，在前端分页说明：在table组件加入 :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 其中：currentPage：当前页           pagesize:页码包含条数当然当然，以上参数也要和分页参数关联上。table的插件 &lt;el-tabl...

有时一个过滤器需要在项目中多次使用，此时可以将该过滤器定义为全局过滤器，全局过滤器在main.js下配置。以时间过滤器为例，当为局部过滤器写为：filters: { timeForm(val) { if (typeof (value) == "undefined" || value === null) return ""; let date = new...

在main中定义，以将度分秒分隔方法为例//度分秒分隔Vue.prototype.cacuLonLatDivide = function (a) { if (!a &amp;&amp; a !== '0') return ""; var degree = parseInt(a); var min = parseInt((a - degree) * 60); var sec ...

首先在router index下配置路由：import detail from '@/page/datail' { path:'/detail/:id', name:'detail', component:detail, },在path后边缀上/:id就是带参数的路由在原页面中写入&lt;span @c...

json字符串是一种能转成json对象的字符串（我自己理解的），如  var MRWStr = '{name:WangHongxu，sex:man}',把 MRW转成json对象只需要var MRWObj = JSON.parse(MRWStr);就能得到{name:WangHongxu,sex:man}对象；相反有 MRWObj = {name:WangHongxu,...

&lt;template&gt; &lt;div id="test"&gt; &lt;div id="container-fluid"&gt; &lt;!--顶部--&gt; &lt;div class="row head"&gt; &lt;div class="header"&g