Vue 3 + Glassmorphism

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

Home & Demo & Github

官网 & 示例 & 国内

截图

安装

$ 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

🌏 浏览器支持

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	No	17+	9+	No

Project setup

yarn

yarn dev

yarn build