成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue組件系列－氣泡卡片

sanyang / 1662人閱讀

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

從模態(tài)彈框講起

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

先附上體驗(yàn)地址

實(shí)現(xiàn) vue模版 
  

    
  

  

    

      
{{title}}

      
{{content}}

這里對(duì)熟悉vue的同學(xué)來講沒有什么特殊的地方，主要有一個(gè)slot標(biāo)簽會(huì)有疑問，在編譯模版時(shí)遇到slot標(biāo)簽會(huì)回到html文檔中用相應(yīng)的內(nèi)容代替，使用方式可以參考官方文檔vue-slot

數(shù)據(jù) 
props: {
  title: {
    type: String,
    default: "標(biāo)題"
  },
  content: {
    type: String,
    default: "內(nèi)容"
  },
  placement: {
    type: String,
    default: "top"
  }
},
data() {
  return {
    show: false,
    arrowLeft: 0,
    x: 0,
    y: 0
  }
}

來自父組件的數(shù)據(jù)title和content是必選項(xiàng)（雖然我也給它們?cè)O(shè)置了默認(rèn)值），placement代表氣泡卡片的出現(xiàn)位置，默認(rèn)會(huì)出現(xiàn)在觸發(fā)目標(biāo)的上方，暫時(shí)支持top和bottom。其他都是子組件的自身數(shù)據(jù)，用于控制氣泡卡片的顯示隱藏和位置。

事件函數(shù) 
  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中的事件會(huì)冒泡到子組件中定義的父層div標(biāo)簽上，進(jìn)而觸發(fā)事件執(zhí)行后續(xù)的位置計(jì)算。

scss

這方面難點(diǎn)主要是那兩個(gè)小三角形的，其他的都比較簡(jiǎn)單。

.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: "我是標(biāo)題"
      popContent: "氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容氣泡內(nèi)容",
      popPlacement: "top"
    },
    components: {
      "v-popover": components.popover
    }
  })

這里我在組件標(biāo)簽中插了一個(gè)button標(biāo)簽，上面提到的slot最終就會(huì)被這個(gè)按鈕代替，同時(shí)它的點(diǎn)擊事件會(huì)經(jīng)過冒泡被觸發(fā)。

打個(gè)廣告

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79793.html

相關(guān)文章

  • VUE UI框架對(duì)比 element-ui 與 iView

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

    ZHAO_ 評(píng)論0 收藏0

  • 一套基于vue2.0高質(zhì)量的UI框架，前期開發(fā)中

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

    explorer_ddf 評(píng)論0 收藏0

  • canvas動(dòng)畫合集Vue組件

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

    tigerZH 評(píng)論0 收藏0

  • canvas動(dòng)畫合集Vue組件

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

    AlexTuan 評(píng)論0 收藏0

  • vue 指令---氣泡提示(手?jǐn)]實(shí)戰(zhàn))

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

    adie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<