weex 自定义带删除线的text

<template>
    <!--<div style="flex: 1">-->
    <div style="flex: 1;align-items: center">
        <text style="color:{{textColor}}; font-size:{{textSize}};">
            {{textContent}}</text>
        <div class="line" style="background-color: {{lineColor}};
            height: {{lineHeight}}; top: {{lineTop}};transform: rotate({{lineDeg}});"></div>
    </div>
</template>
<style>
    .line{
        position:absolute;
        transform-origin:50% 50%;
        left: 0px;
        right: 0px;
    }
</style>

<script>

    module.exports = {
        data: {
            textContent:'测试测试',
            textSize:'60',
            textColor: 'black',
            lineHeight: '2',
            lineColor: 'red',

//            下面不用设置
            lineDeg:'0deg',
            lineTop:'',
//            lineWidth:0,
        },
        ready:function(){
            this.lineWidth =  this.textContent.length * this.textSize;
            console.log('dlg==========='+this.lineWidth);
            this.lineTop = this.textSize / 2;
//            console.log('length===' + this.textContent.length+'textSize='+this.textSize+'this.lineTop'+this.lineTop);
            var hd = Math.atan2(this.textSize,this.textContent.length*this.textSize);
            var jd = 180 *hd /Math.PI;
            jd -= 3;//自己调节的值
            this.lineDeg = '-'+jd+'deg';
        }
    }
</script>