vue-guide v1.1.0

vue-guide

引导页 快速帮助用户引导，熟知你的产品

• 组件以函数式方式调用
• 支持函数式插槽
• 支持常规配置

安装

yarn add vue-guide 或者 npm install vue-guide

demo普通用法

<script>
    import Guide from 'vue-guide';

    export default {
        async mounted() {
            await Guide({
                elements: [
                    {
                        target: '#id1', // id
                        text: 'test1',
                        placement: 'right-top',
                    },
                    {
                        target: this.$refs.target, // vue ref
                        text: 'test2',
                        placement: 'right-bottom',
                    },
                ],
            });
        },
    }
</script>

demo 自定义组件用法

<script>
    import Guide from 'vue-guide';
    import CustomComp from './CustomComp'

    export default {
        async mounted() {
            await Guide({
                elements: [
                    {
                        target: '#id3',
                        text: 'test3',
                        placement: 'right-top',
                        // 弹窗内 组件插槽
                        slot: {
                            component: CustomComp, // 自定义组件
                            // 自定义组件 props
                            props: {
                                customProps: '我是自定义组件内容',
                                handler() {
                                    alert('自定义组件方法触发成功');
                                },
                            },
                            // 接收自定义组件内部emit事件
                            listeners: {
                                emitEvent() {
                                    alert('自定义组件emit事件触发成功');
                                },
                            },
                        },
                    },
                ],
            });
        },
    }
</script>

demo 完整配置项

<script>
    import Guide from 'vue-guide';
    import CustomComp from './CustomComp'

    export default {
        async mounted() {
            await Guide({
                // 目标dom元素
                elements: [
                    {
                        target: '#id', // required: true,   目标元素: 支持id ,class, ref 等
                        text: 'test', // 弹窗主文本内容
                        image: 'https://www.matools.com/img/home/gif/default_gif.gif', // 弹窗img | gif
                        dialogWidth: 322, // 弹窗宽度  默认值 322
                        placement: 'right-top', // 弹窗方向位置 left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right
                        // 标识
                        sign: {
                            show: true, // boolean 控制弹窗内是否显示标识   默认值 false
                            text: '小贴士', // any 弹窗内的标识内容  默认值  小贴士
                        },
                        // 弹窗内 组件插槽
                        slot: {
                            component: CustomComp, // 自定义组件
                            // 自定义组件props
                            props: {
                                customProps: '我是自定义组件内容',
                                handler() {
                                    alert('自定义组件方法触发成功');
                                },
                            },
                            // 接收自定义组件内部emit事件
                            listeners: {
                                emitEvent() {
                                    alert('自定义组件emit事件触发成功');
                                },
                            },
                        },
                    },
                ],
                // 配置项
                config: {
                    // 按钮类型支持
                    btn: {
                        pre: {
                            type: 'text', // 按钮类型 text, default, plaim, danger, primary   默认值 default
                            text: 'pre', //  默认值 上一条
                        },
                        next: {
                            type: 'primary', // 默认值 default
                            text: 'next', // 默认值 上一条
                        },
                        confirm: {
                            type: 'danger', // 默认值 default
                            text: 'confirm', // 默认值 知道啦
                        },
                    },
                    // 遮罩颜色 默认值 rgba(0, 0, 0, 0.3)
                    mask: {
                        r: 0,
                        g: 0,
                        b: 0,
                        a: 0.3,
                    },
                    // 目标dom元素
                    element: {
                        // 边框颜色  默认值 rgba(33, 33, 33, 0.3)
                        borderColor: {
                            r: 33,
                            g: 33,
                            b: 33,
                            a: 0.5,
                        },
                        borderRadius: '4px',  // 边框 角  默认值 '4px'
                    },
                    // 弹窗
                    dialog: {
                        // 背景色 默认值 rgba(255, 255, 255, 1)
                        bgColor: {
                            r: 255,
                            g: 255,
                            b: 255,
                            a: 1,
                        },
                        fontColor: '#000', // 字体颜色 默认值 #000
                    },
                },
            });
        },
    }
</script>

交流 1215901037@qq.com