有三個(gè)布局相似的title，如下圖，是一個(gè)寫好的組件，把要傳入的數(shù)據(jù)寫在父級(jí)，但是因?yàn)橛覀?cè)英文單詞長(zhǎng)度不一樣，如果光用margin-left設(shè)置好固定的距離，導(dǎo)致英文單詞不在背景圖片img中間

現(xiàn)在唯一的解決辦法就是讓英文單詞的邊距margin-left是動(dòng)態(tài)獲取輸入的數(shù)據(jù)的寬度，從而移動(dòng)數(shù)據(jù)寬度的一半。
那么問(wèn)題就來(lái)了，如何動(dòng)態(tài)獲取輸入的數(shù)據(jù)的寬度
代碼如下

模板

<div class="someone_say">
    // 右側(cè)英文背景的黃色圖片
      <img src="./../../assets/someone_say.png">
    // 右側(cè)英文單詞
      <div 
          class="someone_say_text"
          :style="{marginLeft: marginleft +'px'}">
        <span class="english_text">{{ message.englishtext }}</span>
      </div>
</div>

js

export default{
        props: ['message'],
        data(){
            return{
            }
        },
        computed: {
            marginleft: function(){
                
            }
        }
    }

應(yīng)該怎么計(jì)算輸入數(shù)據(jù)someone_say_text的寬度？