vue
小贵子的博客
这个作者很懒,什么都没留下…
展开
-
vue判断当前是PC端还是手机端,加载不同组件库
【代码】vue判断当前是PC端还是手机端,加载不同组件库。原创 2023-02-03 16:37:25 · 1047 阅读 · 0 评论 -
svg修改图标颜色
svg修改图标颜色原创 2023-02-03 16:08:21 · 2492 阅读 · 0 评论 -
Vue中 store 项目实战
【代码】Vue中 store 项目实战。原创 2023-02-03 14:32:15 · 357 阅读 · 0 评论 -
安全水印插件
安全水印插件原创 2023-01-31 18:06:53 · 128 阅读 · 0 评论 -
解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
vue-router重复路由跳转报错:Uncaught (in promise) NavigationDuplicated: Avoided。原创 2023-01-31 16:23:08 · 426 阅读 · 2 评论 -
JS如何将 DOM 生成图片并下载
JS如何将 DOM 生成图片并下载原创 2023-01-04 12:26:26 · 643 阅读 · 0 评论 -
实现微信公众号评论回复功能
【代码】实现微信公众号评论回复功能。原创 2022-10-18 10:48:52 · 214 阅读 · 0 评论 -
根据iframe里面的内容高度动态设置iframe高度
根据iframe里面的内容高度动态设置iframe高度原创 2022-10-14 11:38:16 · 760 阅读 · 0 评论 -
vant 文件上传
<van-uploader v-model="uploader" :max-count="1" :before-read="beforeRead" :after-read="afterRead" :before-delete="delImgId" > </van-uploader>js:beforeRead(fil.原创 2022-02-21 19:02:51 · 3857 阅读 · 0 评论 -
vue之element-ui文件上传
对于文件上传,实际项目中我们的需求一般分为两种:1. 对于单个文件的上传,直接上传到服务器;官网api:http://element-cn.eleme.io/#/zh-CN/component/upload<el-upload class="avatar-uploader" action="" :http-request="uploadimage" :before-upload="b.原创 2022-02-21 18:40:15 · 7413 阅读 · 0 评论 -
异步加载js
export default class APILoader { constructor(props) { this.apiURL = props; this.scriptId = encodeURIComponent(props).replace(/[.|:|%|h|t|p|s]/g, ''); } buildScriptTag() { const prevScript = document.getElementById(this.scriptId); if.原创 2022-01-25 15:38:42 · 842 阅读 · 0 评论 -
时间刻度组件
最近遇到一个类似钉钉时刻的需求,如图所示:代码:<template> <div class="sign-wrap"> <div class="meeting-sign-wraper"> <div class="close_box"><img src="./img/x.svg" alt="" /></div> <div class="screen-guide" @click="jum原创 2021-12-28 19:29:33 · 628 阅读 · 0 评论 -
element-ui的popover组件位置偏移
【代码】element-ui的popover组件位置偏移。原创 2021-12-27 16:59:57 · 5537 阅读 · 0 评论 -
js 实现文件导出、文件下载
后台返回的文件流格式下载方式:方法:// 文件下载 // content: 后台返回的文件流, fileName: 文件名 downLoadFile(content, fileName) { const blob = new Blob([content]); if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.cr..原创 2021-07-05 14:11:05 · 266 阅读 · 0 评论 -
前端利用jsencrypt.js进行RSA加密
1. 安装npm install jsencrypt2.引入import JSEncrypt from 'jsencrypt'// import JSEncrypt from 'jsencrypt/bin/jsencrypt'import JSEncrypt from '../../public/utils/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = 'MF...原创 2021-06-24 17:07:43 · 733 阅读 · 0 评论 -
Vue 实现点击展开收起
如下图所示: 为收起和展开图片html:js:原创 2021-06-24 15:29:17 · 272 阅读 · 0 评论 -
echarts折线图阴影设置
html代码:<!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="personCountChart_parent"> <div id="personCountChart" style="width: 100%; height: 100%"></div> </div>原创 2021-06-08 16:04:35 · 2081 阅读 · 0 评论 -
elementui限制日期控件选择范围
最近有个需求: 日期选择范围需要有个时间区间,如下图所示:图一:图二:图二的选择范围需要在图一的时间周期内选择文档:html代码:<el-form-item label="时间:"> <el-date-picker v-model="dateValue" size="small" type="daterange" range-sepa原创 2021-06-08 15:52:08 · 186 阅读 · 0 评论 -
Element-ui 日期选择插件icon图位置调整
直接上图:代码:// 日期样式// .el-range-editor--small.el-input__inner {// height: 30px;// padding: 3px 0px;// }/deep/.el-date-editor .el-range-separator { color: #979797 !important; width: 8%; font-size: 12px;}/deep/ .el-date-editor .el-range__原创 2021-05-11 15:15:19 · 2797 阅读 · 3 评论 -
element-ui el-tooltip 不显示的问题
最近做项目遇到一个问题,el-tooltip 组件里面如果包裹多个元素的话,不显示。解决办法如下:原创 2021-04-21 18:07:59 · 4449 阅读 · 4 评论 -
element-ui 修改 默认的一些样式
variables.scss 文件:/** * @description 全局主题变量配置,VIP文档内提供多种好看的配色方案(ant-design风格、layui风格、iview风格),请查看VIP文档主题配置篇 *//* stylelint-disable */@charset "utf-8";$theme-color: #3370ff;// 主内容区最小宽度$base-content-min-width: 1200px;//框架默认主题色$base-color-default:原创 2021-04-21 17:36:36 · 2480 阅读 · 0 评论 -
Vue实现选项卡demo
如图所示:<template> <div class="news_wrap"> <ul class="news_title"> <li v-for="(item, index) in items" :key="index" :class="{ activeShow: activeIndex === index }" @click="currentHandel(index原创 2021-03-17 16:39:37 · 207 阅读 · 0 评论 -
富文本编辑器中 工具栏和编辑区分离的解决办法
最近做项目遇到一个需求,如下图所示:通过wangEditor封装的组件:<template> <div> <div v-show="toolbalSshow" :id="toolbalId" class="toolbar"></div> <div :id="editorId" class="text"></div> </div></template><script原创 2021-03-16 14:27:44 · 1431 阅读 · 0 评论 -
elementui 组件Popover弹出框点击内容区关闭弹出框的解决办法
效果图如下:第一种解决办法,官方提供的:第二种解决办法:绑定ref属性,this.$refs.morePop.doClose()第二种解决办法:绑定ref属性,this.$refs.morePop.showPopper=false;还有什么好的办法,欢迎大家补充交流。...原创 2021-03-15 10:41:11 · 3811 阅读 · 0 评论 -
Vue实现页面全局添加水印功能
1. 新建一个warterMark.js 文件://创建水印(参数依次为,水印文字内容,选择器,偏转角度,字体颜色)export function createWatemark({ text = '水印', selectors = 'body', rotate = -14, color = 'rgba(144,147,153,0.1)'} = {}) { let can = document.createElement('canvas'); let原创 2021-02-18 16:04:51 · 4776 阅读 · 3 评论 -
vue-okr-tree 组件左右树结构
最近公司需要做一个okr项目,okr项目里有一个对齐试图功能,在百度和GitHub上找了半天,最后终于找到了一位大神造的轮子,可能最终需求不是这个样子,但是也特别感谢大神的指导,希望大家多多支持大神,互相学习。大神的博客:https://blog.csdn.net/qq449245884/article/details/109568825大神的GitHub:https://github.com/qq449245884/vue-okr-tree最终的展示效果如图:子组件:<.原创 2021-02-18 11:21:57 · 6889 阅读 · 24 评论 -
vue-cli3之webpack配置
在项目的根目录,新建一个vue.config.js文件:// vue.config.jsconst path = require("path");const Timestamp = new Date().getTime();module.exports = { configureWebpack: { resolve: { alias: { "@": path.resolve(__dirname, "./src原创 2021-01-05 18:16:30 · 713 阅读 · 0 评论 -
axios封装统一处理接口
文件位置:文件request.js:/**** request.js ****/import axios from 'axios'import store from '@/store'import router from "@/router";import { projectUrl} from "@/config/ssoUrl";import { Loading, Message, MessageBox} from "element-ui"原创 2021-01-05 17:45:13 · 7350 阅读 · 0 评论 -
element-ui drawer 抽屉组件渲染 tree 树形组件
效果图如下:子组件:<template> <el-drawer :visible.sync="dialogVisible" :direction="direction" :show-close="false" @close="close" @open="open" > <div slot="title" class="demo-drawer__header"> <span>{{原创 2021-01-05 17:11:09 · 1676 阅读 · 0 评论 -
vant 组件单选框用v-if 控制显示隐藏会有bug,所以采用v-show
<template> <div class="wrapper paddingTop"> <preview v-if="show" :infoPreview="infoPreview" @cancel="show = false" @confirm="confirm" ></preview> <top-nav></top-nav> <van-f...原创 2020-11-19 17:49:28 · 3417 阅读 · 5 评论 -
基于Vue的移动端图片裁剪组件 vue-crop
基于Vue的移动端图片裁剪组件 vue-crop最近公司做一个移动端的项目,前端用的是vue + vant,需求:上传证件照,需要裁剪图片,vant 的上传组件满足不了,所以自己上手开发一个。图片:是由https://blog.csdn.net/ch834301/article/details/79963152这个修改而来的,已经修改成了在单独的组件可以用了,详情请看前面的链接。代码如下:<template> <div class="zyg-uploa..原创 2020-11-19 15:49:27 · 2170 阅读 · 0 评论 -
vue项目router-link在IE下不跳转,失效
在IE11浏览器中,router-link的跳转是失效的,主要是因为当url的hash变化的时候,浏览器没有做出相应的反应。这时候需要做一个兼容处理,当浏览器是IE11时手动给url加一个hashChange事件。办法一:new Vue({ el: '#app', router, components: { App }, template: '<App/>',...原创 2019-07-05 11:54:49 · 2626 阅读 · 0 评论 -
vue项目 微信支付 和 支付宝支付
做了一个项目,有充值功能,充值方式为 微信和支付宝,效果如下:代码:<template> <el-card class="box-card"> <ul class="msg-box"> <li> <h4>我要充值</h4> </li> <li> &l...原创 2019-07-05 15:36:58 · 18172 阅读 · 4 评论 -
vue项目在ie下打开白屏
vue项目在ie下打开白屏,使用 babel-polyfill 插件解决:步骤一:安装npm installbabel-polyfill步骤二:在 main.js 中引用import 'babel-polyfill'步骤三:在build/webpack.base.conf.js 中配置如下:module.exports = { entry: { a...原创 2019-07-05 11:28:21 · 2688 阅读 · 0 评论 -
后台管理系统自己手写页面布局
头部固定,底部固定,左侧菜单出现滚动条,效果图如下:代码<template> <div class="mars-layout mars-layout-admin"> <!-- 头部 --> <div class="mars-header"> <p class="mars-logo" @click="goToMain...原创 2019-07-03 15:12:01 · 1996 阅读 · 0 评论