十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇文章为大家展示了使用vue 2.0怎么对model组件进行封装,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联建站-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、成都服务器托管、等保安全、私有云建设等企业级互联网基础服务,电话联系:13518219792
单文件组件
使用单文件组件封装model的模板、逻辑和样式,之后就可以在页面中调用此通用组件。
需求
model有两个使用场景:
1、备注/修改密码(简易):
在屏幕中垂直居中
2、添加/修改/展示信息(复杂):
距离屏幕顶部200px,内容过长时可滚动。
3、常规要求(共同点):
标题,关闭icon
点击确定/关闭/遮罩,隐藏model组件
分析上述需求点,得到如下图:
wrapper:负责遮盖屏幕
inner:负责垂直居中/距顶部200px
title:可变化标题
content:可变化的内容区域
方案
1、Prop传参
title(标题)、show(隐藏/显示)、width(宽度)、type(居中/顶部)
2、自定义事件
关闭model
3、slot分发
内容区域可自定义
4、滚动穿透
具体实现
template
{{title}}
script
export default { name: 'MyModel', props: { title: String, show: Boolean, width: Number, type: String }, data () { return { scrollTop: '' } }, watch: { show: function (val, oldVal) { function getScrollTop () { return document.body.scrollTop || document.documentElement.scrollTop } if (val) { // 在弹出层显示之前,记录当前的滚动位置 this.scrollTop = getScrollTop() let body = document.querySelector('body') body.className = 'not-scroll' // 把脱离文档流的body拉上去!否则页面会回到顶部! document.body.style.top = -this.scrollTop + 'px' } } }, methods: { close: function (e) { function to (scrollTop) { document.body.scrollTop = document.documentElement.scrollTop = scrollTop } let target = e.srcElement || e.target if (target.className === 'model-wrapper' || target.className.indexOf('ivu-icon-ios-close-empty') > -1 || target.className === 'model-wrapper-top') { this.$emit('close') let body = document.querySelector('body') body.className = '' // 滚回到老地方! to(this.scrollTop) } } } }
style
引用
import MyModel from '../componets/model.vue' export default { name: 'test', components: { MyModel }, data () { return { show: false } }, methods: { /** * 打开model */ closeModel: function () { this.show = false }, /** * 关闭model */ showModel: function () { this.show = true } } }
引用一
this is content area。
引用二
this is content area。
demo
垂直居中
距顶部200px,可滚动
上述内容就是使用vue 2.0怎么对model组件进行封装,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。