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;
}