hanziwriter插件在vue中的使用实例

最新推荐文章于 2026-04-19 12:24:24 发布

原创最新推荐文章于 2026-04-19 12:24:24 发布 · 1.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

cv酱

关注

标签

#vue.js #javascript #前端

分类前端开发

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用HanziWriter插件。通过在index.html引入插件，然后在组件的mounted生命周期钩子中调用HanziWriter.default.create进行初始化。需要注意的是，官方示例在HTML文件中直接运行，实际Vue应用中需添加'default'来正确引用。

1、链接：

Hanzi Writer

2、在index.htmml文件中添加这个

   <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

3、具体使用

<template>
    <div>
        <div id="character-target-1"></div>
        <div id="character-target-2"></div>
        <!-- <button id="animate-button">Start</button> -->
    </div>
</template>

<script>

export default {
    data() {
        return {
        }
    },
    // created() {
    //     this.chainAnimations()
    // },
    mounted() {
        this.chainAnimations()
    },
    methods: {
        chainAnimations() {
            const HanziWriter = require('hanzi-writer');
            var char1 = HanziWriter.default.create('character-target-1', '很', {
                width: 100,
                height: 100,
                padding: 5,
                showCharacter: false

            });
            var char2 = HanziWriter.default.create('character-target-2', '爽', {
                width: 100,
                height: 100,
                padding: 5,
                showCharacter: false
            });
            var delayBetweenAnimations = 1000; // milliseconds
            char1.hideCharacter();
            char2.hideCharacter();
            char1.animateCharacter({
                onComplete: function () {
                    setTimeout(function () {
                        char2.animateCharacter();
                    }, delayBetweenAnimations);
                }
            });
            // document.getElementById('animate-button').addEventListener('click', chainAnimations);
        }
    }
}
</script>

<style scoped>
.name-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.firstname {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.06rem;
    font-weight: 800;
}
</style>>

4、说明：

需要在mounted这个钩子函数中调用，在created中调用会报错，HanziWriter.default.create---->官网上没有加上这个default，需要把那个变量打印出来才会看到，官网上的例子只能放在html文件上运行的，所以参照我这个方法运行起来就可以的了