Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設計制作、網(wǎng)站設計和BGP機房服務器托管的網(wǎng)絡公司，有著豐富的建站經(jīng)驗和案例。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

需求分析：

如圖，有很多高度不固定的模塊（圖中只顯示兩個，本人項目有十三個），點擊模塊標題展開相應的模塊，再次點擊此模塊匿藏，如何實現(xiàn)此需求并實現(xiàn)復用？

點擊紅框前：

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

點擊后：

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

難點分析:

模塊高度不固定。比如，本人一開始想到的方法如下：




  
  Title

按鈕

這種方法確實可以實現(xiàn)點擊展開，再次點擊收縮的需求，但是有一個明顯的缺點：限定了容器的高度，也就是每個模塊都需要固定高度，并不適用于需求場景。

解決方案：

1、實現(xiàn)一個函數(shù)式組件

本人命名為vertical-toggle.js
// Created by xiaoqiang on 17/04/2018.
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
 'before-enter' (el) {
  el.style.transition = elTransition
  if (!el.dataset) el.dataset = {}
  el.dataset.oldPaddingTop = el.style.paddingTop
  el.dataset.oldPaddingBottom = el.style.paddingBottom
  el.style.height = 0
  el.style.paddingTop = 0
  el.style.paddingBottom = 0
 },
 'enter' (el) {
  el.dataset.oldOverflow = el.style.overflow
  if (el.scrollHeight !== 0) {
   el.style.height = el.scrollHeight + 'px'
   el.style.paddingTop = el.dataset.oldPaddingTop
   el.style.paddingBottom = el.dataset.oldPaddingBottom
  } else {
   el.style.height = ''
   el.style.paddingTop = el.dataset.oldPaddingTop
   el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
  el.style.overflow = 'hidden'
 },
 'after-enter' (el) {
  el.style.transition = ''
  el.style.height = ''
  el.style.overflow = el.dataset.oldOverflow
 },
 'before-leave' (el) {
  if (!el.dataset) el.dataset = {}
  el.dataset.oldPaddingTop = el.style.paddingTop
  el.dataset.oldPaddingBottom = el.style.paddingBottom
  el.dataset.oldOverflow = el.style.overflow
  el.style.height = el.scrollHeight + 'px'
  el.style.overflow = 'hidden'
 },
 'leave' (el) {
  if (el.scrollHeight !== 0) {
   el.style.transition = elTransition
   el.style.height = 0
   el.style.paddingTop = 0
   el.style.paddingBottom = 0
  }
 },
 'after-leave' (el) {
  el.style.transition = ''
  el.style.height = ''
  el.style.overflow = el.dataset.oldOverflow
  el.style.paddingTop = el.dataset.oldPaddingTop
  el.style.paddingBottom = el.dataset.oldPaddingBottom
 }
}
export default {
 name: 'VerticalToggle',
 functional: true,
 render (h, { children }) {
  const data = {
   on: Transition
  }
  return h('transition', data, children)
 }
}

2、引用此組件

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

在components中注冊了此組件：

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

即可在teamplate中引用，請留意紅框文字說明部分。

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

至此，Vue.js實現(xiàn)垂直展開、收縮不定高度模塊組件實現(xiàn)完成及應用均已完成。

實現(xiàn)效果：

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件

以上是“Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站題目：Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/gsjhj.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue.JS如何實現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件-創(chuàng)新互聯(lián)

js有什么特點

其他資訊

網(wǎng)站制作

企業(yè)服務

網(wǎng)站建設

服務器托管