2018项目总结（vue+apicloud）

一、关于字数统计的问题

在使用textarea时常会对textarea中的文字数目进行统计，一般来说，可以使用onkeyup事件来解决问题。

<textarea id="description" onkeyup="keypress()"></textarea>
<span id="wordsCounting">500字</span>

function keypress(){
　　var description = document.getElementById("description").value;
　　var remainNum = 500 - description.length;
　　if(remainNum < 0){
　　　　remainNum = 0;
　　　　vm.wishContent = description.substring(0,500);
　　　　alert('最多只能输入500个字符哟~');
　　}
　　document.getElementById("wordsCounting").innerText = remainNum + "字";
}

但是当使用粘贴功能的时候，由于onkeyup事件并没有调用，所以字数统计就会出现问题，因此需要更改一下。

<textarea rows="15" id="description" v-model="content"></textarea>
<span id="wordsCounting">500字</span>

watch: {
　　content: function(curVal,oldVal){
    　　var remainNum = 500 - curVal.length;
    　　if(remainNum < 0){
   　　　　remainNum = 0;
   　　　　vm.content = curVal.substring(0,500);
   　　　　api.alert({
          　　msg: '最多只能输入500个字符哟~',
          });
        }
        document.getElementById("wordsCounting").innerText = remainNum + "字";
    },
},

 

二、关于一段文字的行数计算判断是否显示更多按钮

在获取到文本之后调用vm.countLines();来计算该文段的行数。

<div id="target" class="introduce" :class="isEllipsis == 1?'aui-ellipsis-2':''">
　　<div class="aui-margin-l-15 aui-margin-r-15" v-html="wishContent"></div>
</div>　　

countLines:function(){
    this.$nextTick(function(){
        var target = document.getElementById("target");
        var styles = window.getComputedStyle(target, null);
        var lh = parseInt(styles.lineHeight, 10);    // 行高
        var h = parseInt(styles.height, 10);    // 文段高度
        var lc = h / lh;    // 行数
        if(lc > 2){
            vm.isEllipsis = 1;  
            $api.css($api.byId("getMore"), 'display:block;');
        }else{
            vm.isEllipsis = 0;
            $api.css($api.byId("getMore"), 'display:none;');
        }
    });
},

三、一行两端对齐的文字（使用了jQuery-weui）

<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd"><span>单号</span></div>：
    	<div class="weui-cell__bd">
    	    <input class="weui-input" type="text" />
    	</div>
    </div>
    <div class="weui-cell">
	<div class="weui-cell__hd"><span>用户名</span></div>：
    	<div class="weui-cell__bd">
    	    <input class="weui-input" type="text" />
    	</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><span>地址</span></div>：
    	<div class="weui-cell__bd">
    	    <input class="weui-input" type="text" />
    	</div>
    </div>
</div>    

 

.weui-cell__hd{
    width: 60px;
    height: 24px;
    padding-left:15px;
    text-align: justify;
    display: inline-block;
}
.weui-cell__hd span:after{
    content:"";
    display: inline-block;
    width: 100%;
    height: 0;
}

效果如图：

 

四、不会被拉伸或者压缩的缩略图（类似微信朋友圈中为保持图片原有比例而只显示图片中间部分）

参考文档：https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

在显示图片的缩略图时，设置一下缩略图的宽高（width&height），同时给图片添加object-fit:cover;的属性即可。

img{
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}　　

 五、一段文字中，中英文使用不同的字体

参考文章来源：https://www.jb51.net/article/25219.htm

function justifyText(text, fontFamily){    // text-需要显示不同字体的文本  fontFamily-
    var newText = "";
    for(var i = 0; i < text.length; i++){
        if(text.charCodeAt(i) > 255){    //遍历判断字符串中每个字符的Unicode码,大于255则为中文 
          newText +=text[i];
        }else{
            newText +="<span style='font-family:"+fontFamily+"!important'>"+text[i]+"</span>";
        }
    }
    return newText;
}    

六、不完整环形进度条（canvas）

设计图如下：

         

<canvas :id="'myCanvas'+index" width="60" height="60" style="margin:0 auto;"></canvas>

