vue怎么在页面里画一个大方框

图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。这里为了交互体验，使用了elementui的d窗方式。鼠标左键拖动添加矩形框标记区域，鼠标点击已绘制的矩形；选中矩形，并绘制不同选中效果。

1.dom结构

<div class="liveInDetailList">

<div class="liveInDetail" v-for="(item,index) inPersonNamelist.guestList" :key="index">

<div class="infoDetail">

<span class="left">住客姓名</span>

<input type="text" placeholder="请输入姓名" class="searchRoomInp" autofocus="autofocus" v-model="item.name" ref="inputName" v-focus>

</div>

<div class="infoDetail">

<span class="left" >手机号</span>

      <input type="text" placeholder="请输入手机号" class="searchRoomInp" v-model="item.mobilePhone" >

</div>

<div class="infoDetail">

<span class="left">身份z号</span>

<input type="text" placeholder="请输入身份z号" class="searchRoomInp" v-model="item.idCardNo">

</div>

<div class="handle" v-if="isShowDelete">

</div>

<div class="handle" v-else>

<i slot='rightIcon' class="iconfont icon-icon-shanchu deleterightIcon"  @click.stop="delRoomCard(index)"></i>

</div>

</div>

</div>

2在data中定义

PersonNamelist:{

checkInRoomId:'',

guestList:[{id:"",name:"",mobilePhone:"",idCardNo:""}]

},

3.点击新增

   1.定义一个obj

let obj={

id:"",

name:"",

mobilePhone:"",

idCardNo:""

}

2.点击一下将obj添加进数组PersonNamelist

4.该项目会从后台传来一个新增最多的人数所以需要判断下PersonNamelist中的guestList的长度

addPerson(){

let obj={

id:"",

name:"",

mobilePhone:"",

idCardNo:""

  }

if(this.PersonNamelist.guestList.length<(后台数据))

this.PersonNamelist.guestList.push(obj)

}

else{

Toast({

message:'已超出该房间可住最大人数',

position:'bottom',

duration:1000,

className:'panduan'

    })

}

}

vue显示不到边

看到一个解释是：白边可能是vue框架弄的

故解决办法是：把body也设置背景色

底部出现空白区域

检查内容区是否超出html区域

vue页面四周有白边的问题

在export default的代码中添加如下代码，设置body的属性margin:0和padding:0

beforeRouteEnter(to, from, next) {

// 添加背景色 margin:0padding:0是为了解决vue四周有白边的问题

document.querySelector('body').setAttribute('style', 'margin:0padding:0')

next()

},

beforeRouteLeave(to, from, next) {

// 去除背景色

document.querySelector('body').setAttribute('style', '')

next()

},

再刷新下看看，四周的白边已经消失了

---