:::demo 示例

```html
<template>
    <div>
        <button @click='clickHandler'>click1弹层</button>
        <button style="margin-left:100px" @click='clickHandler1'>click2弹层</button>
        <div style="margin-top:50px">
            <p>
                已经把弹层方法挂到全局所以可以通过this.$tip方法调用
                步骤如下：
            </p>
            <p>
                （1）insideDom参数：将所需内容插入到弹层内部的方法：提供一个回调方便自定义内部内容，可以选择插入一个组件。
            </p>
            <p>
                （2）callback参数：提供一个回调插入到弹层显示之前调用。
            </p>
            <p>
                （3）style参数：可以为弹出层设置样式。
            </p>
            <p>
                （4）showX与showMask参数：可以选择是否显示关闭按钮与遮罩层。
            </p>
            <p style="color:red">
                注意：每次生成新的内容，弹层都要重新调用一次，单并不会生成新的实例，只是修改弹层内容与样式等；
            </p>
        </div>
        <table border='1' width="800">
            <thead>
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>可选值</th>
                <th>默认值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>style</td>
                <td>弹层样式</td>
                <td>Object</td>
                <td>—</td>
                <td>—</td>
            </tr>
            <tr>
                <td>insideDom</td>
                <td>弹层内部结构</td>
                <td>function</td>
                <td>—</td>
                <td>—</td>
            </tr>
            <tr>
                <td>callback</td>
                <td>弹层显示之前调用</td>
                <td>function</td>
                <td>—</td>
                <td>—</td>
            </tr>
            <tr>
                <td>showX</td>
                <td>关闭按钮</td>
                <td>Boolean</td>
                <td>true/false</td>
                <td>true</td>
            </tr>
            <tr>
                <td>showMask</td>
                <td>遮罩层</td>
                <td>Boolean</td>
                <td>true/false</td>
                <td>true</td>
            </tr>
            <tr>
                <td>showHeader</td>
                <td>是否显示标题栏</td>
                <td>Boolean</td>
                <td>true/false</td>
                <td>false</td>
            </tr>
            <tr>
                <td>title</td>
                <td>弹层标题</td>
                <td>string</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>tipHeaderClass</td>
                <td>头部样式</td>
                <td>string</td>
                <td>-</td>
                <td>-</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default{
        name: "Tip",
        mounted(){
        },
        methods: {
            clickHandler(){
                this.$tip({
                    title:"这是一个示例",
                    showHeader:true,
                    tipHeaderClass:'test',
                    insideDom: function (h) {
                        return h('div', {
                            style: {
                                textAlign: 'center'
                            },
                            attrs:{
                                id:'test'
                            }
                        }, '这是第一个click弹层')
                    },
                    callback: function () {
                        console.log(document.querySelector("#test"))
                    },
                    style: {
                        border: "1px solid black",
                        background: 'white',
                        color: 'blue'
                    },//除了宽高以外的样式
                });
            },
            clickHandler1(){
                this.$tip({
                    insideDom: function (h) {
                        return h('div', {
                            style: {
                                lineHeight: '400px',
                                textAlign: 'center'
                            }
                        }, '另外一个click弹层')
                    },
                    callback: function () {
                    },
                    style: {
                        border: "1px solid blue",
                        background: 'red',
                        color: 'white'
                    },//除了宽高以外的样式
                });
            },
        }
    }
</script>
```
:::