1.公众号开发中：
new Date('2018-1-11')存在兼容性问题，在IOS上无法正常解析出时间戳。
建议用new Date('2018/1/11')这种格式，在各类主流浏览器兼容性都还可以
2. element table中列设定fixed属性后 使用v-if控制显示隐藏多行的时候 表格样式错乱的解决办法
先上图片 table中固定列使用了fixed属性 点击前面的按钮的时候需要银行多列 然而就出现了这么尴尬的情况：
样式错乱啦 找了一天的问题
附上解决办法：
使用element-ui官方提供的方法 doLayout()
## 使用element-ui官方提供的方法 doLayout()
在动态隐藏展示表格的时候调用一下方法：
1.首先需要给table加一个ref属性
2.切换展示表格的时候
this.$nextTick(()=>{
this.$refs['br-gantt'].doLayout()
})
3.解决element-ui 上传文件 达到limit之后阻止选择文件弹窗弹出
重要的描述放在头部：
<el-button>不可添加disabled 否则不能阻止选择文件框弹出
<el-upload>不可添加disabled 否则无法正常时候自带的删除文件方法
vue文件
`<el-upload
class="upload-demo"
ref="uploadH"
:on-exceed="handleExceed"
action=""
:limit="1"
:file-list="fileList"
:on-change="handleChange"
:on-remove="remove"
:auto-upload="false">
<el-button slot="trigger" @click.stop="clickSubmit">选取文件</el-button>
<el-button type="primary" @click="exportItem" style="margin-left: 10px;">导出模板</el-button>
</el-upload>
复制代码
`
methods
handleExceed(files, fileList) {
this.$popError('只能上传单个文件')
return false
},
handleChange(file, fileList) {
if (!this.$uploadLimit(file, 10, ['.xlsx', '.xls'])){
fileList.pop()
}
this.fileList = fileList
},
remove(file, fileList) {
console.log(fileList)
this.fileList = fileList
},
submitUpload(){
if (this.fileList.length > 0 && this.fileList[0].raw) {
this.uploading = true
const parmas = new FormData()
parmas.append('file', this.fileList[0].raw)
parmas.append('projectId', 0)
parmas.append('matterType', this.typeFrom.toUpperCase())
this.$http.importItem(parmas).then(res => {
this.uploading = false
if (res.data.code == 200){
this.$popSuccess('上传成功')
this.importDialog = false
} else {
this.$popError(res.data.message)
}
})
}
},
// 导出模板
exportItem(){
this.$bn_confirm({
msg: '导出',
des: '将要导出模板'
}, (instance, done) => {
instance.confirmButtonLoading = true
const params = {
projectId: 0,
matterType: this.typeFrom.toUpperCase()
}
this.exportTemplate(params).then(res => {
done()
instance.confirmButtonLoading = false
const blob = new Blob([res.data])
const name = 'template.xlsx'
this.$download(blob, name)
})
})
},
clickSubmit(){
//self.$refs['upload'].$refs['upload-inner'].handleClick()
if(this.fileList.length>0){
this.$popError('只能选取一个文件！')
return;
}else{
this.$refs['uploadH'].$refs['upload-inner'].handleClick()
}
},
4. uniapp解决ios tabBar没有文字只显示图标布局中问题
5.小程序canvas画图首次弹出会显示空白的解决办法(canvas图片显示白边问题)
tips:canvasToTempFilePath生成图片的方法写在draw里面
开始画图
drawCanvas() {
if(!this.hasimg){
const ctx = uni.createCanvasContext('myCanvas');
//背景图片
var codeurl = this.codeurl
var bgurl = this.bgurl
var avaurl = this.avaurl
var tel=this.tel
var code="邀请码："+this.info.ReferralCode
console.log(codeurl)
//画布背景填色
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 350, 300, 500);
// ctx.setFillStyle('#5A4ABA')
// ctx.fillRect(0, 0, 300, 32);
//图片
ctx.drawImage(bgurl, 0, 0, 300,370);
ctx.drawImage(avaurl, 12, 410, 50,50); //头像没有路径
//说明文字
ctx.setFontSize(12)
ctx.setFillStyle('#333333')
ctx.fillText(tel, 80, 420)
ctx.setFontSize(9)
ctx.setFillStyle('#5A4ABA')
this.drawRoundedRect(ctx,"#7364ca","#7364ca",74,435,90,18,9);
ctx.setFillStyle('#ffffff')
ctx.fillText(code, 84, 447.5)
ctx.rect(200, 400, 64,64)
ctx.stroke()
ctx.drawImage(codeurl, 200, 400, 64,64);
//转为图片卸载draw里面
ctx.draw(false,function(){
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 300-10, //截取canvas的宽度（-10解决图片白边问题）
height: 500, //截取canvas的高度
destWidth: 300,
destHeight: 500,
quality:1,
fileType:'jpg',
success: function (res){
this.hasimg=true
this.saveImgurl=res.tempFilePath;console.log( this.saveImgurl)
}
})
})
}
},
复制代码
点击保存画布图片
Wxshare(){
var _this=this
uni.saveImageToPhotosAlbum({ //保存图片到相册
filePath: this.saveImgurl,
success: function () {
uni.showToast({
title: "图片保存成功！",
duration: 2000
})
setTimeout(() => {
uni.navigateBack({})
}, 2000);
}
})
},
//多次用到的绘图方法封装
roundedRect(ctx,x,y,width,height,radius){
if(width <= 0 || height <= 0){
ctx.arc(x,y,radius,0,Math.PI*2);
return;
}
ctx.moveTo(x+radius,y);
ctx.arcTo(x+width,y,x+width,y+height,radius);
ctx.arcTo(x+width,y+height,x,y+height,radius);
ctx.arcTo(x,y+height,x,y,radius);
ctx.arcTo(x,y,x+radius,y,radius);
},
drawRoundedRect(ctx,strokeStyle,fillStyle,x,y,width,height,radius){
ctx.beginPath();
this.roundedRect(ctx,x,y,width,height,radius);
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.stroke();
ctx.fill();
},
6.小程序横向滚动公告栏的实现方法
效果图
wxml
<view class='notice'>
<view class="left">
<text class='iconfont icon-labagonggao voice'></text>
<view class="left-box">
<view class="left-text"></view>
<view class='content-box'>
<view class='content-text' animation="{{animationData}}"><text id="text">{{text}}</text></view>
</view>
<view class="right-text"></view>
</view>
</view>
<view class="right" bindtap="goApp">
<!-- <image class="app" mode="aspectFit" src="/assets/images/app.png" style="width:{{widthrpx}}rpx" bindload="imageLoad"></image> -->
<text class="more">更多应用></text>
</view>
</view>
复制代码
wxss
.notice {
display: flex;
align-content: center;
justify-content: space-between;
padding: 10rpx 25rpx;
background: #f1f1f1;
}
.left {
display: flex;
align-items: center;
}
.voice {
margin-right: 5rpx;
margin-top: 2rpx;
color: #fa6016;
}
.left-box {
position: relative;
display: flex;
align-items: center;
}
.left-text {
position: absolute;
left: 0;
width: 40rpx;
height: 100%;
background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1));
z-index: 99;
}
.right-text {
position: absolute;
right: -1rpx;
width: 40rpx;
height: 100%;
background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));
z-index: 99;
}
.content-box {
overflow: hidden;
width: 350rpx;
}
.content-text {
color: #5e5e5e;
white-space: nowrap;
font-size: 28rpx;
}
.right {
display: flex;
align-items: center;
}
.app {
height: 48rpx;
}
.more {
margin-left: 5rpx;
color: #aaa;
font-size: 32rpx;
}
复制代码
js
data: {
text: "1.【评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。",
animation: null,
timer: null,
duration: 0,
textWidth: 0,
wrapWidth: 0
},
onShow() {
this.initAnimation(this.data.text)
},
onHide() {
this.destroyTimer()
this.setData({
timer: null
})
},
onUnload() {
this.destroyTimer()
this.setData({
timer: null
})
},
destroyTimer() {
if (this.data.timer) {
clearTimeout(this.data.timer);
}
},
/**
* 开启公告字幕滚动动画
* @param {String} text 公告内容
* @return {[type]}
*/
initAnimation(text) {
let that = this
this.data.duration = 15000
this.data.animation = wx.createAnimation({
duration: this.data.duration,
timingFunction: 'linear'
})
let query = wx.createSelectorQuery()
query.select('.content-box').boundingClientRect()
query.select('#text').boundingClientRect()
query.exec((rect) => {
that.setData({
wrapWidth: rect[0].width,
textWidth: rect[1].width
}, () => {
this.startAnimation()
})
})
},
// 定时器动画
startAnimation() {
//reset
// this.data.animation.option.transition.duration = 0
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
this.setData({
animationData: resetAnimation.export()
})
// this.data.animation.option.transition.duration = this.data.duration
const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
setTimeout(() => {
this.setData({
animationData: animationData.export()
})
}, 100)
const timer = setTimeout(() => {
this.startAnimation()
}, this.data.duration)
this.setData({
timer
})
},
7.小数点相加精度丢失的问题（0.1+0.2不等于0.3）
问题的原因
为什么 JS 0.1+0.2!=0.3 ？ 产生浮点数计算精度不准确的原因： 在计算机角度，计算机算的是二进制，而不是十进制。二进制后变成了无线不循环的数，而计算机可支持浮点数的小数部分可支持到52位，所有两者相加，在转换成十进制，得到的数就不准确了，加减乘除运算原理一样。
解决方案 - Math.js(对于任意精度的计算，math.js 支持BigNumber 数据类型。)
安装
npm install mathjs
注意:在 TypeScript 项目中使用 mathjs 时，您还必须安装类型定义文件：npm install @types/mathjs.
封装
import * as math from 'mathjs';
export default {
// 加
add(num1,num2){
return math.add(math.bignumber(num1),math.bignumber(num2));
},
// 乘
multiply(num1,num2){
return math.multiply(math.bignumber(num1),math.bignumber(num2));
},
// 减
subtract(num1,num2){
return math.subtract(math.bignumber(num1),math.bignumber(num2));
},
// 除
divide(num1,num2){
return math.divide(math.bignumber(num1),math.bignumber(num2));
}
}
使用
import math from './math.js'
let addNum = math.add(3,2); // 5
let mulNum = math.multiply(3,2); // 6
let subNum = math.subtract(3,2); // 1
let divNum = math.divide(3,2); // 1.5
8.element-ui中 MessageBox 和 Tooltip一起使用的bug
问题：使用Tooltip组件包裹的元素触发MessageBox弹窗在关闭弹窗时会导致Tooltip状态可见
解决办法：
1. manual属性设置为true把Tooltip改为手动控制模式
2. v-model控制状态是否可见
3. native和prevent修饰符监听mouseenter和mouseleave事件
代码如下
<template>
<div>
<el-tooltip
class="item"
effect="dark"
content="退出登录"
placement="bottom"
lacement="bottom"
:manual="true"
v-model="outDisabled"
@mouseenter.native.prevent="put"
@mouseleave.native.prevent="leave"
>
<img class="logout" :src="LogoutImg" @click="logoutMethod" />
</el-tooltip>
</div>
</template>
<script>
export default{
data(){
return{
outDisabled:false
}
},
methods:{
put(){
this.outDisabled = true
},
leave(){
this.outDisabled = false
},
logoutMethod(){
this.$confirm("确定要退出吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
customClass:"qiYuLogout" //可以给弹窗自定义样式 且不影响全局
})
.then(() => {
//其他操作
退出登录清除cook或token
})
.catch();
},
}
}
</script>
