跟随Element学习Vue小技巧(41)——Dropdown

❝
唯独在努力这一点上

我不想输给他
❞

前言

一次跟小马去咖啡店，一位漂亮的女服务员走过来

你好，请问两位需要喝点什么？
—杯卡布奇诺

美女转过身来问我

帅哥，你需要喝点什么？
可以续杯吗？
可以
那我不点了，我喝他的续杯就行了
。。。被看穿了吗？╮(╯▽╰)╭

没戏咯，下次得把小心思藏好一点
论小心思，不得不说说今天的下拉菜单
层层下拉，简直是深不见底！！

1 Dropdown

分割线

世界上最远的距离不是我在天涯，你在海角
世界上最远的距离不是我在农村，你在城市
世界上最远的距离不是我在加班，你在家里

世界上最远的距离莫过于我就在你身边，而你却在玩手机，虽然只是一线之隔，却仿佛咫尺天涯

代码片段

.el-dropdown .el-dropdown__caret-button:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    top: 5px;
    bottom: 5px;
    left: 0;
    background: hsla(0,0%,100%,.5);
}

技巧解析

❝
分割线，怎么分割呢？
1.常规方法，边框border
2.添加div，宽度1px
3.before，height + margin
其实，高度不一定非得用height，使用定位position也是可以的
top为0，贴近上边界，bottom为0，贴近下边界，这样就有了父级100%的高度
❞

2 DropdownItem

事件传递

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

// ElDropdownItem
methods: {
  handleClick(e) {
    this.dispatch('ElDropdown', 'menu-item-click', [this.command, this]);
  }
}

// ElDropdown
handleMenuItemClick(command, instance) {
  if (this.hideOnClick) {
    this.visible = false;
  }
  this.$emit('command', command, instance);
},

技巧解析

❝
@command="handleCommand", 想到了啥？
子级的事件，让父级出发，这不正是事件代理么！
确实，事件代理就是这么玩的
然并卵，仔细看，并不是
子级的handleClick事件，派发给父级，父级再$emit一个command事件，虽然不是事件代理，却不必每个子级都触发@command

一群人做的事，一个人就能搞定!
❞

3 DropdownMenu

watch监听

你瞅啥？
还看
还看
嘤嘤嘤

watch: {
  visible(val) {
    this.broadcast('ElDropdownMenu', 'visible', val);
    this.$emit('visible-change', val);
  }
}

watch: {
  'dropdown.placement': {
    immediate: true,
    handler(val) {
      this.currentPlacement = val;
    }
  }
}

技巧解析

❝
好看吗，O(∩_∩)O哈哈~
提前先瞅一眼， immediate: true
要是情况不对，赶紧跑，this.$emit('visible-change', val)
所以，不要一直盯着看，watch还可以提前看一眼，也可以边看边做出反应

Vue中watch使用传送门
❞

「我一直禁不住地想要寻找」 「你在某处的笑容」

跟随Element学习Vue小技巧(41)——Dropdown

唯独在努力这一点上

我不想输给他

前言

1 Dropdown

分割线

代码片段

技巧解析

2 DropdownItem

事件传递

技巧解析

3 DropdownMenu

watch监听

技巧解析

参考链接

往期回顾