首页 > 其他分享 >mojs——在Vue中使用mojs

mojs——在Vue中使用mojs

时间:2022-12-14 00:22:38浏览次数:74  
标签:mojs Vue f526 mo js umd 使用 new

前言

一个需求需要做动画效果,刚好搏皮有用mojs,就打算通过mojs实现;
Vue中的$nextTick有什么作用: Vue中的$nextTick有什么作用?
mojs: https://mojs.github.io/tutorials/

内容

安装

npm i @mojs/core 
OR 
yarn add @mojs/core

使用

import mojs from '@mojs/core'

export default {
 mounted() {
        this.getData()
        this.$nextTick(() => {
            this.animate()
        })
    },
    methods: {
        countUp() {},
        animate() {
            class Down extends mojs.CustomShape {
                getShape() {
                    return '<path d="M94.27,81.05,91.71,59.87a.86.86,0,0,0-.57-.7.89.89,0,0,0-.88.2l-6.32,6.31L55,36.85a1.72,1.72,0,0,0-2.4,0L41.75,47.67,12.25,18.25a.85.85,0,0,0-1.2,0l-4.8,4.8a.86.86,0,0,0,0,1.21L40.54,58.48a1.71,1.71,0,0,0,2.42,0L53.81,47.66l24.1,24L71.59,78a.85.85,0,0,0,.5,1.44L93.33,82a.8.8,0,0,0,.7-.24.82.82,0,0,0,.24-.7Zm0,0" />'
                }
                getLength() {
                    return 2671.37939453125
                }
            }
            mojs.addShape('down', Down)
            const down = new mojs.Shape({
                parent: '#animate',
                shape: 'down',
                fill: '#fff',
                scale: { 0.3: 0.5 },
                repeat: 100,
                duration: 1000,
                isYoyo: true,
                backwardEasing: 'sin.in',
                isShowEnd: false,
            }).play()
        },
    }
}

报错

vue.runtime.esm.js?2b0e:4603 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'appendChild')"
found in
---> <DataKanban>
       <Index> at src/views/indexs/index.vue
         <VScaleScreen> at src/components/scale-screen/scale-screen.vue
           <Home> at src/views/home.vue
             <App> at src/App.vue
               <Root>

TypeError: Cannot read properties of null (reading 'appendChild')
    at i.value (mo.umd.js?f526:6:1)
    at new t (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new r (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)
    at i.eval (mo.umd.js?f526:6:1)
    at new i (mo.umd.js?f526:6:1)

!> 通过报错不难看出,是没有拿到相应的dom,所以我们只需要使用$nextTick来获取dom即可

 this.$nextTick(() => {
    this.animate()
 })

标签:mojs,Vue,f526,mo,js,umd,使用,new
From: https://www.cnblogs.com/wangyang0210/p/16976503.html

相关文章

  • 《Redis DevOps》二:API的理解和使用
    概述数据结构与内部编码优点:1)改进内部编码时,对外数据结构与命令无影响2)多种内部编码适配不同使用场景单线程架构单线程访问快速的原因:1)纯内存访问2)非阻塞IO,ep......
  • #yyds干货盘点#聊聊vuex的Mutations和Actions
    首先讲讲版本问题,如果使用​​vue-cli2​​模版搭建的基础项目,注意,如果使用​​vue​​版本是2,当你你默认安装​​vuex​​肯定是​​4.x​​版本了,这里需要注意的是,你要降......
  • 31、OAK使用Yolov4-tiny进行训练、部署、测距功能使用
    基本思想:参考官网教程就行,这里只为实现自己的功能,做一下尝试和记录链接:https://pan.baidu.com/s/1vF7zbdyqpsfwmAV8Xmo9MQ 提取码:th5e (前提)安装openVINO环境,以备转换模......
  • 使用线程池和shardingsphere-jdbc对统计进行分表查询优化
    记录之前的一次优化过程,之前发布在wiki上,现摘出发布。0.前言主要查询表为还款计划表xx_plan(近4000w,日新增10~20w)、实还记录表xx_actual(2600w+,日新增5~10w)、代偿记录表x......
  • 使用 WebAPI获取实体的复数名称
    Xrm.Utility.getEntityMetadata("opportunity","").then(function(result){console.log("当前实体的复数名称:"+result.EntitySetName);},functio......
  • java和vue车辆管理系统车管所系统
    简介车辆管理系统车管所系统,管理员添加车主信息,车主提交自己的车辆信息,管理员审核车辆,对车辆行进年检,统计,记录车辆违规信息。车主可以查看自己的车辆信息、投诉、查看自己的......
  • java和vue的大学生奖学金助学金系统奖学金系统助学金系统
    简介大学生奖学金助学金系统。学生申请自己需要的奖助学金,上传证明材料。该学院的辅导员可以下载学生的证明材料以及根据学生的综合成绩来审核是否通过,若不通过请输入不通过......
  • java和vue的狱警管理系统监狱系统狱务管理系统
    简介狱警管理系统监狱系统狱务管理系统,主要是管理罪犯教育改造、劳动改造、案件管理,罪犯信息管理等演示视频​​https://www.bilibili.com/video/BV1VG411P7YL/?zw&vd_sour......
  • java和vue开发的电子书系统自动检测敏感词小说网站
    简介电子书系统,注册用户上传txt,系统自动检测敏感词汇并且自动生成章节。管理员审核电子书,管理电子书分类和用户,评论等。注册用户可以搜索浏览电子书,在线阅读和下载电子书。......
  • vue项目搭建通用后台管理系统(china_coding)
    一、前端环境搭建1、Nodejs环境可以参照:vue安装node以及nrm、nrm配置,路由安装。我们要使用Vue的前提是得安装Node.js环境,Node.js就相对于我们在Java后端的Tomcat,所以No......