README.md · LY.留言/yik-alert-desc

# 开始使用

```sh
npm i @yik_l/alert -S
cnpm i @yik_l/alert -S
yarn add @yik_l/alert -S
```

# 演示地址

https://static-02ef2b4d-6a6b-4cce-af4e-e27f3205fa1f.bspapp.com/yik-alert

# 在 main.js 引入全局样式

```javascript
// 在使用 Yikalert 相关弹出框组件时，必须引入全局样式
import "@yik_l/alert/index.css";
```

## YikAlert 可拖拽弹出框

### 局部注册组件

```javascript
<template>
  <div id="app">
    <YikAlert v-model="show"></YikAlert>
  </div>
</template>;
import { YikAlert } from "@yik_l/alert";
export default {
  data() {
    return {
      show: true,
    };
  },
  components: { YikAlert },
};
```

### 全局注册组件

```javascript
import {YikAlert} "@yik_l/alert";
Vue.use(YikAlert);
```

### props

```javascript
props: {
    // 标题
    title: {
      type: String,
      default: '这是一个标题',
    },
    // 开启遮蔽
    mask: {
      type: Boolean,
      default: true,
    },
    // 是否显示头部
    isHeader: {
      type: Boolean,
      default: true,
    },
    // 宽度
    w: {
      type: String,
      default: '650px',
    },
    // 高度
    h: {
      type: String,
      default: '450px',
    },
    /**
     * 动画
     * zoom 缩放
     * top  从上往下
     * bottom  从下往上
     * left 从左往右
     * right 从右往左
     */
    animeType: {
      type: String,
      default: 'zoom',
    },
    /**
     * 设置层叠 默认：10001
     */
    zIndex: {
      type: Number,
      default: 10001
    }
},
```

## yikMessage 消息弹出框

```javascript
import { yikMessage } from '@yik_l/alert';
/**
 * @description: 当鼠标悬浮时，自动关闭消息框功能关闭。鼠标移出时，自动关闭消息框功能开启
 * @param {*} ms 多少秒关闭消息框  默认4000
 * @param {*} type 消息类型  默认 success。可选值：success、info、warn、error
 * @param {*} msg  消息内容  默认 这是一条测试数据。
 * 可选值：可以传入任意html标签，例如 `<div color="red">这是一条测试数据</div>`
 * @param {*} animeType 动画类型 zoom slide
 * @param {*} location  定位显示位置 默认 top-center 。可选值：top-center、top-left、top-right、
 * bottom-center、bottom-left、bottom-right、center-center、center-left、center-right
 */

// 自定义样式
yikMessage.style.success = {
  color: "#fff", // 设置颜色
  bg: "#4caf50", // 消息框背景色
};
yikMessage.style.info = {
  color: "#fff", // 设置颜色
  bg: "#999999", // 消息框背景色
};
yikMessage.style.warn = {
  color: "#fff", // 设置颜色
  bg: "#ffae42", // 消息框背景色
};
yikMessage.style.error = {
  color: "#fff", // 设置颜色
  bg: "#de636f", // 消息框背景色
};

yikMessage({
    ms:4000,
    type:'success',
    msg:'这是一条测试数据',
    animeType:'slide',
    location = "top-center"
});
```

## YikDialog 对话框

### 局部注册组件

```javascript
<template>
  <div id="app">
    <YikDialog v-model="show"></YikDialog>
  </div>
</template>;
import { YikDialog } from "@yik_l/alert";
export default {
  data() {
    return {
      show: true,
    };
  },
  components: { YikDialog },
};
```

### 全局部注册组件

```javascript
import {YikDialog} "@yik_l/alert";
Vue.use(YikDialog);
```

### props

```javascript
props: {
    // 宽
    w: {
      type: String,
      default: "576px",
    },
    // 高
    h: {
      type: String,
      default: "204px",
    },
    // 设置容器距离body的顶部距离
    top: {
      type: String,
      default: "25%",
    },
    // 标题
    title: {
      type: String,
      default: "提示",
    },
    // 动画 默认 zoom  可选：无
    animeType: {
      type: String,
      default: "zoom",
    },
    // 是否开启遮蔽层
    mask: {
      type: Boolean,
      default: true,
    },
  },
```

### slot

| slot    | 描述           |
| ------- | -------------- |
| default | 自动义主体内容 |
| dialog  | 自定义对话框   |
| header  | 自定义标题     |
| footer  | 自定义底部     |

# 文档写的很粗糙请勿吐槽 😀

LY.留言/yik-alert-desc

简介

发行版

贡献者

语言

近期动态

LY.留言/yik-alert-desc .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

LY.留言/yik-alert-desc