翻页组件page-flip调用问题

翻页组件重新调用解决方案

翻页组件:page-flip

import { PageFlip } from 'page-flip'pagefile() {    //绘制翻页this.pageFlip = new PageFlip(document.getElementById('demoBookExample1'), {        width: 500, // base page width        height: 500, // base page height        size: 'stretch',        // set threshold values:        // drawShadow: false,        minWidth: 350,        maxWidth: 550,        minHeight: 420,        maxHeight: 550,        // clickEventForward:false,        disableFlipByClick: true,        maxShadowOpacity: 0.5, // Half shadow intensity        showCover: true,        mobileScrollSupport: false // disable content scrolling on mobile devices      })     this.PageShow()}PageShow() {//加载翻页      this.pageFlip.loadFromHTML(document.querySelectorAll('.shipfiles_page2'))      // // triggered by page turning      this.pageFlip.on('flip', e => {        e, 'fil['      })      // // triggered when the state of the book changes      this.pageFlip.on('changeState', e => {        e, 'eeeeeeeeeeeee'        if (e.data == 'flipping') {        }      })      // // triggered when page orientation changes      this.pageFlip.on('changeOrientation', e => {})},`跳转翻页` this.pageFlip.flip(页码：Number)`DOM结构查看官网` https://nodlik.github.io/StPageFlip/

问题发现+尝试解决方案

问题发现#翻页组件方法再次被调用时，原来的翻页组件样式还保留在页面，而且新生成的翻页组件内容直接在组件外面，没有放在里面尝试解决方案`(1)使用翻页组件API的destroy方法销毁，生成新的翻页组件无法获取节点``(2)使用翻页组件API的updateHTML方法更新节点，生成的翻页组件没有封面样式``(3)使用DOM节点保存数据，等翻页组件再次调用时只更新数据再销毁上个节点和数据，          重新再调用保存的DOM节点，页面样式出现空白透明翻页``(4)使用路由跳转刷新页面，让翻页组件只被调用一次(created时调用查到数据时调用翻页组件)，          路由菜单是前端的可能可行，如果路由是后台动态生成的，这个方法只能实现刷新跳到进入的默认页面``(5)使用父子组件，将翻页组件当成一个子组件，父组件将数据传到子组件，出现空白透明翻页，          上一次数据未被清除，翻页组件可能无法识别动态数据`

解决方案

#此方法直接控制翻页组件的生成销毁，使翻页组件只调用了一次数据import book from './book.vue' //存放翻页组件`动态生成组件,控制组件生成` <component :ImgList="ImgList"  :is="componentName"></component>`created`results() //获取到初始数据`methods` change()  //获取到更新数据  --->this.componentName='' //改变时清掉动态组件--->this.results() //获取数据results(){        ImgList //获取到数据        this.nextTick(()=>{           this.componentName = 'book' //查到数据时重新生成组件        })    } 

解决主要问题的后续

#解决控制翻页组件调用后(1)点击控制页码(页码不在翻页样式中)让翻页组件翻页---this.pageFlip.flip(页码) 页码：page   `问题出现`：父组件的方法不能控制子组件的翻页，翻页组件的内容都在子组件           `问题解决`：将页码通过prop传到子组件，子组件再watch监听页码的变化翻页       watch:{                   page(newVal){                         this.pageFlip.flip(newVal)                   } }(2)子组件的方法在父组件上实现(PreviewImg)      `问题出现`：点击翻页组件的图片让它放大，方法在子组件上，放大的内容在父组件上      `问题解决`：通过emit将子组件的数据传到父组件，父组件拿到数据后控制图片的放大<component :ImgList="ImgList" :is="componentName" :page="page" @PreviewImg="PreviewImg"></component>