码迷,mamicode.com
首页 > 其他好文 > 详细

11、VUE混合

时间:2019-08-24 15:11:18      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:vue   lis   窗口   idt   lex   高度   mamicode   dal   代码   

1、混合的概念(mixture

混合是以一种灵活的方式,为组件提供代码复用功能。(类似于封装)

混合对象可以包含任意的组件选项。当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中。

 

2、混合的例子

    使用混合实现Modal窗口。

 技术图片

 

 

 技术图片

 

 

 

html{
    width:100%;
    height:100%;
}
body{
    width:inherit;
    height:inherit; /*继承父控件的高度 */
    margin: 0;
    padding: 0;
}
.modal{
    width:500px;
    height:300px;
    display: none;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
.shade{
    background-color: rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    position: absolute;  /*位移 */
    top:0;
    left: 0;
    z-index: 999;
    display: flex;  /*使用弹性布局 */
    justify-content: center;
    align-content: center;
}

 

3、混合和构造器继承的区别

技术图片

 

4、混合和引用的区别

 技术图片

 

11、VUE混合

标签:vue   lis   窗口   idt   lex   高度   mamicode   dal   代码   

原文地址:https://www.cnblogs.com/schangxiang/p/11404421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!