Vue Gray Plugin

vue-gray-plugin 是一个用于在Vue.js应用中添加页面置灰效果的插件。它允许你轻松地配置全局页面置灰，并提供了一种非常配置化的方式来控制页面的灰度效果。

安装

你可以使用npm或yarn来安装 vue-gray-plugin。

npm install vue-gray-plugin
# 或
yarn add vue-gray-plugin

使用

1. 导入和注册插件：

import Vue from 'vue';
import VueGrayPlugin from 'vue-gray-plugin';

Vue.use(VueGrayPlugin, { isGray: true });

1. 配置选项：
   • isGray (boolean, 默认为 false): 当设置为 true 时，页面将被置灰。设置为 false 将取消页面置灰。

示例

import Vue from 'vue';
import VueGrayPlugin from 'vue-gray-plugin';

Vue.use(VueGrayPlugin, { isGray: true });

new Vue({
  el: '#app',
  render: (h) => h(App),
});

在上述示例中，页面将被置灰，因为我们设置了 isGray 选项为 true。你可以根据需要随时更改 isGray 的值，以控制页面的灰度效果。

自定义样式

你可以根据需要自定义页面置灰的样式。默认情况下，插件使用 filter 属性将页面置灰，但你可以通过在你的应用中添加自定义CSS来覆盖这些样式。

/* 在你的项目的CSS文件中添加以下样式以自定义页面置灰效果 */
body {
  filter: grayscale(100%);
}

License

MIT License

贡献

如果你发现问题或有改进建议，欢迎提交Issue或Pull Request。感谢你的贡献！

作者

• 作者：yuanwenlai
• 邮箱：[email protected]

版本历史

• 1.0.2 (2023-10-27): 初始版本发布