sophia

原创 A4纸px像素的宽高和身份证px像素宽高

A4纸 ： width:755px;身份证：width: 321px;

原创 sessionStorage和vuex的区别，困扰我的为什么不用sessionStorage要用vuex解决了

总结：如果想要组件间数据动态更新，用vuex；如果只是不用页面想存储一下值可以用sessionStorage。

原创 vue项目C-lodop套打控件调试

因为项目需要用到套打类似发票的功能，找了目前市场上的主流插件选择了C-lodop。

原创 解决vue项目里window.open浏览器跳转拦截问题+需要动态传递参数

因为要携带参数row，不能直接使用window.open()，可以将onclick点击事件的方法挂载在window上。注意，window.open只能放在同步方法里，不能放在异步方法里，异步调用需要转至新页面。

原创 会计金额格式化（千分位，小写金额转大写）

/ 普通数字转会计金额格式。

原创 Command failed with exit code 1: git init && yarn install

解决办法：重装对应版本的node和git，git删掉重装。

原创 大屏可视化开发

大屏可视化开发必备要素

原创 git配置以及命令操作

git 的配置下载git（傻瓜式安装）官方地址为：https://git-scm.com/download/win用户名的配置这里的name和email记得换成自己在Github上注册的！ # 设置全局用户名和邮箱$ git config --global user.name "xxx"$ git config --global user.email "xxx@xxx.com"批量删除git分支删除筛选出来的分支，比如fixedgit branch -D @(git

原创 vue项目如何动态变更主题色

