跟随Element学习Vue小技巧(37)——NavMenu

七秒记忆的鱼
1,482 阅读8分钟
❝

如果全世界都背叛了你

那我背叛世界来陪你

❞

前言

朋友龙龙是肛肠科的医生，前几天约着一起出来吃饭。
点餐的时候，发现服务员在挠自己的屁股，可能是职业病犯了。
龙龙关切的问到, "有痔疮吗？"
服务员尴尬的说了句，"可不可以点我们菜单上有的？？" 看吧，菜单还是挺重要的，菜单上没有的，不要乱点，要是不小心越权了，又得吉吉国王背锅！

1 Menu

组件规划

你的人生有过规划吗？
还是脚踩西瓜皮，滑到哪算哪？
如果，当时...，我也不至于...
可残酷的的是，没有如果
所以，做任何事之前，做好还是规划一下
BUG太多，必定是项目烂尾了，项目烂尾了一部分原因是组件没有规划好
那么，组件到底该如何规划呢？
一起看看别人家的孩子是怎么做的吧 ^^

代码片段

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

技巧解析

❝

整个菜单，咋一看无非是ul>li的列表
一层不够，大不了递归呗
所以，原则上一个组件是可以搞定的
可我们使用的时候，并不是一个，而是好几个组件，el-menu,el-submenu,el-menu-item-group,el-menu-item
为什么要搞这么多呢？
我想，你一定搭过积木，或者玩过拼图
规划好几个组件，好处是可以自由组合，甚至可以在中间穿插
还记得表单吗？里面可以穿插表格
提升，我想不只是多看多写，多吸收也是很重要的

❞

函数式组件

要是有这样一种生活：
肚子饿子，饭就做好了端过来
天冷了，小火炉就在边上供暖了
无聊了，开黑的兄弟立刻上线了
玩累了，往后一躺就睡着了
...

是不是很爽，啥都不用做，啥都不缺 这辈子打工是注定了，只能等下辈子咯 ╮(╯▽╰)╭ ╮(╯▽╰)╭
虽然生活没有爽歪歪，玩玩组件，也是可以爽歪歪滴

代码片段

components: {
  'el-menu-collapse-transition': {
    functional: true,
    render(createElement, context) {
      const data = {
        props: {
          mode: 'out-in'
        },
        on: {
          ...
        }
      };
      return createElement('transition', data, context.children);
    }
  }
},

技巧解析

❝

函数式组件，顾名思义提供函数，提供数据，提供组件想要的一切
那组件呢？
只管享受呗，O(∩_∩)O哈哈~
你看，函数式组件，给你提供了满满的一个data大礼包
怎么用呢？
想怎么用就怎么用啊，data数据可以用来渲染，function方法可以用来执行，event事件可以用绑定
什么？你还是不太懂？？
别怕，传送门早已为你准备好

函数式组件 传送门
函数式组件在Vue.js中的运用 传送门

❞

2.Submenu

混合扩展

地球上的赛亚人，是低等赛亚人？
看我变身吊打你
什么，超级赛亚人被碾压？
看我，超二，超三
好像在布欧眼里还是不够看 ￣□￣｜｜
没事，不是还有合体技能吗?
贝吉特，闪亮登场，大家欢迎 

import Popper from 'element-ui/src/utils/vue-popper';

const poperMixins = {
  props: {
    transformOrigin: {
      type: [Boolean, String],
      default: false
    },
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    popperOptions: Popper.props.popperOptions
  },
  data: Popper.data,
  methods: Popper.methods,
  beforeDestroy: Popper.beforeDestroy,
  deactivated: Popper.deactivated
};

export default {
  name: 'ElSubmenu',
  componentName: 'ElSubmenu',
  mixins: [menuMixin, Emitter, poperMixins],
  ...
}

技巧解析

❝

混合是不是已经很厉害了，拿别人的嫁衣结自己的婚
可是我不想全盘接收呀
也没关系，重新做嫁衣不就好了
瞧，沿用之前的data，methods...
props呢,也沿用，不用只用部分，而且自己在加上一部分，即transformOrigin
感觉很厉害的亚子

❞

3.小工具

颜色转换

/*
* @{desc} HSL模式转换为rgb模式
* @{params} color:String #fff | #ffffff
* @{example} 
  getColorChannels('#fff') 
  =>{red: 255,green:255,blue:255}
*/
getColorChannels(color) {
  color = color.replace('#', '');
  if (/^[0-9a-fA-F]{3}$/.test(color)) {
    color = color.split('');
    for (let i = 2; i >= 0; i--) {
      color.splice(i, 0, color[i]);
    }
    color = color.join('');
  }
  if (/^[0-9a-fA-F]{6}$/.test(color)) {
    return {
      red: parseInt(color.slice(0, 2), 16),
      green: parseInt(color.slice(2, 4), 16),
      blue: parseInt(color.slice(4, 6), 16)
    };
  } else {
    return {
      red: 255,
      green: 255,
      blue: 255
    };
  }
}

颜色混合

/*
* @{desc} 颜色加深或减淡
* @{params} 
    color:String #fff | #ffffff
    percent:Number 0.2 | -0.2
* @{example}
  // 加深
  mixColor('#fff', 0.2) 
  =>rgb(255 * 0.8, 204, 204)
*/
mixColor(color, percent) {
  let { red, green, blue } = this.getColorChannels(color);
  if (percent > 0) { // shade given color
    red *= 1 - percent;
    green *= 1 - percent;
    blue *= 1 - percent;
  } else { // tint given color
    red += (255 - red) * percent;
    green += (255 - green) * percent;
    blue += (255 - blue) * percent;
  }
  return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
},



「总有一天」 「你会遇到一个彩虹般绚烂的人」

参考链接

往期回顾

avatar
文章
阅读
粉丝