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

news2024/11/18 16:20:29

项目场景：

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

Naive UI 的官网中提到过这个实现方法，有一个render-label的api，即：选项标签渲染函数，
但是我个人感觉官网的写法比较晦涩难懂，下面我展示一下比较容易理解的写法

官网：[https://www.naiveui.com/zh-CN/os-theme/components/select#max-tag-count.vue]
例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)

解决方案：

1、vue代码

<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代码

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];
};