v-appleblur 指令

介绍

v-appleblur 指令用于为元素添加苹果风格的毛玻璃效果。

基础用法

基础毛玻璃效果

自定义模糊度和背景色

自定义过渡时间 (2秒)

增强饱和度 (1.5)

查看代码

<template>
  <div class="demo-container">
    <div class="background-content">
      <div class="bg-pattern"></div>
    </div>

    <div class="cards-container">
      <!-- 基础用法 -->
      <div v-appleblur class="card">基础毛玻璃效果</div>

      <!-- 自定义模糊度和背景色 -->
      <div
        v-appleblur="{
          blur: 5,
          backgroundColor: 'rgba(199, 199, 199, 0.5)'
        }"
        class="card custom-card"
      >
        自定义模糊度和背景色
      </div>

      <!-- 自定义过渡时间 -->
      <div
        v-appleblur="{
          blur: 5,
          transition: 2000
        }"
        class="card transition-card"
      >
        自定义过渡时间 (2秒)
      </div>

      <!-- 调整饱和度 -->
      <div
        v-appleblur="{
          blur: 5,
          saturate: 1.5
        }"
        class="card saturate-card"
      >
        增强饱和度 (1.5)
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  position: relative;
  padding: 20px;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
  height: 400px;
}

.background-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-pattern {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) fixed,
    linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%) fixed;
  background-size:
    100% 100%,
    50% 50%;
  background-position:
    0 0,
    25px 25px;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.card {
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

.custom-card {
  color: #333;
}

.transition-card {
  color: #333;
}

.saturate-card {
  color: #333;
}
</style>

参数

属性名	说明	类型	是否必选	默认值
blur	模糊程度，单位px	number	○	2
backgroundColor	背景色，支持rgba格式以控制透明度	string	○	rgba(255, 255, 255, 0.7)
enabled	是否启用毛玻璃效果	boolean	○	true
transition	过渡时间，单位ms	number	○	300
saturate	饱和度，范围0-2	number	○	1

注意事项

注意

backdrop-filter 属性在某些浏览器中可能不被完全支持，特别是较旧的浏览器版本。 为了获得最佳效果，应该在有背景图像或内容的容器上使用此指令。 性能考虑：大量使用模糊效果可能会影响页面性能，特别是在移动设备上。 为了兼容性，同时使用了标准属性 backdrop-filter 和 WebKit 前缀版本 WebkitBackdropFilter。