vue3 实现 Windows 10 的描边效果

🌈 Demo

• https://huodoushigemi.github....

🚀 需要环境

• Chorme 76+
• Vue 3+

⚙️ 安装

npm i -S vue-reveal-effect

🦄 在 JS 中使用

<h1 id="reveal1">REVEAL EFFECT</h1>
<h1 id="reveal2">REVEAL EFFECT</h1>
<h1 id="reveal3">REVEAL EFFECT</h1>

<script>
  import { useRevealEffect } from "vue-reveal-effect";

  const options2 = {
    borderWidth: 4,
    borderColor: 'rgba(255, 0, 0, 40%)',
    borderSize: 40,
    bgSize: 40
    bgColor: '#00a1ff'
  }

  const options3 = {
    borderWidth: 2,
    clickEffect: false
  }

  useRevealEffect(document.getElementById("reveal1"));
  useRevealEffect(document.getElementById("reveal2"), options2);
  useRevealEffect(document.getElementById("reveal3"), options3);
</script>

🦄 在 Vue3 中使用

import { createApp } from 'vue'
import VueRevealEffect from 'vue-reveal-effect'

createApp(App).use(VueRevealEffect).mount('#app')

<template>
  <h1 v-reveal-effect>VUE REVEAL EFFECT</h1>
  <h1 v-reveal-effect="options1">VUE REVEAL EFFECT</h1>
  <h1 v-reveal-effect="options2">VUE REVEAL EFFECT</h1>
</template>

<script setup>
  const options1 = {
    borderWidth: 4,
    borderColor: 'rgba(255, 0, 0, 40%)',
    borderSize: 40,
    bgSize: 40
    bgColor: '#00a1ff'
  }

  const options2 = {
    borderWidth: 2,
    clickEffect: false
  }
</script>

📄 属性

name	Type	Default	Description
borderWidth	MaybeRef<number>	1
borderColor	MaybeRef<string>
borderGradientSize	MaybeRef<number>	100
bgColor	MaybeRef<string>
bgGradientSize	MaybeRef<number>	130
clickEffect	MaybeRef<boolean>	true	Enable ripple click effect
light	MaybeRef<boolean>
disabled	MaybeRef<boolean>	false

☹ 不支持

• ❌ 不支持 css 的 border-radius 属性
• ❌ 不支持 html 的 <img /> 标签

⭐️ 最后

如果这篇文章对你有所帮助，请为我点赞 ⭐️