vue3-glassmorphism v0.2.0

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 }
}

说明

Project setup

yarn

yarn dev

yarn build