vue 胶水层

[sailei1]

<template>
        <el-dialog class="qd-el-dialog" v-on="$listeners"  v-bind="{...$props,...$attrs}">

<!--            <template v-for="(_,name) in $slots">-->
<!--                <template v-if="$slots[name]" v-slot[name]>-->
<!--                <slot v-if="$slots[name]" :name="name"></slot>-->
<!--                </template>-->
<!--            </template>-->

            <template v-if="$slots.title" v-slot:title>
                <slot name="title"></slot>
            </template>
            <template v-if="$slots.default" v-slot:default>
                <slot></slot>
            </template>
            <template v-if="$slots.footer" v-slot:footer>
                <slot name="footer"></slot>
            </template>

        </el-dialog>
</template>
<style>

</style>
<script>
    import {Dialog } from 'element-ui'
      export  default {
         props:{
             ...Dialog.props
         },
          created() {
             debugger;
             console.log(this)
          }
      }
</script>

引入使用

<template>
   <div>
       <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

       <el-dialog
               title="提示"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose"
               >
           <span>这是一段信息</span>
           <span slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
       </el-dialog>
   </div>
</template>

<script>
    import dialog from "../components/dialog";
    // import {Dialog } from 'element-ui'
    // import Vue from 'vue'
    // Vue.use(Dialog)
    export default {
        data(){
            return {
                dialogVisible: false
            }
        },
        components:{
            'el-dialog': dialog
        },
        created() {
            debugger;
           console.log('p:',this)
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            }
        }
    }
</script>