【UI】 cocomessage消息提示插件

简介: 【UI】 cocomessage消息提示插件

在线示例

JQuery插件库地址

GitHub地址

安装

方法一
cnpm install coco-message -S

vue单文件中引用

import cocoMessage from 'coco-message'
方法二

vue单文件中直接引入 <script src="https://unpkg.com/coco-message/coco-message.min.js"></script>

示例代码

//
cocoMessage.info(3000, "请先登录!", function () {
  console.log("close");
});
//
var div1 = document.createElement("div");
div1.innerText = "修改成功!";
cocoMessage.success(div1);
// 
cocoMessage.warning("需要手动关闭", 0);
// 
cocoMessage.error("修改失败!", 3000);
// 
var closeMsg = cocoMessage.loading(true);
setTimeout(function () {
  closeMsg();
}, 4000);
// 
cocoMessage.destroyAll();

基本用法

cocoMessage.config({       //全局配置
    duration: 10000,         //消息显示时长
  });
      
  const close = cocoMessage.info(
   "请先登录!",            //消息文本
   3000,                    //消息显示时长
    ()=> {                  //回调函数
     console.log("close");
    }
  );
  
  close();                  //关闭消息方法
  
            
  var div = document.createElement("div");
  div.innerText = "修改成功!";
  cocoMessage.success(
    ()=>{
      console.log("close");
    },
    div
  );
目录
相关文章
|
10月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
313 0
|
前端开发 程序员 开发工具
解决Material Theme UI插件收费问题
解决Material Theme UI插件收费问题
解决Material Theme UI插件收费问题
|
10月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
21天前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
47 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
100 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
19天前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
3月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
50 0
|
8月前
|
IDE 程序员 开发工具
IDEA插件-Material Theme UI/IDEA最强主题插件/IDEA图标美化
"Material Theme UI" 是一个用于 JetBrains IDE(如 IntelliJ IDEA、WebStorm、Android Studio 等)的插件,它将原始外观改为 Material Design 风格,并提供丰富的选项来根据个人喜好配置 IDE。
2436 0
IDEA插件-Material Theme UI/IDEA最强主题插件/IDEA图标美化
|
9月前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
102 1
|
9月前
IDEA 插件 Material Theme UI收费后 免费的办法
IDEA 插件 Material Theme UI收费后 免费的办法
720 2

热门文章

最新文章