element使用笔记

目录

 

Element-UI 上传图片到达一定数量后隐藏图片上传按钮

element_ui会用到el-dialog做为弹窗，但这个弹窗的宽度默认为50%。

---

Element-UI 上传图片到达一定数量后隐藏图片上传按钮

<el-cascader expand-trigger="hover" :options="category" v-model="form.category"></el-cascader>
data() {
   return {
		category: [{
		                  value: '1',
    	                  label: '企业新闻',
				   },{
				          value: '2',
				          label: '帮助中心',
				  }],
				form: {
					category:['1'],
				},
			    }
			}
//cascader设置默认值

在项目中使用了element的el-upload上传图片组件，需求是上传一张图片而已，但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮，实在是接受不了，并且需求是上传之后没有这个上传按钮，删除图片之后再出现。

首先我通过浏览器找到了这个上传图片按钮的class名称为  .el-upload–picture-card 我知道不可以直接修改，所以决定给这个组件绑定一个class名

:class="{hide:hideUpload}"

之后data里面设定一个初始的状态值

hideUpload: false

在el-upload中绑定一个on-change事件，这个事件有两个参数（file，fileList）并且在添加文件、上传成功和上传失败时都会被调用：

if(!!file.data){
this.hideUpload = file.data.length >= this.limitCount;
}else{
this.hideUpload = false;
}

当上传图片的数量大于或等于你所限制的上传图片数量时（也就是limit，hideUpload 为true

则像组件添加一个名为hide的class名在el-upload中绑定一个on-remove事件，这个事件在删除图片时调用

if(!!file.data){
this.hideUpload = file.data.length >= this.limitCount;
}else{
this.hideUpload = false;
}

css代码 vue中 取消scope

.hide .el-upload--picture-card {
    display: none;
}

element_ui会用到el-dialog做为弹窗，但这个弹窗的宽度默认为50%。

因项目中需要调整弹偿的宽度，需要设置其属性。 尝试过程如下：在el-dialog增加了一个customClass, 设置如下：

      <el-dialog    customClass="customWidth" title="日志" v-model="dialogFormVisibleAdd">
      。。。。
      </el-dialog>
      
      <style>
       .customWidth{
        width:80%;
       }
      </style>