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