vue自定义指令实现打字效果

最新推荐文章于 2024-09-26 15:51:38 发布

等你许久_孟然

最新推荐文章于 2024-09-26 15:51:38 发布

阅读量229

点赞数 1

分类专栏：前端效果文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mengran_code/article/details/142501363

版权

前端效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现如通义灵码官网关于代码片段中，当鼠标hover上代码上时，出现打字效果，示例地址：https://tongyi.aliyun.com/lingma?spm=5176.28508143.J_ahRFo5CaAe_asSOaCgS4J.14.5421154auHz4xJ&scm=20140722.M_185502201.P_131.MO_2276-ID_10360025-MID_10360025-CID_31292-ST_10352-V_1

通过vue2封装指令的方式实现：

import Vue from 'vue';

const typewrite = {
  bind(el, binding) {
    const typingSpeed = 50; // 打字速度，单位为毫秒
    let typingEffectActive = false;
    let originalText = el.textContent;
    el.textContent = originalText; // 初始化文本内容

    el.addEventListener('mouseenter', function() {
      if (!typingEffectActive){
        typingEffectActive = true;
        el.textContent = '';
        let i = 0;
        let typingEffect = setInterval(function() {
          if (i < originalText.length) {
            el.textContent += originalText.charAt(i);
            i++;
          } else {
            clearInterval(typingEffect); // 清除定时器
            typingEffectActive = false;
          }
        }, typingSpeed); // 设置速度，每100毫秒添加一个字符
      }
    });
  }
}

Vue.directive('typewrite',typewrite);

调用方式：

div v-typewrite class="app-con" style="width: 500px;text-align: left;">
      这里是默认显示的文字，鼠标悬停时将触发打字效果。
      这里是默认显示的文字，鼠标悬停时将触发打字效果。
      这里是默认显示的文字，鼠标悬停时将触发打字效果
    </div>
    <pre v-typewrite>
       var message="欢迎";
          for(var i=1;i<=10;i++)
          {
              alert(message);
          }
    </pre>

当然也可以使用第三方插件，例如：typed.js，参考地址：https://www.cnblogs.com/sexintercourse/p/18113289