当前位置:首页 > 编程笔记 > 正文
已解决

005:vue2使用vue-type-writer实现打字机效果

来自网友在路上 183883提问 提问时间:2023-09-27 04:52:13阅读次数: 83

最佳答案 问答题库838位专家为你答疑解惑

Vue Type Writer是一个Vue.js 2打字机效果组件,支持像打字机一样模仿键入文本。

文章目录

  • 1. 效果
  • 2. 安装使用

1. 效果

请添加图片描述

2. 安装使用

npm 安装

npm install vue-type-writer --save

完整代码

<template><div class="app-container home"><div class="body"><el-button type="primary" @click="start"> 实现js数组去重 </el-button><VueTypewriter class="tl" ref="typewriter" :interval="50" :style="{ visibility: status }"><div class="comments"><p>const array = [1, 2, 2, 3, 4, 4, 5];</p><p>const uniqueArray = Array.from(new Set(array));</p><p>console.log(uniqueArray);</p></div></VueTypewriter></div></div>
</template><script>
import VueTypewriter from 'vue-type-writer'
export default {name: 'Demo',components: { VueTypewriter },data() {return {status: 'hidden',}},methods: {start() {this.status = 'visible'this.$refs.typewriter.$emit('typewrite')},},
}
</script><style scoped lang="scss">
.home {.body {width: 890px;height: 500px;padding: 20px;border: #b2c92a solid 10px;.comments {p {font-size: 18px;color: green;}}}
}</style>
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"005:vue2使用vue-type-writer实现打字机效果":http://eshow365.cn/6-14406-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!