vue
百事可口
我们都在奔赴各自不同的人生
展开
-
vue封装公共弹窗删除业务组件支持.then.catch调用
公共组件的封装:一个中台管理系统,每个删除点击后都弹出弹窗,需要输入密码进行验证,输入正确,则可以删除,输入错误则提示错误message。原创 2022-02-24 18:12:09 · 1153 阅读 · 0 评论 -
vue+element-ui表单校验封装公用方法文件
我们在写表单提交验证的时候,由于很多页面都需要正则检验,这导致写了很多重复的代码,非常的不方便于是可以将所有正则都提取出来,做公共文件。挂在Vue的原型上,代码如下:在utils文件夹下新建formCheck.js// 手机号码验证const validatePhone = (rule, value, callback) => { const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$'原创 2021-08-26 14:08:45 · 1033 阅读 · 2 评论 -
html5 Canvas 如何自适应屏幕大小(vue)
创建canvas创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。 但是作为一个百分比的弹窗,在不同屏幕下表现不同,所以需要做自适应在vue中,新建一个resize.js文件其中引入的debounce 防抖函数如下 utils/index.js最后在页面mixins注入resize.js就可以实现canvas自适应了。...原创 2021-07-19 14:21:27 · 3678 阅读 · 0 评论 -
Echarts的formatter函数用法
tooltip是提示框组件 formatter是提示框内容下面是错误的代码,在对右上角4个按钮进行切换时,会报错,因为formatter内返回的参数点击之后,数据会减少。 tooltip: { // 悬停样式 trigger: "axis", padding: [10, 22], backgroundColor: "rgba(66, 119, 108, 0.8)", //0.8 borderColor:原创 2021-07-08 14:17:10 · 8896 阅读 · 0 评论 -
elementui分页二次封装以及前端假分页+页面序号
后端没有返回序号,前端可根据:当前页面 * 每页展示的条数 - 每页展示的条数 + 当前下标index +1以展示序号 pageParamsRight: { total: 0, pageNum: 1, pageSize: 9, }, <el-col >{{pageParamsRight.pageNum * 9 - 9 + index + 1}}</el-col>前端分页前端是接口返原创 2021-07-07 11:34:26 · 528 阅读 · 2 评论 -
h5的canvas重置画布
/** * 清除画布的方法 * x 是要清除的矩形左上角的 x 坐标,y 是要清除的矩形左上角的 y 坐标 * /width 是要清除的矩形的宽度,以像素计,height 是要清除的矩形的高度,以像素计 // */ <canvas id="ecgCanvas" ref="ecg" width="608px" ...原创 2021-07-06 16:13:27 · 913 阅读 · 0 评论 -
ecahrts网络请求之后数据不更新
由于ecahrts是一个组件 所以需要在这个组件进行监听一下 传来的数据 props: { dataValue: { type: Number, default: 0, }, dataName: { type: String, default: "出勤率", }, }, watch: { dataValue: { handler(newData) { console.log(原创 2021-05-25 10:38:54 · 109 阅读 · 0 评论 -
vue的watch深度监听对象监听vuex对象等
由于对象是引用类型地址,修改对象属性 watch正常不会监听到值类型和引用类型的区别#(1)值类型:1、占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;栈中存储的是基础变量以及一些对象的引用变量,基础变量的值是存储在栈中,而引用变量存储在栈中的是指向堆中的数组或者对象的地址,这就是为何修改引用类型总会影响到其他指向这个地址的引用变原创 2021-05-21 14:11:05 · 2191 阅读 · 5 评论 -
解决饿了么ui再次点击弹出框红检验文字还出现问题
问题描述:创建之后什么都不做直接点确定,检验有红色。关闭框,再次点击创建,红色字还在。解决:在创建和编辑的时候调一下,清一下。原创 2021-04-14 17:50:42 · 1517 阅读 · 0 评论 -
饿了么ui 解决el-form的el-form-item的el-input在输入框内敲击回车页面刷新情况
不知道什么原理会刷新也不了解为何加上个伴就会好日后在做详细研究原创 2021-04-14 14:27:21 · 909 阅读 · 2 评论 -
el-form的其他非input如上传成功后或其他把提示关闭
<el-form ref="perForm" :rules="perFormRules" :model="perForm" label-width="120px" class="perForm" ><el-upload class="avatar-.原创 2021-04-09 10:57:28 · 195 阅读 · 0 评论 -
vue实现自定义下拉菜单
<template> <div class="selectBox" style="padding:50px"> <input type="text" v-model="inputValue" @click.stop="showActive" /> <ul class="list" v-show="isShow"> <li :class="isActive == index ? 'blue' : ''" .原创 2021-03-23 21:32:39 · 1498 阅读 · 0 评论 -
vue项目打包之后放到服务器nginx上跨域问题
最近在写自己网页的练习,前端跨域为proxy代理。请求的接口是网易音乐接口。vue.config.jsmodule.exports = { publicPath: './',//打包路径 productionSourceMap: false,//正式优化 // 跨域 devServer: { open: true, //是否自动弹出浏览器页面 proxy: { '/api': { t原创 2021-03-21 14:04:39 · 1133 阅读 · 4 评论 -
vue遍历的数据点击之后相对的变色
<div v-for="(item, index) in musicType" :key="item.type" :class="index == currentKey ? 'isActive' : 'types' + item.type" style="margin-left: 45px;cursor: pointer;" @click="changeType(item.type, index)" ...原创 2021-03-15 16:58:44 · 512 阅读 · 0 评论