vue 2.0封装model组件的方法
发布时间：2020-12-17 02:51:10 所属栏目：百科 来源：网络整理
导读：本文介绍了vue 2.0封装model组件的方法，分享给大家，希望对大家有所帮助 单文件组件 使用单文件组件封装model的模板、逻辑和样式，之后就可以在页面中调用此通用组件。 需求 model有两个使用场景： 1、备注/修改密码(简易)： 在屏幕中垂直居中2、添加/修改/
|
本文介绍了vue 2.0封装model组件的方法，分享给大家，希望对大家有所帮助 单文件组件使用单文件组件封装model的模板、逻辑和样式，之后就可以在页面中调用此通用组件。
需求model有两个使用场景： 1、备注/修改密码(简易)： 在屏幕中垂直居中 2、添加/修改/展示信息(复杂)： 距离屏幕顶部200px，内容过长时可滚动。 3、常规要求(共同点)： 标题，关闭icon 点击确定/关闭/遮罩，隐藏model组件 分析上述需求点，得到如下图：
方案1、Prop传参 title(标题)、show(隐藏/显示)、width(宽度)、type(居中/顶部) 2、自定义事件 关闭model 3、slot分发 内容区域可自定义 4、滚动穿透 具体实现template {{title}}
script -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。
引用二 demo 垂直居中
距顶部200px，可滚动
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
