封装分享组件

h-share.gif

1. 引入相关的JS

 <script src="https://cdn.bootcss.com/vue/2.5.1/vue.min.js"></script>
<script src="/lib/vue-qrcode.min.js"></script>

2. 利用虚拟DOM封装组件

var VueQrcode = window.VueQrcode;
Vue.component('qrcode', VueQrcode);
Vue.component('h-share', {
    render: function (createElement) {
        var self = this;
        return createElement(
            'div',
            {
                style: {
                    display: 'inline-block'
                },
            },
            [
                createElement('i', {
                    attrs: {
                        class: 'el-icon-share'
                    },
                    style: {
                        marginRight: '10px'
                    }
                }, '分享'),
                createElement('span', {
                    attrs: {
                        class: 'icon-wechat'
                    },
                    style: {
                        marginRight: '5px'
                    },
                    on: {
                        click: function () {
                            window.ELEMENT.MessageBox({
                                title: '分享二维码',
                                center: true,
                                message: createElement('div', null, [
                                    createElement('qrcode', {
                                        props: {
                                            value: self.link,
                                            tag: 'img',
                                            options:{
                                                size: 150
                                            }
                                        }
                                    }, '')
                                ]),
                                showCancelButton: false,
                                showConfirmButton: false,
                                beforeClose: (action, instance, done) => {
                                    if (action === 'confirm') {
                                       console.log(action);
                                    } else {
                                        done();
                                    }
                                }
                            }).then(action => {
                                window.ELEMENT.Message({
                                    type: 'info',
                                    message: 'action: ' + action
                                });
                            }).catch(() => {});
                        }
                    }
                }, ''),
                createElement('span', {
                    attrs: {
                        class: 'icon-link'
                    },
                    on: {
                        click: function () {
                            window.ELEMENT.MessageBox({
                                title: '分享链接',
                                message: createElement('div', null, [
                                    createElement('el-input', {
                                        props: {
                                            value: self.link + "\n" + self.text,
                                            type: "textarea"
                                        },
                                        attrs: {
                                            id: 'input'
                                        },
                                    }, '')
                                ]),
                                showCancelButton: true,
                                confirmButtonText: '点击复制',
                                cancelButtonText: '取消',
                                beforeClose: (action, instance, done) => {
                                    if (action === 'confirm') {
                                        var input = document.getElementById("input");
                                        input.select(); // 选中文本
                                        document.execCommand("copy"); // 执行浏览器复制命令
                                        window.ELEMENT.Message({
                                            type:'success',
                                            message: '复制成功'
                                        });
                                    } else {
                                        done();
                                    }
                                }
                            }).then(action => {
                                window.ELEMENT.Message({
                                    type: 'info',
                                    message: 'action: ' + action
                                });
                            }).catch(() => {});
                        }
                    }
                }, '')
            ]
        )
    },
    attrs: {
        class: 'share-group'
    },
    props: {
        text: {
            type: String,
            required: true
        },
        link: {
            type: String,
            required: true
        }
    }
})

3. 如何使用组件

 <script src="/path/h-share.js"></script>
<h-share :text="text" :link="link" class="mr-20"></h-share>