甲方需求
开发一个像微信朋友圈图片预览界面, 可以左右滑动查看图片
需求分析
了解客户基本需求, 从需求点上去获取功能需求与具体的代码实现, 需求分析也是很重要滴~~
需求分析. 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.
6. 在编写代码时要保持代码整洁:
* 变量或者定义方法尽量保证命名规范, 见名知意;
* 代码中尽量不要出现重复功能代码块, 能够封装的就封装起来;
* 代码编写过程中写好注释, 不要认为自己能够看懂或则都是英文会英文的都能看懂之类的想法.
结语
本篇文章也算自己在平时开发中的一些总结, 并且对此进行记录, 希望能够给看这篇文章的你们也能留下一点点收获.
最后提醒自己:
一切的焦虑不安都源自于自己不会总结与归零, 还有让自己从零开始.
来源: http://www.jianshu.com/p/001ad20db99b