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];
};
相关推荐
天天扭码15 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴17 分钟前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真17 分钟前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
sen_shan31 分钟前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
s91236010134 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
pyengine37 分钟前
基于pandoc的MarkDown格式与word相互转换小工具开发(pyqt5)
开发语言·python·qt·word
YuSun_WK43 分钟前
配置MambaIRv2: Attentive State Space Restoration的环境
开发语言·python
Nick_zcy44 分钟前
开发基于python的商品推荐系统,前端框架和后端框架的选择比较
开发语言·python·前端框架·flask·fastapi
淬渊阁1 小时前
Go package
java·开发语言
vvilkim1 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js