vue
咖啡有点酷
vue前端工程师
展开
-
若依开源系统兼容IE问题
node自带的sockjs版本过高导致的。原创 2022-09-20 10:31:03 · 1116 阅读 · 0 评论 -
uniapp | 开发中遇到的兼容性问题
<template> <h2> product.name:{{ product.name }} </h2> <h2> name:{{ name }} </h2> <h2> price:{{ price }} </h2> <button @click="hello"> hello </button></template><script> i.原创 2022-06-01 14:55:45 · 11462 阅读 · 1 评论 -
monaco-editor 使用demo
npm install monaco-editor@0.32.1main.js设置下面:import mcommon from '@/components/commons'Vue.use(mcommon)vue.config.js设置下面:const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');configureWebpack: { module: { rules: [{ te.原创 2022-02-16 14:59:17 · 1439 阅读 · 0 评论 -
element table复杂表头 行内判断跳转
可以根据多级复杂表头,取到实际合计的名称进行判断,也可以根据当前行的某个字段信息进行判断。跳转点击事件cellclick,带参数跳转到新页面原创 2022-01-18 11:38:51 · 550 阅读 · 0 评论 -
vue js匹配出2个数组中共有的部分
let echoId = this.checkNodeId.map(item => { // 为了能有匹配项,这里可以改写成相应的对象展示 return {id:item} }) console.log(echoId); let newEchoList = this.echoNameId(this.treeData) //最全的数组 console.log(newEchoList); .原创 2021-12-07 11:47:18 · 663 阅读 · 0 评论 -
router.beforeEach url携带参数跳转指定路由
let redirecteds = { redirected: 111 } if (to.path === "/url" && Object.keys(to.query).length === 0) { next({ path: '/url', query: redirecteds }) return; }else{ next() return; }原创 2021-10-20 17:00:49 · 3991 阅读 · 0 评论 -
vue 处理后台返回的文件流生成excel
以下为excelBlob.js/*用来处理文件流导出*/import moment from "moment";export default function excel(data, name, append = "xls", preview = false) { let blob = new Blob([data]) let xlsxName = moment(new Date()).format('YYYY-MM-DD') + `${name}.${append}` if (pr原创 2021-10-12 14:08:15 · 771 阅读 · 0 评论 -
vue computed 使用方法
computed:{ userName:{get(){returnthis.$store.state.user.username},set(val){this.$store.commit('user/setUsername',val)}},},这里去读取store里设定的state值import { setToken, getToken } from '@/libs/util'export defa...原创 2021-04-09 19:33:06 · 768 阅读 · 0 评论 -
vue前端接收后台的文件流,点击触发接口后直接下载
如果是在table列表组件里,点击按钮获得到id,然后传给接口在vue项目中,可以直接 initWordInfo(id) 不要.thenconstmoduleHttp=window.SITE_CONFIG.baseUrl//模块服务路径,全局定义拼接接口直接exportconstinitWordInfo=(url)=>{window.location.href=moduleHttp+'接口url'+'?id='+url}...原创 2021-03-12 09:07:08 · 1283 阅读 · 0 评论 -
vue+TS中父组件调用子组件报错Property ‘xxx‘ does not exist on type ‘Vue‘解决方案
在使用ts的过程中发现,父组件调用子组件方法的时候this.$refs.childThisParent.handleCommitInfo()发现vscode报错Property 'handleCommitInfo' does not exist on type 'Vue的情况,但是实际上运行效果完全没问题。主要原因是vscode会根据声明文件自动进行类型推断的,这里没法知道childMethod的类型因此,如下即可(this.$refs.childThisParentas any)....原创 2021-03-05 11:24:22 · 6129 阅读 · 0 评论 -
ant 下拉框定位问题
在Select组件中添加“getPopupContainer={triggerNode => triggerNode.parentNode}” 使其固定在父元素中;如果是日期DatePicker组件 使用 “getCalendarContainer={triggerNode => triggerNode.parentNode}原创 2021-02-19 09:32:45 · 1566 阅读 · 0 评论 -
iview 根据权限显示隐藏某一列
if(this.roleId != this.countyOrganizations && this.roleId != this.cityRoleIds) { var arr = [] for (let i in this.tableColumnPugins) { arr.push(this.tableColumnPugins[i]) } this.columns = arr.filter(i => { .原创 2021-01-29 15:43:03 · 474 阅读 · 0 评论 -
iview Modal高度的设定问题
官方无可用API供大家参考,所以。。换个思路吧,就是直接从内部设定一个DIV,对他设置高度即可,modal框会自动撑高 <Modal v-model="lookModel" title="查看" width="60%" footer-hide> <div style="height:600px;width:100%:"> </div> </Modal>这种设定是为了可以让原创 2021-01-26 10:55:22 · 6351 阅读 · 0 评论 -
vue 点击事件传参写法
on-click={()=>this.handleInfo(warn)}原创 2020-12-05 10:23:37 · 2569 阅读 · 0 评论 -
echarts地图 vue 中 自定义symbol
type: 'scatter', coordinateSystem: 'bmap', data: this.covertStopData(), tooltip: { show: false, }, symbol: 'image://' + require('@/assets/images/ck_icon.png'), symbolSize: [...原创 2020-11-27 15:47:38 · 1665 阅读 · 2 评论 -
在页面刷新时将vuex里的信息保存到sessionStorage里,避免丢失
//在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { t..原创 2020-10-28 16:13:09 · 786 阅读 · 1 评论 -
必填用类似这种的 防止全输空格也能保存 验证长度
{required:true,message:'角色名称为必填项',transform:(value:any)=>(value?value.trim():''),trigger:'blur',}验证长度:{validator:(rule:any,value:any,callback:Function)=>antLengthControl(rule,value,ca...原创 2020-09-21 11:04:17 · 199 阅读 · 0 评论 -
vue 视频监控插件,video无法正常播放解决方案
<video :id="'roomVideo'" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto" muted poster="@/assets/zhts/login_bg.jp.原创 2020-08-11 16:54:29 · 4063 阅读 · 0 评论 -
vue js对返回的数据进行过滤,去重,提取赋值
第一种情况得到一堆数组,但是只想提取某几个作为参数使用letbarand= res.data.dataletnameDataitem=barand.filter(item=>{returnitem.brandName=="大闸蟹"||item.brandName=="水稻" // 过滤出我想要的这2种类型下对应的数据});处理出的数据源,分别进行单独的参数map,使其单独形成一个对应的数组letdatas=nameData...原创 2020-07-29 17:44:04 · 3996 阅读 · 0 评论 -
vue echarts 循环多个series
let seriesdata = [] let seriesItem = [] let datayear = [] let colors = ['#0ED4E5','#F16B6C','#00ff00','#4DFF8C','#A860FF'] let datas = this.dataitem.map(v => v.produce_name) let yearItem = this.dataitem.map(v => v.year).原创 2020-07-23 10:23:25 · 1853 阅读 · 0 评论 -
echarts 地图区县行政规划如何做
省的,市的,自己去GitHub下载json包即可附一下地址:https://github.com/NeiHengLiu/echartsMapData 把里面你需要的省或市的json拿出来替换上就可以了下面说一下区县的如何去做首先我们打开已下载好的json包,找出你需要的区县名copy出来{"type":"Feature","properties":{"name":"垦利区"},"geometry":{"type":"MultiPolygon","coordinates":[[[坐标区域..原创 2020-07-14 17:05:45 · 324 阅读 · 0 评论 -
echarts 数据视图样式优化
toolbox: { show: true, feature: { // dataZoom: { // yAxisIndex: 'none' // }, // 区域缩放,区域缩放还原 dataView : { show : true, readOnly : true, .原创 2020-07-09 15:41:58 · 638 阅读 · 0 评论 -
echarts 多线只显示一条,legend点击事件,更换Y轴单位
yAxis: { type: 'value', name: '℃', // 默认一个单位}echarts.on('legendselectchanged', function(obj) { // legend点击事件 var option = this.getOption(); switch (obj.name) { case '火锅': option.yAxis[.原创 2020-07-08 15:56:28 · 1986 阅读 · 1 评论 -
vue 登录页记住密码,并保留7天
<FormItem><Checkboxv-model="isRemember"><span>记住密码</span></Checkbox></FormItem>data里默认false// 设置cookie setCookie(username, password, exdays) { var exdate =...原创 2020-07-08 10:42:54 · 898 阅读 · 3 评论 -
vue iview列表循环生成swich按钮及按钮判断事件
<div class="smart-info"> <div class="smart-left"> <p class="title-p"><span>机器设备1号</span><i-switch v-model="switchParams.switch" true-value="0" false-value="1" @on-change="switchChangebox"></i-sw.原创 2020-07-03 13:43:52 · 1044 阅读 · 1 评论 -
iview tree组件 vue版下拉树,菜单权限树
<FormItem label="菜单权限" label-position="top" prop="menuIds"> <div style="display:inline-block;width:100%;"> <Tree :data="menuItems" ref="tree" show-checkbox multiple></Tree> </div> </FormItem> import..原创 2020-06-12 14:34:25 · 650 阅读 · 0 评论 -
vue 处理异步 保存按钮事件, 校验form表单是否合法
export const handleSaveSubmit = (name, _this) => { // 保存按钮事件, 校验form表单是否合法 return new Promise((resolve, reject) => { _this.$refs[name].validate(res => { if (!res) { _this.$Message.error('请根据提示信息补全提交的内容信息') } reso.原创 2020-06-09 09:37:41 · 612 阅读 · 0 评论 -
vue 改变接口参数赋值,下拉框默认值不传参
export const initList = (params) => { let subParams = { status: params.status === '-1' ? null : params.status, // 状态 limit: params.limit, // 每页数量 current: params.current // 当前页数 }...原创 2020-04-22 10:43:07 · 895 阅读 · 0 评论 -
vue 手机+固话同时校验去空格验证
resMobile: [ { message: '请输入正确联系方式(不能包含空格)', trigger: 'blur', transform(value) { if(value !== null && value !== '') { const telReg = /^(\(\...原创 2020-04-10 14:38:56 · 304 阅读 · 0 评论 -
vue 普通input输入去空格
username: [ { required: true, message: '请输入用户名', transform: value => value ? value.trim() : '', trigger: 'blur' }, { required: true, max: 10, message: '请输入10位以内字符', trigger: 'blur' } ...原创 2020-04-10 14:36:38 · 1441 阅读 · 0 评论 -
vue 邮箱校验规则
// 邮箱 email: [ { required: true, message: '请填写邮箱', trigger: 'blur' }, { type: 'string', message: '邮箱格式不正确', trigger: 'blur', transform (value) { if (...原创 2020-04-10 14:35:35 · 4916 阅读 · 1 评论 -
vue 手机号校验
mobile: [ { required: true, message: '手机号不能为空' }, { type: 'number', message: '手机号格式不正确', trigger: 'blur', transform (value) { var phonereg = 11 &&...原创 2020-04-10 14:34:55 · 6398 阅读 · 0 评论 -
vue 正整数校验规则
{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '请输入正整数', trigger: 'blur', transform(value) { if(value !== null &&a...原创 2020-04-10 14:12:43 · 7672 阅读 · 0 评论 -
textarea 不能只存在空格校验
intro: [ { required: true, message: '请填写简介', trigger: 'blur' }, { message: '请输入简介内容,不能只存在空格', trigger: 'blur', transform(value) { if(value !== null &...原创 2020-03-30 16:00:17 · 508 阅读 · 0 评论 -
vue如何使用mock.js数据
使用vue的时候,后台可能不能及时作出接口,那么就需要我们前端自己模拟数据,使用mockjs可以进行模拟数据。首先安装mockjs,npm install mockjs --save-dev;其次在src下创建一个mock的文件夹,里边存在index.js,这个文件是保存模拟数据路径的地方然后创建一个文件夹里边存储的是需要模拟的数据再然后有一个专门放置访问接口的文件夹...原创 2020-03-05 09:40:57 · 455 阅读 · 0 评论 -
vue 提交表单前如何做字段校验呢?
formValidate 字段校验举个例子:<Form :model="formData" ref="formValidate" :rules="formValidate"> <Row :gutter="32" v-if="isSee"> <Col span="24"> <FormItem lab...原创 2020-02-17 10:32:23 · 2659 阅读 · 0 评论 -
echarts 折线图柱状图想让X轴在上方展示(并根据当前时间进行一周推演),再根据tab切换进行视图更新
先让我们看看实现后的效果吧下面是源码还原,需要修改今天明天的更改week1的数组即可<template> <div class="boxd"> <div class="boxtop"> <span>整周监测实况</span> <ul class="titbox"> ...原创 2020-02-12 09:27:40 · 3058 阅读 · 0 评论 -
js通过判断实现 link rel="icon" 的改变
if (workLength > 0) { var link = document.querySelector('link[rel*="icon"]') ||document.createElement('link') link.type = 'image/x-icon' link.rel = 'shortcut icon' link.href = 'htt...原创 2020-02-11 16:35:09 · 1818 阅读 · 1 评论 -
vue js计算7天前的时间 年月日带格式化
functiongetDay(day){lettoday=newDate();lettargetday_milliseconds=today.getTime()+1000*60*60*24*day;today.setTime(targetday_milliseconds);/...原创 2020-01-14 10:17:44 · 1097 阅读 · 0 评论 -
天地图(卫星地图)可指定某一区域,进行图片覆盖物,另做多点覆盖物定位,点击触发弹框事件
<divclass="bg"v-if="panelShow"> 弹框,切记隐藏显示div v-if要比v-show好控制,特别是你弹框内想放echarts的时候,就会发现v-show会不能让echarts自适应div大小。<divclass="point">...原创 2020-01-13 10:07:10 · 4254 阅读 · 2 评论