https://github.com/hunlongyu/vue3-glassmorphism

由 Vue3 和 Typescript 编写的透明高斯模糊背景.
https://github.com/hunlongyu/vue3-glassmorphism

Last synced: 3 months ago
JSON representation

由 Vue3 和 Typescript 编写的透明高斯模糊背景.

• Host: GitHub
• URL: https://github.com/hunlongyu/vue3-glassmorphism
• Owner: Hunlongyu
• License: mit
• Created: 2021-02-23T06:12:57.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T23:23:58.000Z (over 3 years ago)
• Last Synced: 2025-01-31T10:47:44.285Z (over 1 year ago)
• Language: Vue
• Size: 262 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue 3 + Glassmorphism

由 Vue3 和 Typescript 编写的透明高斯模糊背景.

[Home & Demo & Github](https://hunlongyu.github.io/vue3-glassmorphism/)

[官网 & 示例 & 国内](http://hunlongyu.gitee.io/vue3-glassmorphism/)

### 截图

![screen.jpg](https://i.loli.net/2021/02/23/841YsaUbeJIfPW7.jpg)

### 安装

```bash

$ npm i vue3-glassmorphism

or

$ yarn add vue3-glassmorphism

```

### 使用

全局注册 / Global registration (main.ts/js)

```js

import glassmorphism from 'vue3-glassmorphism'

app.use(glassmorphism)

```

局部注册 / Partial registration (*.vue)

```js

import { directive } from 'vue3-glassmorphism'

directive: {

  glassmorphism: directive

}

```

使用:

```html

...


// 或者 or

...


setup () {

  const config = reactive({

    blur: 3,

    opacity: 0.2,

    color: '#fff'

  })

  return { config }

}

```

### 说明

| 参数     | 说明                 | 类型    | 默认值  |

| -------- | -------------------- | ------- | ------- |

| blur    | 背景模糊值 | Number  | `3`  |

| opacity | 背景透明度 | Number | `0.2` |

| color  | 背景颜色, 只支持十六进制字符串 | String | `#ffffff` or `#fff` |

## 🌏 浏览器支持

|  Chrome |  Internet Explorer |  Edge |  Safari |  Firefox |

| :---: | :---: | :---: | :---: | :---: |

| Yes | No | 17+ | 9+ | No |

## Project setup

```

yarn

yarn dev

yarn build

```