一般用于在某个位置插入一条显眼的消息

如图所示

【可以自定义如下内容】

左边图标样式 颜色

中间文本内容 颜色

右边按钮内容颜色

背景颜色 （传入css样式）

【支持点击事件触发】

左边图标点击事件 回传 data数据 type 为left

右边按钮点击事件 回传 data数据 type为 right

【外部调用的方法】

setStatus 传入 true 界面显示 false则界面隐藏

setConfig 修改默认参数 传入json格式数据 字段意义如下

使用演示

this.$refs.jyAlertPush.setConfig({
    'title': '我的标题',
    'title_class': 'text-blue',
    'btn_msg': '前往',
    'btn_class': 'bg-green',
    'bg_style': 'background-color: #aa55ff!important;',
});

使用流程

① 引入组件到当前页面

import jyAlert from "@/components/jy-alert/alert.vue"

② 将组件注册到当前页面 

components: {
    jyAlert
}

③ 引入到视图界面 将组件放置在合适位置 

<jyAlert ref="jyAlertPush"  @callback="handle_push_alert" ></jyAlert>

④ 根据业务 选择是否显示组件

⑤ 监听组件回调事件

handle_push_alert(data) {
    if (data['type'] == 'left') {
        this.$refs.jyAlertPush.setStatus(false);
    } else {
        //前往
        permision.openPushSetting();
    }
}

下载地址