vuetify-extension

项目基于vueitfyUI库，参考ElementUI类库并实现了其中常用的弹框、确认框、加载框、提示框工具类。而且提供了相对应的装饰器供大家更灵活的使用！

安装

npm i vuetify-extension

初始化

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import install from "vuetify-extension";

Vue.config.productionTip = false;

// 使用install方法将Vue与vuetify注入至库中，以确保和项目中保持一致。
install(Vue, vuetify);

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount("#app");

使用

目前有4个工具类、1个api、3个装饰器。

api：

• install(vue, vuetify)

class:

• Loader
• Notification
• ConfirmDialog
• PopNotification

decorators:

• Loading
• Confirm
• Notice

<a #id="install">install(vue, vuetify)

初始化扩展库，将vue,vueitfy 注入进库中。保证库的行为与项目一致。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import install from "vuetify-extension";

Vue.config.productionTip = false;

// 使用install方法将Vue与vuetify注入至库中，以确保和项目中保持一致。
install(Vue, vuetify);

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount("#app");

Loader

class Loader {
    static Loading(text: string, options?: object): string;
    static Close(id: string);
    static CloseAll();
}

Loading

开启一个遮罩层

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------- | ---------------- | ---- | | text | string | 加载中显示的文字 | 是 | | options | object? | 配置项 | 否 |

配置项结构：

| 属性 | 类型 | 说明 | 默认值 | | ------ | ------ | --------------------------- | -------- | | text | string | 遮罩层的文字 | '加载中' | | size | int | v-progress-circular的属性 | 100 | | width | int | v-progress-circular的属性 | 8 | | color | string | v-progress-circular的属性 | '#fff' | | zIndex | int | 遮罩层的z-index | 5 |

| 返回值类型 | 说明 | | ---------- | ---------------------------- | | string | 此次遮罩层的id，用于手动关闭 |

Close

关闭一个遮罩层

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | ---------- | ---- | | id | string | 遮罩层的Id | 是 |

CloseAll

关闭所有遮罩层

Notification

class Notification {
    static notify(options: any);
    static success(text: string);
    static error(text: string);
    static primary(text: string);
    static warn(text: string);
}

notify

弹出提示框

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------ | ------ | ---- | | options | object | 配置项 | 是 |

配置项结构：

| 属性 | 类型 | 说明 | 默认值 | | --------- | ------- | ------------------------------ | ------ | | message | string | 提示框文字 | '' | | duration | int | v-snackbar的属性，显示多少秒 | 3000 | | closeable | boolean | 是否显示关闭的按钮 | false | | color | string | v-snackbar的属性 | '' |

success

弹出提示框，颜色跟随主题的success

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 |

error

弹出提示框，颜色跟随主题的error

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 |

primary

弹出提示框，颜色跟随主题的primary

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 |

warn

弹出提示框，颜色跟随主题的warn

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 |

ConfirmDialog

class ConfirmDialog{
    static Confirm(title: string, context: string, yesText: string, noText: string): Promise<any>;
}

Confirm

弹出确认框

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------ | ---------------------------- | ---- | | title | string | 确认框的标题 | 是 | | context | string | 确认框的文本 | 是 | | yesText | string | 确认按钮的文字 | 是 | | noText | string | 取消按钮的文字） | 是 |

PopNotification

class PopNotification{
    static notify(options: object);
    static success(text: string, options?: object);
    static error(text: string, options?: object);
    static primary(text: string, options?: object);
    static warn(text: string, options?: object);
}

notify

弹出提示框

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------ | ------ | ---- | | options | object | 配置项 | 是 |

配置项结构：

| 属性 | 类型 | 说明 | 默认值 | | ---------- | ------ | -------------- | ------- | | message | string | 提示框文字 | '' | | width | string | 提示框宽度 | '300px' | | height | string | 提示框高度 | '180px' | | color | string | 标题的背景色 | '' | | title | | | | | titleColor | string | 标题的文字颜色 | 'white' | | horizontal | string | 水平方向位置 | 'left' | | vertical | string | 垂直方向位置 | 'top' |

success

弹出提示框，颜色跟随主题的success

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------ | -------- | ---- | | text | string | 提示内容 | 是 | | options | object | 配置项 | 否 |

error

弹出提示框，颜色跟随主题的error

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 | | options | object | 配置项 | 否 |

primary

弹出提示框，颜色跟随主题的primary

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 | | options | object | 配置项 | 否 |

warn

弹出提示框，颜色跟随主题的warn

| 参数名 | 类型 | 说明 | 必需 | | ------ | ------ | -------- | ---- | | text | string | 提示内容 | 是 | | options | object | 配置项 | 否 |

Loading

加载遮罩层的装饰器。

在函数执行前打开遮罩，并在函数结束后关闭遮罩。

在函数执行出现异常时，也将会自动关闭遮罩

| 参数名 | 类型 | 说明 | | ------ | ------ | ---------- | | msg | string | 遮罩层文字 |

Confirm

确认框的装饰器。

在函数执行前弹出确认框，只有确认才可以进行函数中。

| 参数名 | 类型 | 说明 | 必需 | | ------- | ------ | ---------------------------- | ---- | | title | string | 确认框的标题 | 是 | | context | string | 确认框的文本 | 是 | | yesText | string | 确认按钮的文字（默认为“是”） | 否 | | noText | string | 取消按钮的文字（默认为“否”） | 否 |

Notice

提示框的装饰器。

在函数执行成功后，将弹出设置的成功提示信息，否则将弹出设置的失败提示信息。

| 参数名 | 类型 | 说明 | 必须 | | ---------- | ------ | ------------------------ | ---- | | successMsg | string | 函数执行成功时的提示信息 | 是 | | errorMsg | string | 函数执行失败时的提示信息 | 否 |

计划

• [ ] typescript重构
• [ ] 加入VNode与html片段的内容支持
• [ ] 回补单元测试

关于

halo, 我是若羽，如果这个库能对你有所帮助那是最好的。 如果使用过程中有什么问题欢迎随意提出issues，或者直接邮箱联系。

欢迎大家贡献代码，不断完善它。

License

MIT License