关于vue.js:vue3-实现-亚克力材质

如何设计 Acrylic

咱们微调 Acrylic 的要害组件以凸显其独特外观和属性。咱们从半透明度、含糊和噪点设置开始，为平滑图面削减视觉深度和维度。咱们增加了排除混合模式层，以确保搁置在 Acrylic 背景上的 UI 的对比度和可读性。最初，咱们增加了各种色彩色调，以供用户进行个性化设置。这些图层协同作用，造成了全新的实用资料。

🌈 Demo

• https://huodoushigemi.github….

🚀 须要环境

• Chorme 76+
• Vue 3+

⚙️ 装置

npm i -S vue-acrylic

🦄 在 JS 中应用

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

🦄 在 Vue 中应用

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>

📄 选项

你能够抉择在利用的 Acrylic 中增加色彩色调，以展现个性化设计或实现与页面其余元素之间的视觉均衡。若要显示色彩而非灰度，你须要应用以下属性定义属于你本人的 Acrylic 画笔。

🌈 灵感来自 Fluent Design’s Acrylic Material

⭐️谢谢

如果这篇文章对你有帮忙请给我 ⭐️