小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距

在element-ui中   单选框的v-model的值最好是一个字符串 
否者可能不能够进行数据回填哈
单选框 的类型必须是字符串类型哈  在elemnet-ui中


如果你想从A页面拿到B页面中的值
可以有两种方法
第一种是  挂载到原型上
第二种是   import    XX  from "../../../../public/appconfig.json"
引入json文件哈
import aa from "../../../../public/appconfig.json"


在html模板中，可以直接进行两个变量的相加哈！！
 <img :src="useUploadFileAddressApi+currentpersonphoto" class="avtargeImg" />


在html模板中，变量拼接字符串
<img :src="`http://192.168.38.100:8089/${currentpersonphoto}`" class="avtargeImg" /> 


element-ui中 el-upload上传组件中
抽取出去的值   apiAddress是data中的一个上传地址。
:action="apiAddress" 

<div style="display:flex">
                        <el-upload
                        v-model="formData.imageUrl"
                        class="avatar-uploader"
                        :action="apiAddress"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div> 

手动上传直接添加
  :auto-upload="false"
参考的网址  https://blog.csdn.net/yangwqi/article/details/101520826 


表格跳转
<el-table-column  label="名称" fit="false">
                <template slot-scope="scope">
                <router-link to=""  @click.native="goDetails(scope.row)" class="namefontcolor">{{scope.row.contentName }} </router-link>
                </template>
</el-table-column>



父传递给儿子图片路径的时候，还是以[父亲为基础去找路径] 同时加上require；
 imgIconData:[ require("../../../assets/image/icon_card_n.png")]


  没有给canvas固定的宽高.导致拍照后，图片不是原来的那张图片。
  所以使用canvas展示图片时，要给宽高哈
   <video id="video" class="gather-photo-img"   style="width=100%; height=100%; object-fit: fill" autoplay ref="videos"  v-show="showVideo"></video>
   <canvas v-show="!showVideo"   width="300px" height="390px" class="personImgSize"  id="personImgSize" ></canvas>


旋转  将上上的箭头变为乡下的箭头
.left-icon-menu-box-size:last-child{
    transform: rotate(-180deg)
}


控制label标签于文本框之间的间距  使用负值
 <el-form-item label="显示名称:" prop="name" style="width:440px">
         <el-input v-model="formData.name" style="margin-left:-7px"></el-input>
</el-form-item>


base64的渲染方式  跟普通变量渲染放肆是一样的
<div @contextmenu.prevent="currentshowicon=closeindex" v-for="(item,closeindex) in listnetworkData" :key="closeindex" @mouseleave="mouseOutWork">
      <img class="network-img-box-img" :src='item.urlPath'/>  //base64的渲染方式
</div>


vue中v-for动态添加背景色
参考地址   https://blog.csdn.net/Poppy_LYT/article/details/98750723
<p style="{backgrond:item.bg}">   </p>