vue項目筆記-封裝組件篇

2019年8月24日 59次阅读 来源: 你你

我一直都置信，決議將來的是自信與生長速率，生長的過程當中，整頓是一個非常重要的環節，接下來是我整頓的體系組件開闢經常運用的部份。

本文的主要內容有：

1.table內編輯 
2.高度不牢固，顯現隱蔽過渡動畫
3.處理vue父組件通報props異步數據到子組件的題目

一、vue table內編輯

  • 需求：

    1.table點擊編輯按鈕時，顯現input（此input可修正table里某一行某一列的內容）、作廢按鈕、保留按鈕。
    2.點擊保留按鈕，則保留編輯后的內容，點擊作廢則不保留。

  • 思緒：
    1.點擊編輯時編輯按鈕隱蔽，保留和作廢顯現。可運用$set,在每一行數據里增添一個屬性edit，this.$set(v, ‘edit’, false);，組件標籤里用v-show=“scope.row.edit 舉行顯現隱蔽。$set官方詮釋（向相應式對象中增加一個屬性，並確保這個新屬性同樣是相應式的，且觸發視圖更新。它必需用於向相應式對象上增加新屬性）。

    2.編輯由於input是雙向綁定，輸入的時刻就轉變了數據，點擊作廢時，需恢複本來的數據。需 “拷貝” 一份本來的數據，如作廢則運用這個數據。代碼有兩部份，一部份是只針對一列，名字寫實，明白思緒。另一部份是現實項目開闢能用到的，每一列都可編輯，而且名字可變。代碼以下：

    （1）明白思緒，title列舉行可編輯

        要求table數據
        this.$http.get(this.tableUrl).then(response => {
        let commTable1 =response.data.tableData;
        this.list = commTable1 .map(v => {
             this.$set(v, 'edit', false); 
              v.oldTitle = v.title ; 
              return v
            })
        })
        點擊保留
        save(row) {
          row.edit = false
          row.oldTitle = row.title
        }
       點擊作廢
       cancel(row) {
          row.title = row.oldTitle
          row.edit = false
       }

（2）table每一列舉行編輯

        table要求數據
        this.$http.get(this.tableUrl).then(response => {
         response = response.data;
         let commTable1 =response.tableData;
         this.commTable= commTable1.map(v => {
              for(var obj in v){
                   v[`old${obj}`]=v[obj]
               }
              this.$set(v, 'edit', false);
                   return v
              })
           });
         點擊保留
         save(row) {
              for(var obj in row){
              let str = '';
              if(obj.indexOf('old')>-1){
                  str = obj.replace('old','');
                  row[obj]=row[str];
                }
              }
              row.edit = false
            }
         }
       點擊作廢
       cancel(row) {
           let str = '';
            if(obj.indexOf('old')>-1){
               str = obj.replace('old','');
                row[str]=row[obj];
             }
           }
       row.edit = false;
     }

二、高度不牢固，高低滑動動畫

不管是vue的過渡動畫，照樣element的過渡動畫，都是須要高度牢固，沒法滿足需求。接下來是一個大神封裝的一個函數式組件，這個組件只適用於單個內容，假如內容是v-for輪迴，且高度不牢固，我做了一下改裝，運用的是vue 的transition-group。Vue.JS完成垂直方向睜開、壓縮不定高度模塊的JS組件

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)
        }
    }

組件中可如許運用

 import verticalToggle from './vertical-toggle.js';
 <vertical-toggle> 
    <div style="background-color:red;" v-show="dialogVisible1">123</div>
  </vertical-toggle>

以上適用於單個內容，假如內容是v-for輪迴，且高度不牢固，運用的是vue 的transition-group
**vue組件：**
    <transition-group name="fade2" v-on:enter="enter" v-on:before-leave="beforeLeave" v-on:leave="leave">
         <div v-for="(item2,i2) in item.children" :key="i2" class="fade2">
            {{item2.name}}
         </div>
    <transition-group>

要領：

    enter(el){
        el.style.height = el.scrollHeight + 'px';
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
    },
    beforeLeave(el){
       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){
       el.style.height = 0
       el.style.paddingTop = 0
       el.style.paddingBottom = 0
      },

}
css：

     .fade2-enter-active,.fade2-leave-active {
         transition: all .5s;
    }
     .fade-enter,.fade2-enter,.fade-leave-to,.fade2-leave-to{
         height: 0px;
    }

假如有需求是還要在顯現的組件里增加內容，則還需下面代碼，由於this.$refs不支持相應，所以就在updated生命周期里寫了。

     updated() {
         if(this.flog1){
         for(let obj of this.list){
             let index=this.list.indexOf(obj)
             this.$refs.fade[index].style.height="auto";
         }
         this.flog2=false;
        }
      },

三、處理vue父組件通報props異步數據到子組件的題目

data為異步獵取的數據，想通報給子組件運用

<template>
    <div> 
        父組件
        <child :child-data="data"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
    data: () => ({
        data: ''
     }),
    components: {
        child 
    },
    mounted () {
        // setTimeout模仿異步數據
        setTimeout(() => {
            this.data= '異步的數據'
        }, 2000)
    }
    }
</script>

子組件child.vue

<template>
    <div>
        子組件{{childData}}
    </div>
</template>
<script>
export default {
props: {
    childData:{
        type:String
    }
},
created () {
    console.log(this.childData) // 空值
},
}
</script>

子組件的html中的{{childData}}的值會跟着父組件的值而轉變，然則created內里的卻不會發作轉變(生命周期題目)
處理辦法：我這裏給出我經經常運用的兩種經常運用的處理方案，另有其他的處理方案 https://www.jb51.net/article/…。
1.在父組件運用v-if 要領

<template>
    <div> 
        父組件
        <child :child-data="data" v-if="flag"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
    data: () => ({
        data: '',
        flag: false
     }),
    components: {
        child 
    },
    mounted () {
        // setTimeout模仿異步數據
        setTimeout(() => {
            this.data= '異步的數據'
        }, 2000)
        this.flag = true
    }
    }
</script>

2.子組件運用watch來監聽父組件轉變的prop，運用methods來替代created,既然created只會實行一次，然則又想監聽轉變的值做其他事變的話，可運用這個要領。

<template>
    <div>
        子組件{{childData}}
    </div>
</template>
<script>
export default {
props: {
    childData:{
        type:String
    }
},
created () {
    console.log(this.childData) // 空值
},
watch: {
    childData: (val) {
        this.childData=val;
        this.updata();
    }
}
methods: {
    updata () { 
        console.log(this.childData);
    }
}
</script>

以上是整頓的內容。

    原文作者：你你
    原文地址: https://segmentfault.com/a/1190000015442500
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