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

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

成都創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元文登做網(wǎng)站,已為上家服務(wù),為文登各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

js有什么特點(diǎn)

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

需求分析：

如圖，有很多高度不固定的模塊（圖中只顯示兩個(gè)，本人項(xiàng)目有十三個(gè)），點(diǎn)擊模塊標(biāo)題展開(kāi)相應(yīng)的模塊，再次點(diǎn)擊此模塊匿藏，如何實(shí)現(xiàn)此需求并實(shí)現(xiàn)復(fù)用？

點(diǎn)擊紅框前：

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

點(diǎn)擊后：

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

難點(diǎn)分析:

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




  
  Title

按鈕

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

解決方案：

1、實(shí)現(xiàn)一個(gè)函數(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如何實(shí)現(xiàn)垂直方向展開(kāi)、收縮不定高度模塊的JS組件

在components中注冊(cè)了此組件：

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

即可在teamplate中引用，請(qǐng)留意紅框文字說(shuō)明部分。

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

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

實(shí)現(xiàn)效果：

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

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

網(wǎng)頁(yè)名稱：Vue.JS如何實(shí)現(xiàn)垂直方向展開(kāi)、收縮不定高度模塊的JS組件
文章源于：http://weahome.cn/article/ihijii.html

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

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

js有什么特點(diǎn)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管