vue组件实践-开发图片预览
2019-01-16 本文已影响3人
渝聆墨
甲方需求
开发一个像微信朋友圈图片预览界面，可以左右滑动查看图片
需求分析
了解客户基本需求，从需求点上去获取功能需求与具体的代码实现，需求分析也是很重要滴~~
需求分析.png
功能分析
根据需求分析实际上代码要实现的需求，是否需要改善，或则选择合理的方案，不要客户的需求就全盘接受，需要适当权衡客户所需。所以继需求分析后就是功能分析，该功能具体实现有什么难点，是否需要调整方案等。
功能分析.png
版式设计
虽然对于许多开发人员而言认为并不需要会什么设计，但是作为新一代的开发人员会点相关的技能还是有必要的，至少自己脑海里得有一个图形知道自己要做什么，这样可以在设计师未设计前提前做好准备，先人一步。
版式设计
开始开发
开始开发是否也不要立马就拿起键盘就一波走，管他三七二十一就是干，万一卡带了怎么办，那么就理一理功能实现思路走走流程吧。
开发流程导图.png
HTML代码
<template>
<div id="masking" class="masking" v-show="isshow" @click="commitExit">
<div class="toast" v-show="isend">最后一张图</div>
<!--显示图片-->
<img class="masking-img" :src="showimg" />
<div class="del_click" @click.stop="commitExit">
删除
</div>
<div class="controler">
<!--左移-->
<img @click.stop="onLeft" class="controler_icon contro-left" src="../../assets/icon_left.png" />
<!--右移-->
<img @click.stop="onRight" class="controler_icon contro-right" src="../../assets/icon_right.png" />
</div>
</div>
</template>
CSS样式代码
<style scoped="scoped">
.masking {
z-index: 999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000000;
display: inline-block;
vertical-align: middle;
padding: 0px;
}
.toast {
border: solid 1px red;
border-radius: 6px;
position: absolute;
bottom: 5rem;
left: 5rem;
right: 5rem;
text-align: center;
margin-left: 0;
margin-right: 0;
color: red;
padding: 0.2rem;
}
.masking-img {
width: 100%;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 0;
bottom: 0;
background-size: 100%;
vertical-align: middle;
display: inline-block;
}
.del_click {
position: absolute;
top: 3rem;
right: 3rem;
border: solid 1px #04BE02;
color: #04BE02;
padding: 2px 10px;
border-radius: 6px;
font-weight: bold;
}
.controler {
position: absolute;
top: 0;
bottom: 0;
vertical-align: middle;
width: 100%;
height: 40px;
margin-bottom: auto;
margin-top: auto;
display: flex;
padding: 10px;
}
.controler_icon {
width: 1.5rem;
height: 1.5rem;
padding: 0.2rem;
background-color: #CCCCCC;
}
.contro-right {
position: absolute;
right: 2rem;
}
</style>
JS功能代码
<script>
export default {
name: 'masking',
data() {
return {
showimg: "",
showindex: 0,
baseimgs: [],
isend: false
}
},
created() {
//初始化显示状态
this.isshow = false;
},
//接受父对象传递数据
props: {
imgs: Array,
isshow: false
},
watch: {
//监听图片数组
imgs: {
handler: function(val, oldval) {
if(val != oldval) {
this.$nextTick(() => {
if(this.isEmptry(this.imgs)) {
//更新数组
this.baseimgs = this.imgs[0];
//初始化下标
this.showindex = 0;
//初始化隐藏最后一张图提示
this.isend=false;
//更新设置图片
this.onUpdataImg();
}
})
}
},
immediate: true, //关键
deep: true
},
},
methods: {
//通知父组件关闭
commitExit() {
//关闭方法为onmaskclose
this.$emit('onmaskclose', false);
}, //左移
onLeft: function() {
this.showindex--;
if(this.showindex > 0) {
this.onUpdataImg();
} else {
this.showindex = 0;
this.onUpdataImg();
}
//关闭最后一页提示
if(this.isend) {
this.isend = false;
}
}, //右移
onRight: function() {
this.showindex++;
if(this.showindex < this.baseimgs.length) {
this.onUpdataImg();
} else {
//提示最后一张图
this.isend = true;
//设置当前下标为数组有效下标最大值
this.showindex = this.baseimgs.length - 1;
//设置为最后一张图
this.onUpdataImg();
}
}, //判断数组是否为空
isEmptry: function(value) {
if(value != undefined && value.length > 0) {
return true;
} else {
return false;
}
},//更新设置图片
onUpdataImg: function() {
//判断数组
if(this.isEmptry(this.baseimgs)) {
this.showimg = this.baseimgs[this.showindex];
}else{
this.isshow = false;
this.commitExit();
}
}
}
}
</script>
测试调用
接下来开始在父类组建中使用组建：
1.引用组件，使用 import 名称 from 路径
2.在template中写入组建名称，注意以标签的方式，如果有下划线可以用大写单词首字母拼接。
3.需要在组件标签上写上对应的传参或则回调方法。
<template>
<maskbox :imgs="showimg" :isshow="isShowMask" @onmaskclose="onMaskClose"></maskbox>
</template>
<script>
import maskbox from "../element/maskingBox.vue"
export default {
components: { maskbox },
data() {return {
showimg:[],
isShowMask:false
}
},methods: {
//获取预览图片回调
onMaskClose:function(value){
this.isShowMask=value;
}
}
}
</script>
知识点解析
1.scoped属性：
在style设置该属性，表示该样式只适用当前模板下；如果想要在该样式下使用预处理语言less,配置好less加载引擎后在style标签上添加lang="less"就可以使用。
2.父组建向子组建通信
需要使用props，它可以是一个json对象，也可以是一个数组，如:
props{value1:String,value2:Array}，
props["value1","value2"]
*注意写好参数类型语法报错
3.子组件向父组建通信
需要使用emit(方法名，参数)调用，如：
this.$emit('onmaskclose', false);
*其中方法名使用全小写，不然可能会出问题。
4.watch的作用
用于监听data中值的变化,大概的使用方式：
export default {
data: {
valueName: 'abc'
},
watch: {
valueName(newValue, oldValue) {
// 值更新
},
immediate: true, //关键
deep: true
}
}
- this.
nextTick，则可以在回调中获取更新后的 DOM。
6.在编写代码时要保持代码整洁：
*变量或者定义方法尽量保证命名规范，见名知意；
*代码中尽量不要出现重复功能代码块，能够封装的就封装起来；
*代码编写过程中写好注释，不要认为自己能够看懂或则都是英文会英文的都能看懂之类的想法。
结语
本篇文章也算自己在平时开发中的一些总结，并且对此进行记录，希望能够给看这篇文章的你们也能留下一点点收获。
最后提醒自己：
一切的焦虑不安都源自于自己不会总结与归零，还有让自己从零开始。
