hanziwriter插件在vue中的使用实例

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文件上运行的，所以参照我这个方法运行起来就可以的了