Naive UI 选择器 Select 的:render-label 怎么使用(Vue3 + TS)

项目场景:

在Naive UI 的 选择器 Select组件中 ,如何实现下面的效果 ,在下拉列表中,左边展示色块,右边展示文字。

Naive UI 的官网中提到过这个实现方法,有一个render-label的api,即: 选项标签渲染函数,

但是我个人感觉官网的写法比较晦涩难懂,下面我展示一下比较容易理解的写法

官网:[https://www.naiveui.com/zh-CN/os-theme/components/select#max-tag-count.vue\]

解决方案:

1、vue代码

typescript 复制代码
<template>

 <n-select class="flex-1" :to="false" clearable filterable v-model:value="rank" :options="ranks" 
 label-field="name" value-field="name" placeholder="等级选择" :render-label="renderLabel">
 </n-select>
 
</template>

2、js代码

typescript 复制代码
import { NSelect, type SelectOption } from 'naive-ui';//引入模块

const rank = ref<string | null>()
const ranks = ref<any[]>([
		 {name: 'AA', color: '#2892C6'},
		 {name: 'BB', color: '#8DB8A4'},
		 {name: 'CC', color: '#D7E37D'},
		 {name: 'DD', color: '#FCCF50'}
		 ])
/**
* renderLabel函数 
*/

//定义了一个名为 renderLabel 的常量函数,
//该函数接受一个类型为 SelectOption 的参数 option。
//SelectOption 类型应该是一个接口或类型别名,定义了选项对象的结构。
//函数返回一个 VNodeChild 类型的值,这是 Vue 中用来表示虚拟节点(VNode)的类型。
const renderLabel = (option: SelectOption): VNodeChild => {
//在函数内部,首先检查 option 对象的 type 属性是否等于字符串 'group'。如果是,那么函数会返回一个虚拟节点,该节点是一个 <span> 元素,其文本内容是 option.name 属性值后跟字符串 (Cool!)。
//这一步的目的是为了处理特定类型的选项,即当选项的类型是 'group' 时,执行特定的渲染逻辑。
    if (option.type === 'group') {
        return h('span', `${option.name}(Cool!)`);
    }
  // //这里就是我们创建的色块 用来显示色块的 ,你可以使用 h 函数来创建虚拟节点
  //如果 option 不是分组类型,函数会创建一个名为 colorBlock 的虚拟节点,这是一个 <span> 元素,
  //用于显示颜色块。h 函数是 Vue 提供的用于创建虚拟节点的函数。
  //这个 <span> 元素有一个类名 color-block 和一系列内联样式,包括背景颜色 backgroundColor,它是从 option.color 属性获取的。
    const colorBlock = h('span', {
        class: 'color-block',
        style: {
            backgroundColor: option.color,
            display: 'inline-block',
            width: '16px',
            height: '16px',
            lineHeight: '16px',
            marginRight: '8px',
            verticalAlign: 'middle'
        }
    });
    //这里就是我们创建的文本标签 用来显示文字的
    //接下来,创建一个名为 name 的虚拟节点,它也是一个 <span> 元素,用于显示选项的名称。这里使用类型断言 as string 来确保 option.name 是一个字符串类型,
    //这里as string 来确保 option.name 是一个字符串类型的原因主要是在某些情况下,即使变量实际上是字符串类型,TypeScript 编译器可能也无法推断出正确的类型。这可能是因为类型推断的逻辑不够复杂,无法处理特定的代码模式,其次是避免运行时错误 
    const name = h('span', option.name as string);
    // 返回包含颜色块和标签的数组
    return [colorBlock, name];
};
相关推荐
吴永琦(桂林电子科技大学)34 分钟前
HTML5
前端·html·html5
落榜程序员36 分钟前
Java 基础-32-枚举-枚举的应用场景
java·开发语言
爱因斯坦乐37 分钟前
【HTML】纯前端网页小游戏-戳破彩泡
前端·javascript·html
晓131341 分钟前
第九章Python语言高阶加强-面向对象篇
java·开发语言
2301_7760452342 分钟前
什么是异步?
开发语言·区块链
恋猫de小郭42 分钟前
注意,暂时不要升级 MacOS ,Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝
android·前端·flutter
还是鼠鼠2 小时前
Node.js自定义中间件
javascript·vscode·中间件·node.js·json·express
大莲芒5 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
xy_optics5 小时前
用matlab探索卷积神经网络(Convolutional Neural Networks)-3
开发语言·matlab·cnn
独好紫罗兰5 小时前
洛谷题单3-P1720 月落乌啼算钱(斐波那契数列)-python-流程图重构
开发语言·算法·leetcode