资源gitee地址：gitee.com/zhzhenrong/…
zzr-electron-vue-base
基于electron-vue的项目
开发构建命令
# 安装依赖
npm install
# 开发启动端口9080
npm run dev
# 打包构建
npm run build
向主应用发布事件
事件ipcRenderer挂载至原型主动
向父级发布事件方法
主方法绑定事件
/**
* 登录后改变窗体大小
* 1. 获取设备分辨率
* 2. 计算设备改变后的相对与设备的定位
* 3. 尺寸的参数为正整数
*/
ipcMain.on('changeSize', () => {
// 设备宽度
const winW = screen.getPrimaryDisplay().size.width;
// 设备高度
const winH = screen.getPrimaryDisplay().size.height;
// 改变后应用显示跨度
const windW = parseInt(0.9 * winW);
// 改变后设备显示高度
const windH = parseInt(0.8 * winH);
// 改变后距离设备左侧位置
const windL = parseInt((winW - windW) / 2);
// 改变后举例设备高度
const windT = parseInt((winH - windH) / 2);
// 设置窗体尺寸
mainWindow.setSize(windW, windH, true);
// 设置窗体显示位置
mainWindow.setPosition(windL, windT);
})
子应用内部调用外部方法
<el-button @click="ipc.send('changeSize')">登录后改变窗体大小</el-button>
单页编写
htm+css 基础样式说明
页面样式公共基础类总结归纳
.flex弹性布局样式类说明： 名称以属性值相关字母组合
.flex:设置flex弹性布局框
display:flex/-webkit-flex
.flex-column：弹性布局方向改变（默认水平）
flex-direction: column;
.flex-wrap：flex布局可换行
flex-wrap: wrap;
.flex-column-reverse：弹性布局方向改变（默认水平）内部子集倒序排列
flex-direction: column-reverse;
.flex-full：获取剩余视图空间
flex: 1;
.justify-center：水平布局居中
justify-content: center;
.items-start：垂直布局水平轴线对齐
align-items: flex-start;
宽高说明：命名取width(宽)与height(高)的首字母作为类标识，number数值表示值大小
宽度类包含
w100、w90、.w85、.w80、w70 、w60 、.w50 、.w40、.w33 、.w30 、.w20、.w25
.wh100:宽高均继承父级
width: 100%;height: 100%;
.w90:父级90%宽度
width: 90%
.h100：高继承父级
height: 100%;
视图滚动域类
overflow：水平垂直方向均可滚动
overflow: auto;
overflow-x：水平视图截取允许y轴滚动
overflow-x:hidden;
overflow-hidden：垂直水平视图截取
overflow:hidden;
外边距解释
外边距类命名margin+方向英文首字母+数值(注：H水平方向，V垂直方向)
现有外编距类
.marginAuto ,.marginH20,.marginH15 ,.marginH10,.marginH5,.marginB30,.marginV10 ,.marginT30,.marginT20 ,.marginT10 ,.marginT5 ,.marginB20 ,.marginB15 ,.marginB10 ,.marginB10 ,.marginR20 ,.marginR15 ,.marginR10 ,.marginR5 ,.marginL20 ,.marginL15 ,.marginL10,.marginL5,
.margin5:外边距上下左右均为5
margin:5px
.margin10:外边距上下左右均为10
margin:10px
margin:5px
.marginT5:上外边距5px
margin-top:5px;
.marginL5:左外边距5px
margin-left:5px;
.marginL5:右外边距5px
margin-right:5px;
.marginB5:下外边距5px
margin-bottom:5px;
内边距解释
外边距类命名padding+方向英文首字母+数值(注：H水平方向，V垂直方向)
现有外编距类
.paddingT80,.paddingT75,.paddingT70,.padding5,.padding10,.padding15,.padding20,.padding30 ,.paddingH40,.paddingH30 ,.paddingH20,.paddingH15,.paddingH10 ,.paddingH5,.paddingV20 ,.paddingV15,.paddingV10,.paddingV5,.paddingB30,.paddingB20,.paddingB15 ,.paddingB10 ,.paddingB5,.paddingT48,.paddingT25 ,.paddingT30,.paddingT20 ,.paddingT10,.paddingT5,.paddingL30,.paddingL25,.paddingL20,.paddingL10,.paddingL15 ,.paddingL5 ,.paddingR30 ,.paddingR20,.paddingR10,.paddingR15 ,.paddingR5,.paddingT15,.paddingB40
注：规则与外边距相似
视图投影shadow
.shadow01 {
box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
}
.shadow02 {
box-shadow: 0 0 6px rgba(0, 0, 0, .04)
}
.shadow03 {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
文本显示缩略
over-text-row：显示一行文本带省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
over-text-row：显示两行文本带省略号
text-overflow: ellipsis;
text-overflow: -webkit-ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
手势
cursor：移动鼠标至目标标签，手势变为点击手势
cursor: pointer;
字体大小
字体大小命名规则：font+数字,字体加粗fontB+数字
现有字体类
.font20,.font22 ,.fontB22,.font24,.font18,.fontB18,.font16,.fontB16,.fontB12,.fontW,.font14,.fontB14,.font12
font20：字体大小20
font-size: 20px !important;
fontB20：字体大小20切加粗
font-size: 20px !important;
font-weight: 800;
文本布局
命名规则：text+文本样式值
.text-center：文本居中
text-align: center;
.text-right：文本居右
text-align: right;
.text-justify：文本两边对其(超出当前行)
text-align: justify;
视图边框
命名规则：border1+位置（英文首字母）
border1:边框1px 实线 DFDFDF
border: 1px solid #DFDFDF;
borderB1:底部边框1px 实线 DFDFDF（其他方向同理）
border: 1px solid #DFDFDF;
圆角
命名规则：radius+数值
.radius5(5px圆角),.radius3(3px圆角),.radius6,.radius8,.radius10,.radius50(50%其余px单位)
定位布局类
定位分类(分类名称为类名)：relative，absolute,fixed
定位基础方向值(值均为0)：top，left,right,bottom
字体高度
命名规则：lh(line-height)+数值(单位px)
.lh19 .lh20 .lh24 .lh28 .lh30 .lh32 .lh38 .lh40
字体颜色
命名规则：color+数值（文本）
color01,color02,color03,color04,color05,color06
数值越大颜色越亮
基础工具、方法
deepCopy 数据拷贝
使用目的：隔离数据原有数据存储地址
const list=[1,2,3,4];
// 直接复制
const listA=list;
// 模拟数据深拷贝
const listB=this.deepCopy(list);
// 结果判断
console.log(list===listA) // 结果：true；
console.log(list===listB) // 结果：false；
keyInList 列表中存在key值
使用目的：在列表中直接判断key值存在性
// 权限列表关键字
const list=[1,2,23,4,5,6,7];
// 当前权限值为3，判断是否显示div
<div v-shwo="keyInlist(3,list)"></div>
formatTime 时间格式转换
使用目的：处理不同格式数据转换为目标时间格式
// 时间格式为：yyyy-MM-dd HH:mm:ss
const timeInfo='2020-04-03 12:12:12'
// 显示为 yyyy-MM-dd
<div>{{formatTime(timeInfo).YYMMDD}}</div>
getTimeInfo 获取时间详细数据
使用目的：获取不同时间类型
timeStamp：时间戳；
year：年
mouth：月
day：日,
hours：小时
minutes：分
seconds：秒
millisecond：毫秒
week：星期几
weekZh：中文星期几
httpClient数据请求
get数据请求：
方法一：
this.httpClient.get(this.api['后端服务路由'],请求参数,成功函数，失败函数);
方法二：
await this.httpClient.promise('get',this.api['后端服务路由'],请求参数);
post数据请求：
方法一：
this.httpClient.post(this.api['后端服务路由'],请求参数,成功函数，失败函数);
方法二：
await this.httpClient.promise('post',this.api['后端服务路由'],请求参数);
file数据请求(上传文件)：
方法一：
this.httpClient.file(this.api['后端服务路由'],FormData数据类型参数,成功函数，失败函数);
方法二：
await this.httpClient.promise('file',this.api['后端服务路由'],FormData数据类型参数);
promiseAll数据请求(同步发布请求)：
注：不带参数get可直接应用字符串
this.httpClient.promiseAll([// get请求服务地址this.api.getUserInfo,// post数据请求信息配置{method:'post',data,url}]);
所需UI注册(element所需UI注册)
import { Row,Button, Card,...,TableColumn} from "element-ui";
// 注入所需组件
[Row, Button,...,TableColumn, loading].forEach(item => (Vue.use(item)));
富文本编辑器使用方法
标签写入
<zzr-editor v-model="html" ref="myEditor"/>
写入数据
this.$refs.myEditor.setHtml(`<h1>asdfasdfasd</h1>`);
数据可在@input得到（model已双向绑定）
html转pdf或图片
html转下载图片
<div @click="previewImg('htmlID','文件名称，可不传自动生成')"></div>
html转下载pdf
<div @click="downloadPDF('htmlID','文件名称，可不传自动生成')"></div>
依赖：
yarn add dom-to-image 或 npm install dom-to-image
yarn add jspdf 或 npm install jspdf
label-value 组件使用
<label-value label="渠道名称" :content="contdetail.thirdChannelName"/>
页面渲染保持
1.要使用页面渲染保持必须确保所需要路由的界面keepAlive为true；
2.页面切换后路由还保持必须确保所切换的keepAlive也为true；
键盘事件绑定
// 绑定键盘事件 方法一(子级无输入框使用)
document.getElementById('password').onkeydown = ({code}) => (code === 'Enter' && this.loginMethod());
// 绑定键盘事件 方法二子级无输入框使用)
this.$refs.password.onkeydown = ({code}) => (code === 'Enter' && this.loginMethod());
// 输入框上使用
v-on:keyup.enter="方法名"
数据为空视图显示处理
表格数据为空：不错任何组件处理，已添加基础类
公共组件为空使用：<data-null v-if="list.length<1"/>
