vue 已知三角形的两边求斜边长度以及角度，如图

最新推荐文章于 2023-01-17 22:15:00 发布

Michelle_wh

最新推荐文章于 2023-01-17 22:15:00 发布

阅读量1.6k

点赞数

分类专栏： vue杂七杂八

本文链接：https://blog.csdn.net/Michelle_wh/article/details/105262459

版权

vue杂七杂八专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在动态的表格中，会出现没有数据用斜杠表示，因为不是固定宽度的，需要经过计算来确定斜杠线的长度和旋转的角度，如下图：
在这里插入图片描述

// 表格
<table>
	<tr>
		<td  ref="thOne" :style="'width:' + (80 / 3) + '%'"> // 3 是动态数据，根据学期的个数决定，计算td的长度
          <div v-if="x[index] === ''" :style="'width:' + thone + 'px;' + 'transform:rotate(-' + jiao + 'deg)'" class="no-data"></div>
          <div v-else>{{x[index]}}</div>
      </td>
	</tr>
</table>
// vue
mounted () {
    let tdWidth = this.$refs.thOne[0].offsetHeight
    let tdHeight = this.$refs.thOne[0].offsetWidth
    let tdHr =  Math.sqrt(Math.pow(tdWidth ,2) + Math.pow(tdHeight ,2)) // 第三条边的长度
    this.thone = Math.sqrt(Math.pow(tdWidth ,2) + Math.pow(tdHeight ,2)) - 3
   
    
    let aa = (tdHeight * tdHeight + tdHr * tdHr - a * tdWidth ) / ( 2 * tdHeight * tdHr )
    let bb = Math.acos(parseFloat(aa))
    this.jiao = bb/Math.PI*180
},