iview官网 vue？iview和element哪个好？ _iview官网

文章插图
本篇文章给大家谈谈iview官网,以及iview官网 vue对应的知识点，希望对各位有所帮助，不要忘了收藏本站！
内容导航：

iview 2.x 升级到3.0报错按照官网配置了全局transfer 和 size 两个属性？
iview二级路由第一次点击的时候不高亮
iview和element哪个好
Upload组件上传限制（宽、高、尺寸、格式）
vue.js iview使用官网例子Radio-group无法生效单/复选框不显示文字怎么解决？
iview的表格行/列合并

Q1：iview 2.x 升级到3.0报错按照官网配置了全局transfer 和 size 两个属性？zn=conv(xn,yn)
xn=deconv(zn.yn)
主要的语句就是这两句
Q2：iview二级路由第一次点击的时候不高亮可以用router-link的属性：active-class和exact 。
什么要使用router-link? 官网上说明了这几点好处：组件支持用户在具有路由功能的应用中（点击）导航。通过to属性指定目标地址，默认渲染成带有正确链接的a标签，可以通过配置tag属性生成别的标签。另外当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。
Q3：iview和element哪个好这两组都是英文字母，相比较的话，我会选择后者，虽然看不懂，但是我一定会努力学习它
Q4：Upload组件上传限制（宽、高、尺寸、格式）iview-Upload组件官网链接： https://iview.github.io/components/upload
效果展示
css
.out-box{
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 20px 20px 10px;
}
.img-border{
border: 1px solid #e6e6e6;
border-radius: 8px;
margin-right: 20px;
width:100px;
height:100px;
}
.upload-box{
width: 100px;
height:100px;
display: inline-block
}
.upload-inner-box{
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
background: #F5F5F5;
}
.upload-tip{
color:red
}
template
<div class="out-box">
<img class="img-border" v-if="seeView" :src="https://www.08ts.cn/this.imageUrl"/>
<Upload ref="uploadFiles"
:show-upload-list="false"
:max-size="5120"
:on-success="handleSuccess"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUploadImg"
:loading="true"
type="drag"
:format="['jpg','jpeg','png','gif']"
:on-format-error="handleFormatError"
action="url"
class="upload-box">
<div class="upload-inner-box">
<div style="padding-top: 20px">+</div>
<div style="font-size: 12px">请上传图片</div>
</div>
</Upload>
<div class="upload-tip">图片大小勿超5M，尺寸为{{minWidth}}*{{minHeight}}，勿小于该尺寸，且尽量以该长宽比制图以保证页面效果</div>
</div>
data
seeView:"false",//是否展示已上传的图片
imageUrl:"",//上传图片的url
url:"",//上传的地址
minWidth:number,//最小宽度
minHeight:number,//最小高度
methods
//上传成功
handleSuccess(response, file, fileList) {
this.imageUrl = response.result;
this.seeView = true;
},
//上传的文件大小超出要求
handleMaxSize() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图大小不能超过5M!!!",
});
},
//上传文件格式不符合要求
handleFormatError() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图格式错误!!!",
});
},
//上传前对图片宽高的检验
beforeUploadImg(file) {
this.checkImageWidth(file, minWidth).then((checkWidth) => {
if (checkWidth) {
this.checkImageHeight(file, minHeight).then((checkHeight) => {
if (checkHeight) {
this.$refs.uploadFiles.post(file);
}
});
}
});
return false;
},
// 异步方法检验图片宽度
async checkImageWidth(file, widthCheck) {
let width = await this.getImageWidth(file);
let checkWidth = width > widthCheck || width == widthCheck;
if (!checkWidth) {
this.$Notice.warning({
title: "图片宽度错误",
desc:
file.name +
" 的宽度为" +
width +
"px, 请上传宽度大于" +
widthCheck +
"px的图片. ",
});
}
return checkWidth;
},
// 获取图片宽度
getImageWidth(file) {
return new Promise((resolve) => {
【iview官网 vue？iview和element哪个好？】const reader = new FileReader();
reader.readAsDataURL(file);