vue自带方法-简单理解
<!-- 图片 -->
<template>
<div class="container">
<p class="top-select">
图片类型：
<select class="search-select" v-model="topPicType">
<option v-for="op in picTypeOptions" :key="op.value" :value="op.value">{{op.name}}</option>
</select>
</p>
<div class="item" v-for="(item,index) in imageLists" :key="index">
<img class="item-pic" :src="imageUrl" alt>
<p>图片类型：回执</p>
<p>录入人：王某墨迹</p>
<p>录入时间：2019/01/03 18:20:30</p>
<div>
<span class="item-span" @click="showPopup">查看原图</span>
<span class="item-span" style="float:right" @click="deleteItem(index)">删除图片</span>
</div>
</div>
<div class="item" v-if="imageLists.length < 10">
<img class="item-pic" :src="imageUrl" @click="uploadImage" alt>
<p>
图片类型：
<select class="search-select" v-model="picType">
<option v-for="op in picTypeOptions" :key="op.value" :value="op.value">{{op.name}}</option>
</select>
</p>
<p></p>
<p></p>
<div>
<span class="item-span" @click="uploadItem">上传</span>
<input
style="display: none"
type="file"
name="fileInput"
id="fileInput"
accept="image/jpeg, image/jpg, image/png"
@change="changeImage($event)"
ref="fileInput"
>
</div>
</div>
<Modal title="查看原图" v-model="isPopupVisible" :width="width">
<component :is="updateView" account="parm.userAccount" @close="closePopup"></component>
</Modal>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Modal from "@/components/Modal";
export default {
//import引入的组件需要注入到对象中才能使用
components: { Modal },
data() {
//这里存放数据
return {
width: "50%",
parm: {},
isPopupVisible: false,
updateView: () => import("./banner"),
picType: "请选择",
topPicType: "请选择",
picTypeOptions: [
{ value: "请选择", name: "请选择" },
{ value: "15", name: "出运" },
{ value: "3", name: "到站" },
{ value: "16", name: "派送" },
{ value: "17", name: "完成" }
],
imageLists: [],
imageUrl:
"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560752894&di=45988ade76bb2a9fbae070c6c8190739&src=http://5b0988e595225.cdn.sohucs.com/images/20180116/b353c95957204ac6aa6866bc99e830b9.jpeg"
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
showPopup() {
this.isPopupVisible = true;
},
closePopup() {
this.isPopupVisible = false;
},
uploadImage() {
this.$refs.fileInput.click();
},
uploadItem() {
var json = {};
json.imageUrl = this.imageUrl;
json.selectItem = this.picType;
this.imageLists.push(json);
this.imageUrl =
"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560752894&di=45988ade76bb2a9fbae070c6c8190739&src=http://5b0988e595225.cdn.sohucs.com/images/20180116/b353c95957204ac6aa6866bc99e830b9.jpeg";
this.picType = "请选择";
},
deleteItem(index) {
this.imageLists.splice(index, 1);
},
changeImage(e) {
var file = e.target.files[0];
if ("image/jpegimage/jpgimage/png".indexOf(file.type) == -1) {
alert("选择格式错误");
return;
}
var reader = new FileReader();
var that = this;
reader.readAsDataURL(file);
reader.onload = function(e) {
that.imageUrl = this.result;
};
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.container {
overflow: scroll;
height: 850px;
}
.item {
background: white;
padding: 24px;
margin-left: 24px;
margin-top: 24px;
display: inline-block;
float: left;
}
.item p {
margin-top: 16px;
height: 22px;
font-size: 16px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 1);
line-height: 22px;
}
.item-pic {
width: 320px;
height: 320px;
min-width: 320px;
min-height: 320px;
background: rgba(222, 69, 48, 1);
border-radius: 8px;
border: 2px solid rgba(0, 60, 141, 1);
cursor: pointer;
}
.item-span {
width: 120px;
height: 32px;
line-height: 32px;
background: rgba(255, 255, 255, 1);
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 1);
font-size: 14px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.search-select {
height: 32px;
width: 120px;
background: rgba(255, 255, 255, 1);
border-radius: 2px;
border: none;
font-size: 14px;
font-weight: 400;
color: #000000;
line-height: 32px;
padding: 0 5px;
border: 1px solid rgba(151, 151, 151, 1);
}
.top-select {
font-size: 16px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 1);
line-height: 22px;
margin-left: 24px;
margin-top: 24px;
}
</style>