<!--由于canvas绘制的图在手机上会失真，因而引用hidpi-canvas.min.js来解决该问题-->
<script type="text/javascript" src="../script/hidpi-canvas.min.js"></script>

function drawProgress(index, leftPercent){    // index-获取数据数组后的排序位置 leftPercent-剩余值
    var myCanvas = document.getElementById("myCanvas"+index);
    var textContent = leftPercent +"%";
    var progressX = document.getElementById("myCanvas"+index).offsetWidth / 2;
    var progressY = document.getElementById("myCanvas"+index).offsetHeight / 2;
    var changedArc = 1.9*(100-leftPercent)/100;
    if(changedArc <= 0.4){
        var endArc = 0.4 - changedArc;
    }else if(changedArc > 0.4 && changedArc <= 0.9){
        var endArc = 2 - (changedArc - 0.4);
    }else if(changedArc > 0.9 && changedArc <= 1.4){
        var endArc = 1.5 - (changedArc - 0.9);
    }else if(changedArc >= 1.9){
        var endArc = 0.6;
    }else{
        var endArc = 1 - (changedArc - 1.4);
    }
    var ctx = myCanvas.getContext("2d");
    //总数
    ctx.beginPath();
    ctx.arc(progressX, progressY, 24, 0.4*Math.PI, 0.6*Math.PI, true);            // 横纵坐标、半径、起始角、结束角、顺逆时针(顺时针为false)
    // 轮廓线
    ctx.strokeStyle = "#37CBD5";
    ctx.lineWidth = 5;
    ctx.stroke();
    // 填充区
    ctx.fillStyle = "#37CBD5";
    ctx.font = "10px FZLTXH";
    ctx.fillText("还剩", (progressX-10), progressY-2);
    ctx.font = "10px Helvetica";
    ctx.fillText(textContent, (progressX -    ctx.measureText(textContent).width/2), (progressY+8));     // ctx.measureText().width获取文字长度
    ctx.textAlign="center";
    ctx.textBaseline = "middle";
    ctx.closePath();
    //进度
    ctx.beginPath();
    ctx.arc(progressX, progressY, 24, 0.4*Math.PI, endArc*Math.PI, true);
    ctx.strokeStyle = "#57E3EC";
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.closePath();
    // 改善canvas在手机端的失真问题
    var getPixelRatio = function(ctx) {
        var backingStore = ctx.backingStorePixelRatio ||
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1;

        return (window.devicePixelRatio || 1) / backingStore;
    };
}

 

七、手机端：整个页面的背景图

当某个页面的背景是一张图且该页面含有输入框的时候，弹出键盘，会使背景图被压缩，发生改变，因此需要防止背景图被压缩。

<div id="app" style="background:url(imagePath);" :style="{'height':bodyHeight+'px'}"></div>

var vm = new Vue({
    el: '#app',
    data: {
        bodyHeight:""
    },
    mounted:function(){
        this.bodyHeight = document.documentElement.clientHeight;
    }
})

 

八、时间戳转化时间（yyyy-mm-dd hh:mm:ss）

/*对Date的扩展，将 Date 转化为指定格式的String
    *月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
    *年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    *例子：
    *(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    *(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
*/
Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

function gettingTime(time){
    var date = new Date();
    date.setTime(time);
    return date.Format("yyyy-MM-dd hh:mm:ss");
}

 

九、CST时间(Fri Aug 28 09:37:46 CST 2009)转化日期格式(yyyy-MM-dd hh:mm:ss)

var time = dateFormat(CSTtime, "yyyy-MM-dd hh:mm:ss");
function dateFormat (date, format) {
    date = new Date(date);
    date.setHours(date.getHours()-14);
    var o = {
        'M+' : date.getMonth() + 1, //month
        'd+' : date.getDate(), //day
        'H+' : date.getHours(), //hour
        'm+' : date.getMinutes(), //minute
        's+' : date.getSeconds(), //second
        'q+' : Math.floor((date.getMonth() + 3) / 3), //quarter
        'S' : date.getMilliseconds() //millisecond
    };

    if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

    for (var k in o)
        if (new RegExp('(' + k + ')').test(format))
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));

    return format;
}