Encapsulate this effect

You need to prepare two.vue files, both of which need to be registered globally

1.bread.vue

<script> // import { h } from 'vue' export default { name: 'XtxBread', Const slotContent = this.$slots.default().filter(item =>) {// Vue3 h = // slotContent = this.$slots.default().filter(item =>) item.type.name === 'XtxBreadItem') const children = [] slotContent.forEach((item, I) => {console.log(item.type.name) // Add a single breadcrumb component children.push(item) if (I < slotContent.length-1) {// // const iTag = h(' I ', {class: 'iconfont icon-angle-right' }, null) // children.push(iTag) children.push(<i className="iconfont icon-angle-right"></i>) } }) // return h('div', { class: Return <div className="xtx-bread">{children}</div>}} Hello </div> // const MSG = 'ABC' // const info = (// <div> // <div) className='active'>hello</div> // <div>{msg}</div> // </div> // ) // function foo (tag) { // return ( // <div> // <div>{tag}</div> // <div>tom</div> // </div> // ) // } // const tag = foo(<div>hi</div>) /** * <div> <div><div>hi</div></div> <div>tom</div> </div> */ </script> <style scoped lang="less"> .xtx-bread { display: flex; padding: 25px 10px; :deep(&-item) { a { color: #666; The transition: all 0.4 s; &:hover { color: @xtxColor; } } } :deep(i) { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; } } </style>Copy the code

2.bread-item.vue

<template> <div class="xtx-bread-item"> <RouterLink v-if="to" :to="to"> <! - click jump - > < slot / > < / RouterLink > < span v - else > <! -- can't jump --> <slot /> </span> <! -- <i class="iconfont icon-angle-right"></i> --> </div> </template> <script> export default { name: 'XtxBreadItem', props: {to: {// to can be a String or an Object type: [String, Object]}}} </script>Copy the code

3. Global registration based on Vue3

// Extend vue's original functionality: global components, custom directives, mount prototype methods, note: no global filters. // Vue3.0 plugin: export an object, install function, pass in the default Vue constructor, Vue base extension // vue3.0 plugin: Export an object with the install function, which passes in the app instance by default, Import XtxSkeleton from './skeleton.vue' import XtxCarousel from './carousel.vue' import XtxMore from './more.vue' + import XtxBread from './bread.vue' + import XtxBreadItem from './bread-item.vue' import defaultImg from '@/assets/images/200. PNG 'const defineDirective = app => {// app.directive('lazyload', {mounted(el, binding) { const observer = new IntersectionObserver( ([{ isIntersecting }]) => { if (isIntersecting) { observer.unobserve(el) el.onerror = () => { el.src = defaultImg } el.src = binding.value } }, { threshold: 0.01}) observer.observe(el)}})} export default {install(app) { App provides component / / if you want to mount the directive function prototype app. Config. GlobalProperties way app.com ponent (XtxSkeleton. The name, XtxSkeleton) app.component(XtxCarousel.name, XtxCarousel) app.component(XtxMore.name, XtxMore) + app.component(XtxBread.name, XtxBread) + app.component(XtxBreadItem.name, XtxBreadItem) defineDirective(app) } }Copy the code

4. Use in components:

<XtxBreadItem > <XtxBreadItem ="/category/1005000"> <XtxBreadItem> </XtxBread>Copy the code