- Chorme 76+
- Vue 3+
npm i -S vue-acrylic<h1 id="acrylic1">ACRYLIC</h1>
<h1 id="acrylic2">ACRYLIC</h1>
<script>
import { useAcrylic } from 'vue-acrylic'
const options1 = {
bulr: 20,
noiseOpacity: 1,
noiseSize: 50
}
useAcrylic(document.getElementById('acrylic1'))
useAcrylic(document.getElementById('acrylic2'), options1)
</script>import { createApp } from 'vue'
import Acrylic from 'vue-acrylic'
import App from './App.vue'
createApp(App).use(Acrylic).mount('#app')<script setup>
const opt = {
bulr: 20,
noiseOpacity: 1,
noiseSize: 50
}
</script>
<template>
<div v-acrylic>Acrylic</div>
<div v-acrylic="opt">Acrylic</div>
</template>| name | type | default | Description |
|---|---|---|---|
| blur | MaybeRef | 30 | 模糊大小 |
| color | MaybeRef | #e6e6e6 | 颜色/色调覆盖层 |
| opacity | MaybeRef | 0.5 | 色调层不透明度 |
| brightness | MaybeRef | 1 | 控制可从背景穿过 Acrylic 图面的亮度 |
| saturate | MaybeRef | 1.6 | 控制可从背景穿过 Acrylic 图面的饱和度 |
| noiseOpacity | MaybeRef | 0.75 | 噪点不透明度 |
| noiseSize | MaybeRef | 30 | 噪点大小 |
| disabled | MaybeRef | false | 是否禁用 Acrylic |
| fallbackColor | MaybeRef | #e6e6e6e6 | 在禁用状态中替换 Acrylic 的纯色 |
Please give a ⭐️ if this project helped you!
If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent