vue開發公共元件之返回頂部 backtop

2021-10-05 21:55:46 字數 4347 閱讀 5356

記錄一下開發公共元件的流程。

背景：pc端使用element-ui框架，本身是有返回頂部的元件的。現在需要在移動端使用。照著葫蘆畫瓢弄乙個。

記錄如何將公共元件通過install的方式，註冊為全域性的元件使用。

components目錄下，新建bacttop資料夾，內部包含乙個index.js檔案和乙個src資料夾。

src資料夾內放backtop.vue元件檔案。

|


--components


|--index.js


|-- backtop


|--index.js


|--src


|--backtop.vue
backtop下的index.js負責安裝，backtop.vue內部寫具體的元件**

index.js檔案內容：

// index.js


import backtop from


"./src/backtop"


;// 引入元件


// 配置安裝方法


/* istanbul ignore next */


backtop.


install


=function


(vue)


;// 匯出模組


export


default backtop;
backtop.vue檔案內容：



<


!-- xl-backtop樣式名，需要自己在樣式檔案中定義這個樣式內容 --


>


v-if=


"visible"


@click.stop=


"handleclick"


:style=""


class


="xl-backtop"


>


<


!-- 這裡是返回頂部的圖示 --


>


"arrow-up"


/>


<


/slot>


<


/div>


<


/template>


// 這裡引入了節流函式


import


from


"@/utils"


;const


cubic


=(value)


=> math.


pow(value,3)


;const


easeinoutcubic


=(value)


=>


value <


0.5?


cubic


(value *2)


/2:1


-cubic((


1- value)*2


)/2;


export


default


, target:


[string]


, right:


, bottom:,}


,data()


;}, computed:


px`;},


styleright()


px`;},


},mounted()


, methods:`)


;}this


.container =


this


.el;}}


,onscroll()


,handleclick


(e),


scrolltotop()


else};


raf(framefunc);}


,},beforedestroy()


,};<


/script>
返回頂部的樣式內容：

// 返回頂部


.xl-backtop
為了一次性註冊多個自己寫的功能元件，我們在components資料夾下面寫乙個index.js

components下的index負責一次性組合多個

// components/index.js


import backtop from


"./backtop"


;// 引入我們的返回頂部元件。其他的類似的一起寫在這裡


const components =


[backtop]


;// 其他的元件以陣列形式繼續寫


const


install


=function


(vue, opts =))


;};/* istanbul ignore if */if(


typeof window !==


"undefined"


&& window.vue)


// 組合匯出安裝方法


const exportsresult =


;object.


assign


(exportsresult, components)


;export


default exportsresult;
最後在專案的main.js安裝

// the vue build version to load with the `import` command


// (runtime-only or standalone) has been set in webpack.base.conf with an alias.


import vue from


"vue";;


import store from


"./store"


;import router from


"./router"


;// 自己封裝的公共安裝元件


import xlcomponent from


"@/components"


;vue.


use(xlcomponent)


;import


"@/styles/index.less"


;// 全域性 css


vue.config.productiontip =


false


;/* eslint-disable no-new */


newvue()


;
原因是document.documentelement.scrolltop在安卓端始終是0；只有pc端和ios端才是正常的。

改寫backtop元件中的**，完成相容。



"van-fade"


>


v-if=


"visible"


@click.stop=


"handleclick"


:style=""


class


="xl-backtop"


>


"arrow-up" color=


"#13b7f6"


/>


<


/slot>


<


/div>


<


/transition>


<


/template>


import


from


"@/utils"


;const


cubic


=(value)


=> math.


pow(value,3)


;const


easeinoutcubic


=(value)


=>


value <


0.5?


cubic


(value *2)


/2:1


-cubic((


1- value)*2


)/2;


export


default


, target:


[string]


, right:


, bottom:,}


,data()


;}, computed:


px`;},


styleright()


px`;},


},mounted()


, methods:`)


;}this


.container =


this


.el;}}


,onscroll()


,handleclick


(e),


scrolltotop()


else};


raf(framefunc);}


,},beforedestroy()


,};<


/script>

vue練習 返回頂部

先來乙個小小的圖示按鈕 scroll click totop v show showtop 複製 總體定義基本狀態 data 複製 監聽當前滾動條的位置 mounted 複製 實現滾動效果 methods this.scrollstate 1 e.preventdefault let this th...

vue元件開發之元件插槽

作用 父元件向子元件傳遞內容 插槽位置 vue.component alert box 具名插槽定義 就是有名字的插槽 定義name header slot 內容solt header 內容h1 沒有名稱的話就匹配到沒有name屬性的插槽中 還可以使用template標籤進行使用 template只...

元件化開發之vue

今天寫了寫vue的元件化開發demo，有些小的心得。分享一下。元件化意味著 可以復用，呼叫元件就可以了。然後可以通過元件呼叫元件的相關能力。例如以前我做元件化開發的乙個小專案 原生js元件的實現 這就是乙個 了，分割成以頁面為一級單位，元件為二級單位的乙個格局，然後呼叫addpage addcomp...