vue3-glassmorphism
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

Vue 3 + Glassmorphism

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

官网 & 示例

截图

screen.jpg

安装

$ 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

Package Sidebar

Install

npm i vue3-glassmorphism

Weekly Downloads

11

Version

0.2.0

License

MIT

Unpacked Size

5.45 kB

Total Files

6

Last publish

Collaborators

  • hunlongyu