vue自定义组件封装_vue组件的双向绑定实现

vue自定义组件封装_vue组件的双向绑定实现vue组件封装,vueelementui组件封装,vue图片上传,elementui图片上传

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

封装组件的v-model

再看组件的时候,不如elementui等等,我们时常看到它们的组件都是直接通过v-model双向绑定的,而不是通过我们常用的属性(prop)传递过去,子组件修改通过$emit,或者通过vuex等等来返回父组件,这样的方法也不是说不行,但是总感觉没有elementui那样的写法高级。所以我们也来简单的封装一个看起来高级一点点的组件。
简单的借用elementui的组件做一个二开

<template>
  <div class="image-video-upload">
    <div v-if="imageUrl" class="upload-success">
      <custom-image :src="imageUrl" class="result-image" :style="imageStyle" />
      <i v-if="!disabled" class="el-icon-circle-close" @click="handleRemove" />
    </div>
    <el-upload
      v-show="!imageUrl"
      ref="uploader"
      class="uploader"
      :action="action"
      :disabled="disabled"
      :headers="headers"
      :accept="accept"
      :show-file-list="false"
      :on-success="handlerSuccess"
      :on-error="handlerError"
      :before-upload="beforeUploadHandler"
      :style="imageStyle"
      :on-progress="handleProcess"
      :data="uploadData"
    >
      <el-progress v-if="uploading" type="circle" :percentage="percentage" :width="80" />
      <i v-else class="el-icon-plus" />
    </el-upload>
    <div class="el-upload__tip" v-html="tip" />
  </div>
