vue组件系列－气泡卡片

sanyang 发布于2019-08-19 18:38 / 1538人阅读

摘要：但是在用来展示小体量的信息时我认为它是过于庞大的，我们可以采用更优雅的气泡卡片来展示那些小体量的信息。其他都是子组件的自身数据，用于控制气泡卡片的显示隐藏和位置。

从模态弹框讲起

前端攻城?️对模态弹框肯定很熟悉，不管是套用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，待组件基本完善后，参考文档也会跟上，欢迎关注，有什么好的建议也欢迎讨论。

私有云 idc机房托管 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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