关于vue.js:Vue3-实现-Windows-10-的描边效果

Demo

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

仓库

• https://github.com/huodoushig...

须要环境

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

属性

不反对

• 不反对 css 的 border-radius 属性
• 不反对 html 的 <img /> 标签

最初

你的点赞⭐对我十分重要，也是我保持的能源