Vue 3 + Glassmorphism

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

官网 & 示例

截图

安装

$ npm i vue3-glassmorphism

or

$ yarn add vue3-glassmorphism

使用

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

import glassmorphism from 'vue3-glassmorphism'
app.use(glassmorphism)

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

import { directive } from 'vue3-glassmorphism'
directive: {
  glassmorphism: directive
}

使用:

<div v-glassmorphism="{ blur: 3, opacity: 0.2, color: '#fff' }">...</div>

// 或者 or

<div v-glassmorphism=config>...</div>

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 |

Project setup

yarn

yarn dev

yarn build