翻頁元件page-flip呼叫問題

阿新 • • 發佈：2022-05-19

翻頁元件重新呼叫解決方案

翻頁元件: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>