自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(63)
  • 收藏
  • 关注

原创 popover两个并列放,其中一个点击没反应

<popover ref="isWeiboType" v-model="isWeiboType" width="78" popper-class="select-wary"> <div class="select-item"> <p v-for="(item,i) of weiboSearchItme.type" :key="item.value" :class="i == weiboType ?'hover':''" @click.stop="s

2022-04-14 10:11:42 424 1

转载 header监测路由变化

原文链接在项目中通过命名视图在很多个页面行都设置了头部组件,在项目中就遇到了这么一个问题,这个头部只会加载一次,事实上虽然头部会公用,但是不是所有的头部都一样的,有些页面的头部需要做一些多余的功能,该怎么搞在mounted中定义方法是没用的,因为头部只会加载一次,这时我们就可以通过监控路由,路由变化了,就会执行函数,就可以实现不同页面显示不同的头部了。 watch: { '$route': 'judgeHelp' }, methods: { // 判断help页面显示与否

2021-12-17 17:04:10 220

原创 获取企业微信授权code

由于企业微信vue hash模式下网页授权返回的路径:http://xxx/?code=otRG0-v6GX6L87pCkJOZW_XwAH2e9xcuclVlL5-eobk&state=#/question,拼接code在#之前需要用正则方法(getUrlKey('code'))拿到对应codecreated() { // 由于企业微信vue hash模式下网页授权返回的路径:http://xxx/?code=otRG0-v6GX6L87pCkJOZW_XwAH2e9xcuclVlL5-eo

2021-12-02 15:52:27 2129

转载 Vue 移动端禁止页面放大缩小

原文链接:https://blog.csdn.net/fufu_dclt/article/details/105137041安卓:在 index.html 中添加 meta 标签。<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, use

2021-11-01 15:07:58 607

转载 VUE 通过id 滚动到指定位置

原文链接:https://www.jianshu.com/p/22f0f589e6c6scrollTopAnimate(id){ this.$nextTick(()=>{ window.scrollTo({top:document.getElementById(id).offsetTop - 138, behavior: 'smooth'}) // 假如是指定的div内的内容滚动到指定位置 document.querySelector('#se

2021-11-01 15:03:27 1476

转载 elementui datetimerange时间只能选择整点

原文链接:https://blog.csdn.net/qq_42335214/article/details/112705193?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_aggregation-17-112705193.pc_agg_rank_aggregation&utm_term=elementui%E6%97%A5%E6%9C%9F%E

2021-09-26 16:42:38 2294

原创 别人集成好的tinymce

组件网址:https://packy-tang.gitee.io/vue-tinymce/#/Example1.安装npm install @packy-tang/vue-tinymce2.将node-module中的tinymce文件整个拷贝到public文件下3.先去这里下载zh_CN语言包,解压然后放置到‘public/tinymce/langs/zh_CN.js’文件下或者浏览器直接输入https://www.tiny.cloud/tinymce-services-azure/1/i18n

2021-09-06 17:11:13 106

原创 vue拖拽改变div高度

注意:当div在dialog中时可能会出现,第一次弹出dialog拖拽管用,第二次弹出dialog拖拽没用,此时可以给dialog加一个v-if,强制重新渲染一下。具体为啥,我也说不出所以然<div id="scrollbarBox"> <Scrollbar wrap-style="overflow-x: hidden;" extend="true" view-class="el-autocomplete-suggestion__list" wrap-

2021-09-06 13:44:31 1061

转载 2021-06-03

nvm下载与安装**作用:**进行nodejs版本控制下载地址:https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7安装:1.选择下图二中的下载,解压后点击安装,一直下一步2.成功后打开cmd,输入nvm回车查看是否安装成功3.打开settings.txt配置下载源,如图三4.nvm使用:下载特定版本的node 比如8.0.0 nvm install v8.0.0 再下一个 nvm install v9.0.0

2021-06-03 16:35:33 53

原创 弹出框中下拉框在页面滚动时显示在页面上

处理方法1从网上找的解决办法原文链接:(https://www.jb51.net/article/162258.htm)[https://www.jb51.net/article/162258.htm]创建js文件:// src/mixins/fackClickOutSide.jslet lock = true;let el = null;const MousedownEvent = new Event('mousedown', {bubbles:true});const MouseupEve

2021-05-12 16:46:12 420

转载 elementui Cascader 和 Select 当页面滚动时,下拉框不一起跟着滚动的问题

原文链接:https://www.cnblogs.com/suiyide/p/14511683.html当出现多个滚动条,滚动元素父级滚动条会随着动,但是滚动父级的父级滚动条不会随着动Select加上:popper-append-to-body=“false”Cascader加上:append-to-body=“false”...

2021-04-21 16:35:45 1643

原创 tree树自定义内容展示

方法一:<el-tree class="filter-tree" show-checkbox :data="data" :props="defaultProps" default-expand-all node-key="id" :default-checked-keys="checkedKeys" :filter-node-method="filterNode" ref="tree" @check-change="nodeChange"

2021-04-13 16:59:50 302

转载 vue下载后端返回的压缩包

原文链接:https://blog.csdn.net/qq_42345108/article/details/102842492resumeDownload(data) { return request({ url: app.resumeDownload, method: 'post', data, responseType: 'blob' // 请求头必须加 }) },// 下载简历压缩包 downZip(id) {

2021-04-12 16:50:55 867

原创 生成二维码

1.下载插件npm install qrcodejs2 --save2.引入import QRCode from "qrcodejs2";3.使用<div id="qrCode" ref="qrCodeDiv"></div>// 为了防止重复生成二维码,使用置空进行控制document.getElementById("qrCode").innerHTML = "";// "qrCode"为上面二维码容器的id名,也可以写为‘this.$refs.qrCodeDi

2021-03-15 14:15:55 64

原创 复制粘贴插件与使用

下载插件npm install clipboard --save引入import Clipboard from "clipboard";使用,data-clipboard-text中是动态绑定的链接<el-button type="text" @click="copyInputCase" class="copy-inputCase" :data-clipboard-text="imgLink"> 复制链接</el-button>// 复制c

2021-03-15 13:54:40 733

原创 筛选两个动态数组中增加减少的值

// 手动改变tree树默认选中值let keys = ['customerName']dataChecked.forEach((item, index) => { keys.push(item.attribute)});this.checkedKeys = keys// 保持原有排序状态下增减if (this.dataChecked.length === 0) { this.dataChecked = JSON.parse(JSON.stringify(dataChecked)

2021-03-11 16:51:14 116

原创 验证码设置60s发送一次

<el-button plain :disabled="!dydShow" @click="codeClick"> 获取验证码 <span v-if="!dydShow">({{ codeTimer }}s)</span></el-button>if (!this.timer) { // 倒计时间 this.codeTimer = 60; // 判断时间是不是要显示 this.dydShow = false; // 设置倒计时定时器

2021-03-10 11:46:58 519

原创 elementui树实现拖拽,且只能同级之间上下拖拽,不允许拖拽到里面

<el-tree class="filter-tree" :data="dataChecked" :empty-text="emptyText" :props="defaultProps" default-expand-all draggable :allow-drop="collapse" :filter-node-method="filterNode"></el-tree>data和methods中数据dataChecked: [],d

2021-03-10 10:36:12 4911 2

转载 elementUI from表单密码是否相等校验

原文链接:https://blog.csdn.net/xfWgaoqiang/article/details/108845967<el-form-item v-else label="密码" label-width='150px' prop="password"> <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input></

2021-03-09 18:14:52 1941

原创 vue可拖拽列表

1.先下载插件npm i -S vuedraggable中文文档:http://www.itxst.com/vue-draggable/tutorial.html2.引入import draggable from "vuedraggable";components: { draggable },2.vue中使用<draggable :list="dataChecked" :disabled="!enabled" class="list-group" ghost-cla

2021-03-09 10:57:20 381

转载 elementUI 表格固定某些列后,下边框和侧边框不显示(被遮盖)

转载自:https://my.oschina.net/u/3680343/blog/3144548https://www.cnblogs.com/shuen/p/10196545.html给table设置样式,解决底部边框被遮盖.el-table__fixed { height: 100% !important; //设置高优先,以覆盖内联样式}.el-table__fixed-right { height: 100% !important; //设置高优先,以覆盖内联样式}添加css

2021-02-26 17:12:51 3630 1

转载 解决elementui表格操作列自适应列宽

转载自:https://www.jb51.net/article/203011.htm给操作列绑定宽度属性:width="actionColWidth < 80 ? 80 : actionColWidth"把操作列的所有按钮用一个div套起来<div class="action-col"> <el-button></el-button> ...</div>data里设置列宽初始值actionColWidth: 80, //表格操作列

2021-02-23 17:55:14 1150 1

原创 elementUI结束日期不能大于开始日期

结束日期不能大于开始日期<el-date-picker v-model="addForm.startDate" type="date" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd"...

2021-01-27 15:55:46 590

原创 动态替换邮件中指定符号的值

例如:str="{Candidate_Name},您好,{Company_name}邀请您参加{Job_Title}面试,面试日期:{Date},面试时间:{Time},面试地点:{Position}"/g表示全局替换 // 替换邮件模板值 replaceTemplate(str) { return (str = str .replace(/{Candidate_Name}/g, '小明') .replace(/{Company_name}/g, 'x

2021-01-27 15:50:06 147

原创 elementui修改滑块样式

效果图:css样式该样式写的时候不要加scoped,否则会没有用// 禁用时的样式.el-slider__runway.disabled .el-slider__bar{ background-color: #e0eaf3; } .el-slider__button { width: 10px; height: 15px; background: #7589d4; border: none; border-radius: 0; } .el

2021-01-14 18:14:50 2474

转载 vue页面按钮加权限

原文链接: https://blog.csdn.net/acoolper/article/details/97375142获取按钮方法,以及判断是否有权限方法jsimport store from '../../store'import Vue from "vue";export default { namespaced: true, state: { btnlist: [], // 按钮权限列表 }, getters: { btnlist: (state) =&g

2021-01-08 16:07:22 444

原创 elementUI 步骤条改为虚线,且点击切换

效果图:<el-steps :active="activeIndex" align-center finish-status="wait"> <el-step v-for="(item, index) in bzt_value" :key="item.id" :title="item.name" icon="iconfont iconyuandian" @click.native="dianji_bzt(index, item.process_

2021-01-06 18:18:34 3200 2

原创 发送邮件内容追加按钮以及传值

其中:webUrl是在env.development.js中定义的公共路径在页面获取传值通过:this.$route.query.company 获取,以此类推this.interviewList.description + ` <div> <a type="button" style=" display: inline-block; backgr

2021-01-06 16:23:48 551

原创 Switch 开关,将字写在滑块上面

效果图:<el-switch v-model="ruleForm.status" class="tableScopeSwitch" :active-value="0" :inactive-value="1" active-text="开" inactive-text="关" active-color="#3072ae" ></el-switch> ><style lang="scss">.table

2021-01-06 13:43:49 824

转载 去除HTML的标签样式

val值为下面的参数<div style="color: green; font-size: 40px"> <p>我是p标签</p></div>js通过正则表达式过滤val.replace(/<\/?.+?>/g, '')

2020-11-30 11:16:59 155

原创 elementUI from表单必填项已有值但是提示信息还在

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-it

2020-11-18 15:02:24 5786 5

转载 后台返回数据中有‘\n’换行符,但是在文本中不显示换行效果

转载链接:https://blog.csdn.net/weixin_39897287/article/details/101757746返回的后台数据是含有换行符的,但是界面显示不换行。后面发现用v-html就可以解决<div class="text" v-html="trainDetail.trainingContent"></div>然后js代码里面还要处理一下let aa= this.xxx.name.replace(/\n/g,"<br>");thi

2020-11-18 14:51:49 2197

转载 本地运行打包后的vue项目

转载自:https://blog.csdn.net/qq_33718889/article/details/88725525?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.

2020-11-10 13:08:27 2000

原创 dagre-d3简单实现流程图

<template> <div> <svg width="1000" height="1000"> <g /> <rect /> </svg> </div></template><script> import dagreD3 from "dagre-d3" import * as d3 from "d3" export default

2020-11-09 16:56:30 1170

转载 vue导出

转载自:https://blog.csdn.net/qq_42221334/article/details/995669151.安装插件cnpm install vue-json-excel2.min.js中引入使用import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.直接在页面中使用<download-excel class = "export-excel-wra

2020-11-09 10:39:06 132

原创 mixins中添加表格动态高度方法

mixins文件export default function(height) { return { data() { return { tableHeight: 500 } }, created() { this.getClientHeight() }, mounted() { window.onresize = () => { this.getClientHeight() } }, methods: { getCl

2020-10-29 14:09:54 171

原创 echarts图表自适应

**背景:**vue项目中用到echarts图表,页面上有侧边栏,侧边栏收缩图表不能自适应,想通过监听内容部分的宽度让图表resize,试过window带的resize,只能监听浏览器窗口大小变化,为了监听某元素区域的变化而使echarts的尺寸重置本次解决采用 element-resize-detector 可以完美的解决**思路:**因为收缩侧边栏的时候右侧的区域会自动适应,但是echarts不会随之改变element提供的 element-resize-detector 可以轻松解决问题的存在

2020-10-28 16:12:14 632

转载 Windows解决npm命令没有反应

原文链接:https://www.cnblogs.com/zhenchoafeng/p/10863729.htmlnode.js Windows解决npm命令没有反应今天项目关闭再启动后一直停在npm run dev处没有反应,在cmd中输入npm -v没反应解决办法如下:是npm config set prefix 改包的路径出问题了解决办法就是删除c:/user/administrator下的 .npmrc 文件即可。然后输入npm -v 完美解决...

2020-10-20 10:14:39 5774 5

转载 js动态往对象里边添加一项

原文链接:https://blog.csdn.net/quhongqiang/article/details/98218989// 第一种方法let obj ={"name":"tom","age":16}let key = "id";let value = 2obj[key] = value;console.log(obj) // 第二种方法,利用扩展运算符,简单又实用var obj1={"vue":300,"jquery":200};var obj2={"react":500};v

2020-10-19 15:39:46 405

转载 vue输入框改变后没反应,等下一个输入框值改变才会改变

原文链接:https://www.cnblogs.com/huanhuan55/p/12302333.html<el-input v-model="student.name"></el-input>export default { data () { return { student:{} } }, methods: { update () { this.student.name='莉莉丝' }

2020-10-19 15:34:28 1483

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除