</template>
export default { 

name: 'UploadImage',
components: { 

CustomImage
},
props: { 

//v-model直接使用value
value: { 

type: String,
default: ''
},
bucket: { 

type: String,
default: 'knight-dev'
},
tip: { 

type: String,
default: ''
},
// 控制图片样式(长宽等)
imageStyle: { 

type: String,
default: 'width: 200px;height: 100px;'
},
accept: { 

type: String,
default: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP'
},
width: { 

type: Number,
default: 0
},
height: { 

type: Number,
default: 0
},
// 图片尺寸验证类型
validType: { 

type: Number,
default: 0 // 0:比列验证,1:实际大小验证
},
// 图片尺寸验证
valid: { 

type: Number,
default: 0 // 0: 不验证,不提示 1:验证提示,不停止上传 2: 验证提示,停止上传
},
// 图片大小验证,单位M
imageSize: { 

type: Number,
default: 3
},
disabled: { 

type: Boolean,
default: false
}
},
data() { 

return { 

uploading: false,
percentage: 0,
imageUrl: this.value ? downloadUrl + '/' + this.value : '',
action: uploadUrl
}
},
computed: { 

uploadData() { 

return { 
 bucket: this.bucket }
},
headers() { 

const header = { 
}
const { 
 access_token,  login_name } = this.$store.getters.authInfo
header['Authorization'] = 'Bearer ' + access_token
return header
}
},
watch: { 

value(value) { 

this.imageUrl = value ? downloadUrl + '/' + value : ''
}
},
methods: { 

handleProcess(event, file, fileList) { 

this.percentage = +file.percentage.toFixed(0)
},
beforeUploadHandler(file) { 

this.uploading = true
this.percentage = 0
const fileSize = file.size / 1024 / 1024
if (fileSize > this.imageSize) { 

this.uploading = false
this.$message.error(`图片文件大小不能超过 ${ 
this.imageSize}MB!`)
return false
} else if (this.valid == 0 || this.width == 0 || this.height == 0) { 

return true
}
return new Promise((resolve, reject) => { 

this.filetoDataURL(file, url => { 

this.dataURLtoImage(url, img => { 

const { 
 width, height } = this
let validTemp = true
let str = ''
if (this.validType == 0) { 

validTemp =
(width / height).toFixed(2) ==
(img.width / img.height).toFixed(2)
str = '比例'
} else { 

validTemp = width == img.width && height == img.height
str = '宽高'
}
if (!validTemp) { 

this.$message.error(`图片${ 
str}不符合建议要求!`)
if (this.valid == 2) { 

this.uploading = false
return reject()
}
}
resolve()
})
})
})
},
handlerSuccess(res) { 

if (res.code == 200) { 

const imageUrl = res.data.fileName[0]
this.uploading = false
this.setValue(imageUrl)
}
},
handlerError() { 

this.uploading = false
},
setValue(imageUrl) { 

this.imageUrl = imageUrl
//返回值直接使用$emit('input','value')即可
this.$emit('input', imageUrl)
},
handleRemove() { 

this.setValue('')
}
}
}
.image-video-upload { 

display: flex; .uploader, .result-image { 

display: flex;
font-size: 28px;
color: #8c939d;
text-align: center;
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
cursor: pointer;
}
.result-image { 

border: 1px solid #c0ccda;
}
.uploader{ 

&:hover { 

border-color: #409eff;
color: #409eff;
}
::v-deep { 

.el-upload{ 

width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; &:focus{ 

border-color: #fbfdff;
color: #8c939d;
}
&:hover{ 

border-color: #409eff;
color: #409eff;
}
}
}
}
.el-upload__tip { 

flex: 1;
line-height: 21px;
display: flex;
align-items: center;
margin-left: 20px;
margin-top: 0;
}
.upload-success { 

position: relative;
border-radius: 6px;
overflow: hidden; &:hover { 

.icon-success { 

display: none;
}
.remove-wrapper { 

display: flex;
}
}
.el-icon-circle-close{ 

position: absolute;
top: 0;
right: 0;
font-size: 20px;
color: #F56C6C;
}
}
.remove-wrapper { 

display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.icon-success { 

position: absolute;
right: -15px;
top: -6px;
width: 40px;
height: 24px;
// line-height: 24px;
text-align: center;
background: #13ce66;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); .el-icon-check { 

color: #ffffff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.el-icon-delete { 

font-size: 20px;
color: #fff;
cursor: pointer;
}
}

这样使用的时候就可以直接引入组件使用了,绑定的值也是可以通过v-midel双向了
这就是最终的呈现效果啦!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190462.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 【Cover Letter 】SCI 投稿加分必备,手把手教你写 投稿Cover Letter

    【Cover Letter 】SCI 投稿加分必备,手把手教你写 投稿Cover LetterCoverLetter是我们投稿时,与手稿一同发送给编辑的投稿信。一封内容简洁的投稿信,会让编辑对你文章的第一印象加分不少。今天,我们一起来学习一下,一篇给文章加分的投稿信应该怎么写。投稿信的内容主要包含文章的标题、类型,没有一稿多投的声明,文章的主要内容及亮点,还有通讯作者的信息。敲黑板!一篇投稿信最重要的两点,是语言简洁和符合期刊标准。所以,要想写好投稿信,我们务必要了解各…

  • 大数据技术的发展趋势

    大数据技术的发展趋势英国牛津大学教授维克托·迈尔-舍恩伯格在其所撰写的《大数据时代》中表述,大数据时代是“已经发生的未来”,而在这个已经发生的未来里,没有旁观者。作为时代发生的必然产物,大数据正加速渗透至我们的日常生活,正完成对各传统领域的颠覆。本文从大数据时代的特点出发,为读者介绍目前的大数据技术的发展趋势以及大数据的生态体系。大数据时代的特点和市场规模大数据时代两个特点。第一,大数据技术以开源为主,迄今为止,尚未形成绝对技术垄断,即便是IBM、甲骨文等行业巨擘,也同样是集成了开源技术和该公司已有产品而已。开源技

  • CentOS7修改IP地址后无法ping通问题记录[通俗易懂]

    CentOS7修改IP地址后无法ping通问题记录在键入ifconfigenp0s3192.168.56.2后,在cmd中无法ping通此IP地址解决办法:键入sudoifconfigenp0s3192.168.56.2

  • dell计算机运行慢怎么解决方法,戴尔笔记本电脑运行速度慢怎么办?

    dell计算机运行慢怎么解决方法,戴尔笔记本电脑运行速度慢怎么办?戴尔笔记本电脑运行速度慢怎么办?戴尔(Dell),是一家总部位于美国德克萨斯州朗德罗克的世界五百强企业,由迈克尔·戴尔于1984年创立。戴尔以生产、设计、销售家用以及办公室电脑而闻名,不过它同时也涉足高端电脑市场,生产与销售服务器、数据储存设备、网络设备等。下面是小编收集整理的戴尔笔记本电脑运行速度慢的解决方法,欢迎阅读。戴尔笔记本电脑运行速度慢的解决方法用户在购买电脑的时候,如果预装了Win8系…

  • Java设计模式(五)之创建型模式:原型模式

    Java设计模式(五)之创建型模式:原型模式

  • Java中&&和&以及||和|的区别「建议收藏」

    Java中&&和&以及||和|的区别「建议收藏」在java的逻辑运算符中,有这么四类:&amp;&amp;(短路与),&amp;(与),|(或),||(短路或)。&amp;&amp;和&amp;都是表示与,区别是&amp;&amp;只要满足第一个条件,后面条件就不再判断。而&amp;要对所有的条件都进行判断。看下面的程序:“&amp;”操作:publicclassOperateDemo01{/**验证"与"…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号