|
|
@@ -1,63 +1,81 @@
|
|
|
<template>
|
|
|
<div class="loader-ctnr">
|
|
|
- <div class="loader-box">
|
|
|
- <img src="../assets/img/camera.png" id="pic">
|
|
|
+ <p class="loader-box" v-show="!value" @click="handleClick"></p>
|
|
|
+ <div class="delete-box" v-if="value">
|
|
|
+ <img :src="value">
|
|
|
+ <i class="close-btn" @click="handleDelete">x</i>
|
|
|
</div>
|
|
|
- <p>{{msg}}</p>
|
|
|
+ <p class="loader-text">{{ title }}</p>
|
|
|
+ <input style="display:none" type="file" ref="upload" @change="handleSelect">
|
|
|
+ <!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script type="text/javascript">
|
|
|
export default{
|
|
|
- props:["msg"],
|
|
|
+ props:{
|
|
|
+ title:String,
|
|
|
+ value:{
|
|
|
+ required: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
methods:{
|
|
|
- upLoadImg:function(obj){
|
|
|
- var file = obj.files[0];
|
|
|
- console.log(obj);console.log(file);
|
|
|
- console.log("file.size = " + file.size); //file.size 单位为byte
|
|
|
- var reader = new FileReader();
|
|
|
- //读取文件过程方法
|
|
|
- reader.onloadstart = function (e) {
|
|
|
- console.log("开始读取....");
|
|
|
- }
|
|
|
- reader.onprogress = function (e) {
|
|
|
- console.log("正在读取中....");
|
|
|
- }
|
|
|
- reader.onabort = function (e) {
|
|
|
- console.log("中断读取....");
|
|
|
- }
|
|
|
- reader.onerror = function (e) {
|
|
|
- console.log("读取异常....");
|
|
|
- }
|
|
|
- reader.onload = function (e) {
|
|
|
- console.log("成功读取....");
|
|
|
+ handleClick() {
|
|
|
+ this.$refs.upload.click()//这里为什么是用click?而不是change
|
|
|
+ },
|
|
|
+ handleSelect(ev) {//这里的ev是事件对象,但是怎么获取？如果点击获取，那么不是可以不用传入吗？
|
|
|
+ var file = ev.target.files[0];
|
|
|
|
|
|
- var img = document.getElementById("pic");
|
|
|
- img.src = e.target.result;
|
|
|
- //或者 img.src = this.result; //e.target == this
|
|
|
+ if (FileReader) {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onloadend = ev => {
|
|
|
+ this.$emit('input',ev.target.result);//此处的input是指input事件
|
|
|
+ //ev.target是对事件起源目标的引用，它是个只读属性，此处指reader，
|
|
|
+ //因为onloadend也是一个事件
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- reader.readAsDataURL(file)
|
|
|
+ },
|
|
|
+ handleDelete() {
|
|
|
+ const obj = this.$refs.upload;
|
|
|
+ obj.value = '';//更改了input的value值
|
|
|
+ this.$emit('input','');//更改父组件的value值
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.loader-ctnr{
|
|
|
- display: inline-block;
|
|
|
- padding-top: 0.266525rem;
|
|
|
- padding-bottom: 0.333156rem;
|
|
|
+ padding: 20px 0;
|
|
|
.loader-box{
|
|
|
width: 1.865672rem;
|
|
|
height: 1.865672rem;
|
|
|
- margin: 0 auto;
|
|
|
- border:2px solid #60c0ff;
|
|
|
+ border: 2px solid #60c0ff;
|
|
|
border-radius: 10px;
|
|
|
- line-height: 2.265672rem;
|
|
|
+ background: url(../assets/img/camera.png) no-repeat center;
|
|
|
+ background-size: auto 0.746269rem;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .delete-box{
|
|
|
+ position: relative;
|
|
|
img{
|
|
|
- width: 0.746269rem;
|
|
|
+ width: 1.865672rem;
|
|
|
+ height: 1.865672rem;
|
|
|
+ }
|
|
|
+ .close-btn{
|
|
|
+ color: red;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: rgba(0,0,0,0.3);
|
|
|
+ font-size: 32px;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 0.533049rem;
|
|
|
+ height: 0.533049rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.533049rem;
|
|
|
}
|
|
|
}
|
|
|
- p{
|
|
|
+ .loader-text{
|
|
|
font-size: 0.373134rem;
|
|
|
margin-top: 0.199893rem;
|
|
|
}
|
