随笔分类 -  Vue

Jenkins 部署报错 error fsevents@2.3.2: The platform "linux" is incompatible with this module
摘要：今天用jenkins部署项目时，部署失败 查看控制台输出代码发现如下错误 原因 fsevents 只能在 macOS 下安装，无法在 linux 系统安装，linux 下会跳过 fsevents 模块，也不会安装 fsevents 依赖的模块，yarn 没有设置忽略 解决方法 1、于是回到项目输入命 阅读全文
posted @ 2021-07-27 19:38 陈山豆 阅读(2966) 评论(0) 推荐(0)
dart-sass编译element-ui打包出来的icon乱码的解决方案
摘要：最近负责的项目用的是element-ui库，sass编译用的是官网推荐的dart-sass，但是项目上线后会出现偶尔乱码的情况 通过检查发现，icon那里的content变成奇怪的字符了 原因 分析了一下这个问题出现的原因，如果一般使用不会出现这个问题，因为一般引入的是element-ui的css文 阅读全文
posted @ 2021-06-09 17:47 陈山豆 阅读(4765) 评论(7) 推荐(2)
前端Excel表格导入导出，包括合并单元格，表格自定义样式等
摘要：表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现，返回一个叫WorkBook的对象，type主要取值如下： base64: 以base64方式读取； binary 阅读全文
posted @ 2021-05-08 16:58 陈山豆 阅读(1464) 评论(0) 推荐(0)
vue全局错误捕获
摘要：1、errorHandler Vue全局配置 errorHandler可以进行全局错误收集，捕获全局错误抛出，避免前端页面挂掉 export default function errorHandler(vue) { vue.config.errorHandler = function(err, vm 阅读全文
posted @ 2021-03-26 10:19 陈山豆 阅读(802) 评论(0) 推荐(0)
前端富文本编辑器vue + tinymce
摘要：之前有项目需要用到富文本编辑器，在网上找了好几个后，最终选择了这个功能强大，扩展性强的tinymce tinymce中文文档地址（不全）：http://tinymce.ax-z.cn/ tinymce英文原版文档地址：https://www.tiny.cloud/docs/demo/ 接下来大致讲一 阅读全文
posted @ 2021-03-26 10:18 陈山豆 阅读(987) 评论(0) 推荐(0)
vue-i18n 国际化语言切换
摘要：vue-i18n 用于前端vue项目中，需要多语言切换的场景 ###安装方法（npm） npm install vue-i18n ###简单使用 1、在vue项目的main.ts文件中实例化 i18n import VueI18n from 'vue-i18n' Vue.use(VueI18n) c 阅读全文
posted @ 2021-01-19 02:38 陈山豆 阅读(334) 评论(0) 推荐(0)
vue实现日历
摘要：<template> <div class="lookForMonth_wrapper"> <div class="lookForMonth_top"> <div class="selectDate"> <div>{{year}} 年 {{month}} 月</div> <div class="up 阅读全文
posted @ 2020-10-27 00:48 陈山豆 阅读(1340) 评论(0) 推荐(1)
vue封装公用弹出框方法，实现点击出现操作弹出框
摘要：如上图所示，这次要实现一个点击出现操作弹框的效果；并将这个功能封装成一个函数，便于在项目的多个地方使用。 ###具体思路是： 封装一个组件，组件保护一个插槽，我们可以根据不同的场景，利用插槽随意在这个弹框里插入任何元素，这个弹框显示时根据我鼠标的点击位置，定位弹窗的位置，并在组件里面监听鼠标抬起事件 阅读全文
posted @ 2020-10-25 18:53 陈山豆 阅读(3507) 评论(0) 推荐(0)
vue实现拖拽排序
摘要：##基于vue实现列表拖拽排序的效果 在日常开发中，特别是管理端，经常会遇到要实现拖拽排序的效果；这里提供一种简单的实现方案。 ###首先，我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 阅读全文
posted @ 2020-10-15 01:46 陈山豆 阅读(7046) 评论(0) 推荐(0)
vue自定义插件封装，实现简易的elementUi的Message和MessageBox
摘要：vue自定义插件封装示例 ###1、实现message插件封装（类似简易版的elementUi的message） ###message组件 <template> <transition name="msgbox-fade" @after-leave="handleAfterLeave"> <div 阅读全文
posted @ 2020-10-14 00:59 陈山豆 阅读(3531) 评论(2) 推荐(1)
前端vue使用高德地图
摘要：首先，注册Key 注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 然后，书写代码 在vuecli public文件夹中的index.html添加导入 JS API 的入口脚本标 阅读全文
posted @ 2020-10-13 00:58 陈山豆 阅读(2579) 评论(0) 推荐(1)