1.在common.less中添加root元素2.在main.js中引入3.使用方式4.在app.vue中接口动态获取主题色getThemeColor() .then((res) => { //动态设置主题色 document.documentElement.style.setProperty("--theme-color", `${res.data}`); }) .catch((

原创 vue项目前端如何配置跨域

谷歌浏览器升级，因同源策略限制前端无法本地调试，所以需配置跨域配置方法：vue项目是使用webpack启动和打包的，所以在vue.config.js文件webpack的devserver中配置代理。//开发模式配置 devServer: { port: port, open: true, overlay: { warnings: false, errors: true },

原创 quill-editor使用方法，图片base64位转为url缩减字符长度，以及显示文字个数，光标位置等

下载npm install vue-quill-editor2.导入import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'3.使用 <!-- 富文本 --> <div class="editor-wr.

原创 完美的数字输入框，只能输入两位小数点以千分位分隔，解决iview inputnumber输入光标跳转问题

注意UI框架用的是iview<InputNumber :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" :active-change="false" :max="99999999.99" :min="1" :precision="2" v-model.number="vehicleForm.mo

原创 iview InputNumber输入光标跳转precision精度

设置active-change="false"完美解决问题，在博客上看了好多肺功能啊，浪费时间<InputNumber :active-change="false" :max="9999999999" :min="1" :precision="2" v-model.number="vehicleForm.money" style="width:100%"></InputNumber>...

原创 正则表达式校验

原创 echarts图表X轴或Y轴文字过长换行超出两行...

效果图<div v-if="flag" ref="chart" class="charts-box" />更改option的formatter配置`option: {// backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{// offset: 0,// color: ‘#f7f8fa’// }, {// offset: 1,// color: ‘#cdd

原创 input只能输入整数跟小数点两位

<el-input maxlength="10" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" style="width:100%" v-model="vehicleForm.money"></el-input>

原创 主页面子页面利用postMessage通讯，主页面移除message监听事件

给主页面加了消息提示，一直无限追加，需要移除监听事件，监听事件的移除dlgVisible(val) { var that = this if (!val) { this.getWorkRecordList() } else { window.addEventListener( "message", receiveMessage, true ); }

原创 table实现多行...以及浮窗提示宽度与元素保持一致组件

实现效果两行…浮窗提示，多行提示要考虑到低版本火狐以及ie浏览的器的兼容性问题，因此需要引用clamp.js。多行提示封装的是全局组件可保持统一，文件路径components文件夹下。兼容ie浏览器实现方式一、clamp.jsexport default { name: 'vue-clamp', props: { tag: { type: String, default: 'div' }, autoresize: { type

原创 Echarts气泡图纵横轴为中文，交叉展示实现方式以及气泡展示数量

效果图如下如示例图所展示的效果是每个文件类型所对应的热词被搜索了多少次；实现方式需要用到echarts气泡图的配置<div ref="chart" class="charts-box" />var option={ legend: { // right: '10%', // top: '3%', data: [] }, grid: { left: '8%',

原创 下载echarts图片利用canvas标签生成下载地址，利用a标签下载在ie浏览器以及低版本火狐浏览器的兼容性问题

前言想下载类似于echarts类似于这样统计图的图片。因为echarts默认使用Canvas渲染，于是利用canvas.toDataURL(“image/png”)生成base64位码赋给a标签进行下载，产生了ie与Unix系统下火狐浏览器点击无反应不兼容的问题解决方法downloadImage(query){ if (query == '0') { this.downloadName = '张三' } else if (query == '1') {

原创 Tether初始化方法

简介：Tether可以用固定定位实现浮窗，提示等效果。一、初始化方法new Tether({ element: yellowBox,//挂载元素 target: greenBox,//触发对象 attachment: 'top right',//触摸定位 targetAttachment: 'top left'//目标定位});二、浮窗的偏移量// offset:`${offsetY}px ${offsetX}px`, targetOffset: this.ge

原创 Vuex的模块化使用

一、文件目录Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。## 标题二、在index.js中引入const store = new Vuex.Store({ modules: { app, permission, tagsVie

原创 解决flex布局下，nowrap禁止换行引起的撑大盒子的问题

给父盒子设置min-width：0

原创 vue项目部署配置app.js,mine.js

标题app.jsvar port = 3298; var http = require('http');var url = require('url');var fs = require('fs');var path = require('path');var mine = require('./mine').types;var connect = require('connect');var history = require('connect-history-api-fallback'

原创 关于node-sass版本报错的问题

添加项目依赖时，启动项目报错查了原因是因为安装了node-sass高版本导致的（sass-loader加载器解析scss语法），重新yarn安装依赖，link包，解决了此问题，项目依赖中有node-sass无需重新安装，如果需要重新安装需要安装对应的版本npm install sass-loader@7.3.1 --save-devnpm install node-sass@4.14.1npm 更换阿里云淘宝源npm config set registry https://registry.

原创 天日历组件

两天一个维度，一天同理<template> <div> <div class="meeting-table"> <div class="table-day" :key="key" v-for="(meeting, key) in dayMeetingList" > <ul class="tableTitle today"> {{

原创 elementUI日期组件禁用日期，只能选择同一天的日期

<el-date-picker v-if="item.type === 'date'" type="datetimerange" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="searchForm.date"

原创 周日历组件处理数据展示

<template> <div> <div class="title"> <span class="buttons"> <el-button type="primary" plain @click="weekPrev">上一周</el-button> <el-button type="primary" plain @click="weekNext">下一周</el

原创 URL传参携带中文字符，获取参数乱码问题

携带参数this.src = `./bpm/instance.html?id=${id}&processId=${processId}&visitId=${visitId}&orgName=${encodeURIComponent(orgName)}`解析参数let r = GetQueryString("orgName")function GetQueryString(name){ var reg = new RegExp("(^|&)" + name + "

原创 IE浏览器选择日期兼容性问题

new Date() 时间兼容性问题，IE只识别 “2019/08/01 17:58:54” 斜杠格式，.getTime()才能正常转换成时间戳。‘-’这种的会返回NaN，其他浏览器‘/’或者‘-’都能正常运行。兼容记得转换

原创 IE浏览器月份变为汉字兼容性问题，使用fullcalender插件

IE不兼容long月份，7会变为汉字七将settings的month换为此就好const settings = {month: “numeric”,year: “numeric”,};this.CInstance.formatDate(this.currentDateRange, settings);

原创 BLOB解决火狐浏览器下载xml格式问题

Blob(Binary Large Object)术语最初来自数据库（oracle 中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于支持用户系统的本地文件。var blob = new Blob(array[optional], options[optional]);构造函数，接受两个参

原创 blob形式导出Excel

export function getParticipantList(param) { return ecloudRequest({ url: "", method: "get", params: param, responseType: param.isExport ? 'blob' : '' });}接口返回处理const blob = new Blob([res]) const fileNa

原创 判断当前时间是否在指定时间段内

/** * [isDuringDate 比较当前时间是否在指定时间段内] * @author dongsir * @DateTime 2019-08-21 * @version 1.0 * @param date [beginDateStr] [开始时间] * @param date [endDateStr] [结束时间] * @return Boolean */var date = { isDuringDate: function (beginDat

原创 隐藏掉select组件的下拉面板

原创 文本超出换行显示

文本超出换行显示

原创 vue实现一个websocket

引入socket ioimport io from 'socket.io-client'实现一个socket并获取到数据try { const socket = io(`${SOKET_URL}/monitor`) this.socket = socket console.log('初始化socket', socket) this.socket.open() this.socket.on('real_data', ({d

原创 deploy自动部署

deploy.config.js/* deploy.config.js说明： ssh: 连接服务器用户信息 targetDir: 需要压缩的文件目录（启用本地压缩后生效） openCompress: 关闭后，将跳过本地文件压缩，直接上传同级目录下指定文件 openBackUp: 开启后，若远端存在相同目录，则会修改原始目录名称，不会直接覆盖 deployDir: 指定远端部署地址 releaseDir: 指定远端部署地址下的发布目录名称*/const config = [

原创 无限获取当前周的上周，下周，以及当前周的日期

//获取当前周日期export const getWeekDay = (dateString) => { const dateStringReg = /^\d{4}[/-]\d{0,2}[/-]\d{0,2}$/ if (dateString.match(dateStringReg)) { const presentDate = new Date(dateString) const today = presentDate.getDay() !== 0 ? presentDa

原创 vue里递归结合tabletree实现父级，子级，增删改查的方式

递归增删改查的方法//添加元素export const getCurrentPart = (id, items, child) => { // console.log(id, '-----', items, '---', child) let result for (var i in items) { const item = items[i] if (item.uuid === id) { item.children.push(child) b