实现一个vue3组件库 - partial挑选

pid: 109362778

引言

当我们在实现某个组件需要获取到外部传入的slot的引用、或者希望slot是单个元素时,通常会包裹一层元素(比如div)通过给外层元素打上ref标记来间接获取,例如:

vue 复制代码
<template>
    <divider ref="container">
       <slot></slot>
    </divider>


</template>

缺点很明显,加了一层元素破坏了原本的html结构。

假设slot本身就是单个元素,比如在使用Popconfirm 气泡确认框 | Element Plus 时,就会默认使得reference slot是单个元素.

但是当我们传入多个元素时, ELPopconfirm也能在不添加外层div的情况下,实现效果:

xml 复制代码
<el-popconfirm title="Are you sure to delete this?">
 <template #reference>
  <el-button>Delete</el-button>
  <el-button>Delete</el-button>
 </template>
</el-popconfirm>

可以看到我们传入的reference元素时两个按钮,但是实际只渲染了第一个元素,也就是从传入的slot中挑选出了第一个元素作为reference

为此,我们可以尝试实现一个抽象组件partial来获取第一个元素。

实现思路

一个基本的抽象组件如下:

vue 复制代码
export default defineComponent({
    setup(props, context) {
       const slots = context.slots;
       
       //返回的是一个render函数用来代替template, 
       //h函数用来创建VNode
       return () => {
        return h('div',{}, [...slots.default()])
       }

    },

})

上面的代码将传入的slot套上一层div后返回.

slot.defalut是一个函数,他的返回值可以简单理解为根据你传入的模板而生成的VNode[], 因此我们需要做文章的地方也就是这个返回值了.

  • 通过slot.default获取到VNode[],并获取它的第一个VNode

    ts 复制代码
    let dft = slots.default && slots.default()[0];
  • 判断dft的type是否是SYmbol, 一些特殊的VNode节点(template, slot, txt ,comment)的type是symbol , 我们要做的就是排除template,slot,comment节点

    ini 复制代码
    // 排除template slot comment 节点
    while (typeof dft!.type === 'symbol') {
        // 文本节点
        if (dft!.type === Symbol.for('v-txt')){
           dft  = h('span',{},[dft]);
           break;
        }
        // 不允许第一个元素是注释节点
        if (dft!.type === Symbol.for('v-cmt')){
           dft  = h('div',{reason:'not allowed', result:'force replacement with div'});
           warn('The first child node of SPartial is a text (annotation) node, which is not allowed');
           break;
        }
        //如果是template slot节点的话,获取它的第一个孩子节点
        dft = (dft as any)!.children[0];
    
    }
  • 最后获取到第一个元素节点后返回即可

    ts 复制代码
    return () => {
        return h(dft as any, {...attr})
    }

完整逻辑

xml 复制代码
<script lang="ts">

import {defineComponent, h, useAttrs, warn} from "vue";

/**
 * @description 取default slot中的第一个非(template slot comment)的组件节点
 */
export default defineComponent({
    setup(__, context) {
       const slots = context.slots;
       const attr = useAttrs();
       let dft = slots.default && slots.default()[0];

       // 没传
       if (!dft) {
          warn('SPartial has empty slot');
       }


       // 排除template slot comment 节点
       while (typeof dft!.type === 'symbol') {
          // 文本节点
          if (dft!.type === Symbol.for('v-txt')){
             dft  = h('span',{},[dft]);
             break;
          }
          // 不允许第一个元素是注释节点
          if (dft!.type === Symbol.for('v-cmt')){
             dft  = h('div',{reason:'not allowed', result:'force replacement with div'});
             warn('The first child node of SPartial is a text (annotation) node, which is not allowed');
             break;
          }
          dft = (dft as any)!.children[0];

       }


       return () => {
          return h(dft as any, {...attr})
       }


    },
    name: 'SPartial',


})
</script>

最终效果

xml 复制代码
<SPartial>
    hello
    <s-button>hello world!</s-button>
</SPartial>
xml 复制代码
<SPartial>
    <template #default>
       <s-button>hello world!</s-button>
       <s-button>hello world!</s-button>
    </template>
</SPartial>
xml 复制代码
<SPartial>
    <!--      1111-->
    1
    <s-button>hello world!</s-button>
    <s-button>hello world!</s-button>
</SPartial>

写在最后

这里只是提供前言所述问题的一个解决方案, 代码可能不严谨和全面, 欢迎指出,一起掉头发(

这个项目的地址是:lastertd/sss-ui-plus: 适用于vue3的组件库 (github.com)在这里求一个star✨

感谢看到最后💟💟💟

相关推荐
程序猿John1 小时前
ES6 新增特性 箭头函数
前端·javascript·es6
百锦再2 小时前
五种常用的web加密算法
前端·算法·前端框架·web·加密·机密
@大迁世界2 小时前
彻底改变我 React 开发方式的组件模式
前端·javascript·react.js·前端框架·ecmascript
William Dawson3 小时前
【Vue 3 + Element Plus 实现产品标签的动态添加、删除与回显】
前端·javascript·vue.js
拉不动的猪3 小时前
项目基础搭建时的一些基本注意点
前端·javascript·面试
蕉君桑3 小时前
vue2使用vue-echarts
前端·vue.js·echarts
runnerdancer3 小时前
React+Vite+Typescript项目脚手架模版
前端
Code额4 小时前
ECMAScript 6 新特性(二)
前端·javascript·ecmascript
群联云防护小杜4 小时前
基于AI的Web应用防火墙(AppWall)实战:漏洞拦截与威胁情报集成
前端·分布式·安全·ddos
_清浅4 小时前
JavaScript(JS进阶)
开发语言·前端·javascript·操作系统·html5