hanziwriter插件在vue中的使用实例

最新推荐文章于 2024-09-13 22:08:25 发布

cv酱

最新推荐文章于 2024-09-13 22:08:25 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/yinguser/article/details/126491189

版权

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

摘要由CSDN通过智能技术生成

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: {
        chai