showContacts.vue

<script>
export default {
  name: "showContacts",
  props:{
    phoneString:[String]
  },
  data(){
    return {
      phoneList:[],
      show:false
    }
  },
  mounted() {
    let phone = this.phoneString
    this.phoneList = phone.split('(;)');
  }
}
</script>

<template>
<div>
  <el-dialog :modal-append-to-body="false" :append-to-body="true" :visible.sync="show">
    <div v-for="(item, index) in phoneList" :key="index" >
      <div>
        <span>联系人{{index + 1}}：</span>
        <span>{{item.split('(@)')[1]}}</span>
      </div>
      <div>
        <span>联系电话{{index + 1}}：</span>
        <span>{{item.split('(@)')[0]}}</span>
      </div>
    </div>
  </el-dialog>
   <div>
    <div>
      <span>联系人：</span>
      <span>{{phoneList[0] ? phoneList[0].split('(@)')[1] : ''}}</span>
    </div>
     <div style="white-space: normal;">
       <span>联系电话：</span>
       <span>{{phoneList[0] ? phoneList[0].split('(@)')[0] : ''}}</span>
        <el-button v-if="phoneList.length > 1" @click="show = true;" style="margin-left: 10px;" size="mini" type="text" >更多</el-button>
     </div>
   </div>
</div>
</template>

<style scoped lang="scss">

</style>