Vue插件开发

  • A+
所属分类:vue

在线演示

CSS


body,div,button{padding:0;margin:0;box-sizing:border-box;}
html{
      font-size: 125%;
}
html,body{
      width: 100%;
      height: 100%;
      overflow: hidden;
}
body{
      position: relative;
      text-align: center;
}
.m-app{
      display: inline-block;
}
.f-upper{
      text-transform: uppercase;
}
.f-mid{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}
.f-fleft{
      float: left;
}
.f-fright{
      float: right;
}
.m-mask{
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.2);
}
.m-modal{
      height: 10rem;
      width: 20rem;
      background-color: #FC6D6D;
      border-radius: 10px;
}
.m-modal .head{
      height: 1.6rem;
      line-height: 1.5rem;
      border-bottom: 1px solid rgba(0,0,0,.6);
      text-align: left;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 10px;
}
.m-modal .con{
      height: 6.4rem;
      overflow: hidden;
      border-bottom: 1px solid rgba(0,0,0,.6);
      padding: 10px;
}
.m-modal .foot{
      height: 2rem;
      padding: .2rem .5rem;
}
.m-modal .foot .btn{
      height: 100%;
      width: 4rem;
      background-color: #794AFC;
      color: #fff;
      border: none;
      cursor: pointer;
      line-height: 1.6rem;
}

html


<div id="app"></div>
<script type="text/template" id="t-app">
      <div class="m-app">
            <button class="f-upper" @click="modal_show01 = true">show modal01</button></br>
            <button class="f-upper" @click="modal_show02 = true">show modal02</button>
            <Modal v-model="modal_show01" title="MODAL01">这是内容01.....</Modal>
            <Modal v-model="modal_show02" title="MODAL02">这是内容02.....</Modal>
      </div>
</script>
<script type="text/template" id="t-modal">
      <div class="m-mask f-mid" v-show='show'>
            <div class="m-modal f-mid">
                  <div class="head">{{title}}</div>
                  <div class="con"><slot></slot></div>
                  <div class="foot">
                        <button @click="cancelFn" class="f-fleft btn f-upper">cancel</button>
                        <button @click="closeFn" class="f-fright btn f-upper">close</button>
                  </div>
            </div>
      </div>
</script>

js


'use strict';
const modalMiddle = {
      install( Vue ){
            const Box = document.createElement('div');
            document.body.appendChild(Box);

            const Tpl = Vue.extend({
                  template: '#t-modal',
                  created(){
                        let me = this;
                        me.$on( 'active', (opt) => {
                              me.title = opt.title;
                              me.show = opt.show;
                        } )
                  },
                  data:function(){
                        return {
                              show: false,
                              title: ''
                        }
                  },
                  methods:{
                        closeFn(){
                              console.log('clicked close!');
                              this.show = false;
                        },
                        cancelFn(){
                              console.log('clicked cancel!');
                              this.show = false;
                        }
                  }
            })

            Vue.prototype.$modal = new Tpl().$mount(Box);
      }
}

const Modal = Vue.component('Modal', {
      name: 'Modal',
      props:{
            value: {
                  type: Boolean,
                  required: true,
                  default: false
            },
            title: {
                  type: String
            }
      },
      watch: {
            value(nVal, oVal){
                  let me = this;
                  if(nVal){
                        this.$modal.$slots = this.$slots;
                        this.$modal.$emit('active', {show: true, title: me.title});
                  }
                  me.$emit('input', false);
            }
      }
})

Vue.use(modalMiddle);
new Vue({
      template: '#t-app',
      data:function(){
            return { 
                  modal_show01: false,
                  modal_show02: false,
            }
      },
      components: {
            Modal
      }
}).$mount('#app')
weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: