翻页组件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>