VUE框架JS组件的封装 --Vue.extend

背景：

　　我们在使用别人优秀的组件库的时候，会发现有分为JS组件、CSS组件、Form组件这些。

有时候我们需要动态的创建组件，比如点击按钮，出现弹窗。

那么VUE 的js组件如何封装，核心是Vue.extend（组件）创建组件构造器。

一、创建文件

在component文件夹下创建

VUE框架JS组件的封装 --Vue.extend

index.js 作为js组件的集合页，集合各式各样的JS模式的组件

二、在index.vue写具体的《弹窗》组件样式

<template>
  <div class="messageBox">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
      <div>
          <div @touchstart="handleCancel">{{cancel}}</div>
          <div @touchstart="handleOk">{{ok}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name:'MessageBox'
}
</script>

<style scoped>
    .messageBox{ 
        width: 200px;
        height: 120px;
        border: 1px #ccc solid;
        border-radius:4px ;
        background: white;
        box-shadow: 3px 3px 3px 3px  #ccc;
        position:absolute;
        left: 50%;
        top: 50%;
        margin: -60px 0 0 -100px;
    }
    .messageBox h2 {
        text-align: center;
        line-height: 40px;
        font-size:18px ;
    }
    .messageBox p{
        text-align: center;
        line-height: 40px;
        
    }
.messageBox >div{display: flex; position: absolute; bottom:0;width: 100%;border-top:1px #ccc solid;}
.messageBox >div div {flex: 1; text-align: center;line-height: 30px;border-right:1px #ccc solid;}
.messageBox >div div:last-child{border: none;}

</style>

View Code