@heyunmu/yunmu-feedback

YunMuFeed

模块 loading

参数

参数项	可选	默认值	注释
message	string	正在努力加载中	文字内容
mask	boolean	true	loading 背景
theme	normal pic	normal	主题
pic	-	-	主题为pic下图片链接
picWidth	string	120px	主题为pic下图片宽度
ref	-	-	指向元素

使用

// 1. 默认使用
const loadingId = loading.show();
if (loadingId) {
  setTimeout(() => {
    loading.hide(loadingId);
  }, 2000);
}

// 2. 使用图片 (或许自行修改 图片样式)
const loadingId = loading.show({
  mask: false,
  theme: "pic",
  pic: "/loading.gif",
});
if (loadingId) {
  setTimeout(() => {
    loading.hide(loadingId);
  }, 2000);
}

模块 img

init 参数

参数项	可选	默认值	注释
maskColor	string	rgba(0, 0, 0, 0.3)	背景颜色
zindex	string	1000	层级
loadingPic	string	-	加载图片
errorPic	string	-	失败图片
select	string	.yun-img-select	选择器

使用

// 仅显示一次
img.once({
  src: "https://cdn.pixabay.com/photo/2023/07/28/18/23/bird-8155768_1280.jpg",
});

// 全局初始化
img.init();

模块 alert

参数

参数项	可选	默认值	注释
title	string	温馨提示	标题
message	*string	""	消息
icon	string	-	类型图标
confirmShow	boolean	true	是否显示确认按钮
confirmText	string	确认	确认按钮文字
cancelShow	boolean	false	是否显示取消按钮
cancelText	string	取消	取消按钮文字
buttons	[]	[]	自定义按钮
animate	string	bounce	动画 css
method	function	-	回调方法

按钮组

参数项	可选	默认值	注释
name	string	""	按钮文字内容
class	string	-	类名称
method	string	-	方法名称

定义动画 css

@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.animate__bounceIn {
  animation-duration: 0.75s;
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-name: bounceIn;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.animate__bounceOut {
  animation-duration: 0.75s;
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-name: bounceOut;
}

使用

alert({
  icon: "success",
  buttons: [
    { name: "按钮1", method: "success", class: "primary" },
    { name: "按钮2", method: "failed", class: "success" },
  ],
  confirmShow: false,
  cancelShow: false,
  title: "提示",
  message:
    "Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit. ",
  method(_e, option, hide) {
    console.log(option);
    hide();
    return true;
  },
});