vue組件系列－氣泡卡片

sanyang 發布于2019-08-19 18:38 / 1651人閱讀

摘要：但是在用來展示小體量的信息時我認為它是過于龐大的，我們可以采用更優雅的氣泡卡片來展示那些小體量的信息。其他都是子組件的自身數據，用于控制氣泡卡片的顯示隱藏和位置。

從模態彈框講起

前端攻城??對模態彈框肯定很熟悉，不管是套用bootstrap的還是自己寫的，它常用來完成與用戶的展示交互和處理一些數理邏輯。但是在用來展示小體量的信息時我認為它是過于龐大的，我們可以采用更優雅的氣泡卡片來展示那些小體量的信息。
就像這樣的↓↓↓

先附上體驗地址

實現 vue模版

  
    
  
  
    
      {{title}}
      {{content}}

這里對熟悉vue的同學來講沒有什么特殊的地方，主要有一個slot標簽會有疑問，在編譯模版時遇到slot標簽會回到html文檔中用相應的內容代替，使用方式可以參考官方文檔vue-slot

數據

props: {
  title: {
    type: String,
    default: "標題"
  },
  content: {
    type: String,
    default: "內容"
  },
  placement: {
    type: String,
    default: "top"
  }
},
data() {
  return {
    show: false,
    arrowLeft: 0,
    x: 0,
    y: 0
  }
}

來自父組件的數據title和content是必選項（雖然我也給它們設置了默認值），placement代表氣泡卡片的出現位置，默認會出現在觸發目標的上方，暫時支持top和bottom。其他都是子組件的自身數據，用于控制氣泡卡片的顯示隱藏和位置。

事件函數

  pop(e) {
    if(this.show){
      this.show = false
      return
    }
    var target = e.target
    this.arrowLeft = target.offsetWidth / 2
    this.x = target.offsetLeft
    if(this.placement == "top"){
      this.y = target.offsetTop - this.$els["pop"].offsetHeight - 3
    }else {
      this.y = target.offsetTop + target.offsetHeight + 3
    }
    this.show = true
  }

這里依靠事件的冒泡，slot中的事件會冒泡到子組件中定義的父層div標簽上，進而觸發事件執行后續的位置計算。

scss

這方面難點主要是那兩個小三角形的，其他的都比較簡單。

.v-popover-arrow{
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  margin-left: -5px;
  &:after{
    content: " ";
    margin-left: -4px;
    border: 4px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
  }
}
.v-popover-arrow-top{
  border-bottom-width: 0;
  border-top-color: #d9d9d9;
  bottom: -5px;
  &:after{
    border-top-color: #fff;
    bottom: -3px;
  }
}

使用

html:
  
    
      
    
  

js:
  var btn = new Vue({
    el: "#app",
    data: {
      popTitle: "我是標題"
      popContent: "氣泡內容氣泡內容氣泡內容氣泡內容氣泡內容氣泡內容氣泡內容氣泡內容氣泡內容",
      popPlacement: "top"
    },
    components: {
      "v-popover": components.popover
    }
  })

這里我在組件標簽中插了一個button標簽，上面提到的slot最終就會被這個按鈕代替，同時它的點擊事件會經過冒泡被觸發。

打個廣告

插播小廣告。。。不要打我，我和@二胖手正在維護相關組件庫web-style，待組件基本完善后，參考文檔也會跟上，歡迎關注，有什么好的建議也歡迎討論。

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79793.html

VUE UI框架對比 element-ui 與 iView

摘要：而則是用到到指令結合的方式去生成，批量生成元素。表格操作列自定義渲染的時，使用的是的函數，直接在中插入對應模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項目UI框架在選型，做了個分析，不帶有任何利益相關）主要從以下幾個方面來做對比使用率（npm 平均下載頻率，組件數量，star, issue…)API風格打包優化與設計師友...

ZHAO_ 2019-08-20 17:25 評論0 收藏0
一套基于vue2.0高質量的UI框架，前期開發中

摘要：使用屬性時選中的值為的值默認值屬性類型說明組合中的所有全部禁用默認值屬性類型說明組合中所有的尺寸默認值屬性類型說明類似這樣的數組，其中指定當前項是否選中，為當前項的文字描述默認值組件組件組件組件組件組件組件組件寫在前邊自己在業余時間開發的一套基于vue的UI框架，初衷是在平時的開發過程中，發現有很多業務利用現有的UI框架實現起來比較麻煩，另外自己也希望可以寫一套可以盡量多的滿足業務...

explorer_ddf 2019-08-26 14:06 評論0 收藏0
canvas動畫合集Vue組件

摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...

tigerZH 2019-08-30 13:56 評論0 收藏0
canvas動畫合集Vue組件

摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...

AlexTuan 2019-08-26 11:38 評論0 收藏0
vue 指令---氣泡提示(手擼實戰)

摘要：自己寫了個組件，想加個氣泡提示。為了復用和省事特此寫了個指令來解決。的生命周期生成前生成后生成真正更新更新銷毀。而的指令則是依賴于的生命周期，無非也是有以上類似的鉤子。當鼠標放到上就會顯示出來，離開就會消失。菜鳥學習之路//L6zt github 自己在造組件輪子，也就是瞎搞。自己寫了個slider組件，想加個氣泡提示。為了復用和省事特此寫了個指令來解決。預覽地址項目地址 gith...

adie 2019-08-23 12:24 評論0 收藏0