feat: 添加打字机组件demo

This commit is contained in:
xiaoxian521
2022-10-19 18:54:26 +08:00
parent f9cf804627
commit 5dbba0f3ff
8 changed files with 87 additions and 1 deletions

View File

@@ -0,0 +1,44 @@
import { h, defineComponent } from "vue";
import TypeIt from "typeit";
// 打字机效果组件(只是简单的封装下,更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options
export default defineComponent({
name: "TypeIt",
props: {
/** 打字速度,以每一步之间的毫秒数为单位 */
speed: {
type: Number,
default: 200
},
values: {
type: Array,
defalut: []
},
className: {
type: String,
default: "type-it"
},
cursor: {
type: Boolean,
default: true
}
},
render() {
return h(
"span",
{
class: this.className
},
{
default: () => []
}
);
},
mounted() {
new TypeIt(`.${this.className}`, {
strings: this.values,
speed: this.speed,
cursor: this.cursor
}).go();
}
});