前段时间需要一个面包屑的组件,想着手动封装一下
大致思路就是使用到了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>
这样的是直接用的函数判断,进行的元素添加,就不用单选最后一个箭头的问题了