vue3 render函数，手搓面包屑

前段时间需要一个面包屑的组件，想着手动封装一下

大致思路就是使用到了solt,封装为类似于elment那种面包屑的组件，但是需要比较灵活的
首先是需要有两个组件来完成，一个bread和bread-item

bread组件

<template>
  <div class='bread'>
    <slot />   //这里插槽插入bread-item内容
  </div>
</template>

<script>
export default {
  name: 'Bread'
}
</script>
<!-- 去掉scoped全局作用 -->
<style lang='less'>

bread-item组件

<template>
  <div class="bread-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>//判断有没有传入跳转链接
    <span v-else><slot /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</template>
<script>
export default {
  name: 'BreadItem',
  props: {
    to: {
      type: [String, Object]
    }
  }
}
</script>

这样封装号以后注册组件就可以直接使用了

  <Bread>
        <BreadItem to="/">首页</BreadItem>
        <BreadItem to="/category/1005000">电器</BreadItem>
        <BreadItem >空调</BreadItem>
    </Bread>
    //传入to跳转连接进行跳转，不传入的话只做展示

出来的效果时这样的，但是我需要的时最后一个没有箭头的，可以使用css进行隐藏，但是感觉效果不是特别好，而且elment里也不是这样做的，就想到了直接使用render函数，虚拟dom进行实现

<script>
import { h } from "vue";
export default {
  name: "Bread",
  render() {
    // 用法
    // 1. template 标签去除，单文件组件
    // 2. 返回值就是组件内容
    // 3. vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
    // render:h=>{
    //   return ''
    // }
    // 4. h 第一个参数 标签名字  第二个参数 标签属性对象  第三个参数 子节点
    // 需求
    // 1. 创建bread父容器
    // 2. 获取默认插槽内容
    // 3. 去除bread-item组件的i标签，因该由render函数来组织
    // 4. 遍历插槽中的item，得到一个动态创建的节点，最后一个item不加i标签
    // 5. 把动态创建的节点渲染再xtx-bread标签中
    // 这个是获取到插槽内的dom
    const items = this.$slots.default();
    // console.log(items);
    const dymanicItems = [];
    items.forEach((item, i) => {
      dymanicItems.push(item);
      if (i < items.length - 1) {
        dymanicItems.push(h("i", { class: "iconfont icon-angle-right" }));
      }
    });
    return h("div", { class: "xtx-bread" }, dymanicItems);
  },
};
</script>

这样的是直接用的函数判断，进行的元素添加，就不用单选最后一个箭头的问题了

vue3 render函数，手搓面包屑

猜你喜欢