清新UI组件库——select组件开发思路

最新推荐文章于 2024-03-07 10:03:59 发布
最新推荐文章于 2024-03-07 10:03:59 发布
阅读量426 收藏
点赞数
分类专栏： UI组件开发 文章标签： vue组件开发 组件开发 ui组件设计 组件设计 select组件开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemisi/article/details/107059201
版权
本文探讨了在清新UI组件库iFresh-ui中开发select组件时遇到的问题，包括z-index的失效原因及解决方案，tabindex的处理，以及组件的展示逻辑。文章还提到了.sync语法糖在子组件向父组件传递参数中的应用。
摘要由CSDN通过智能技术生成

清新组件库：http://ifresh-ui.yating.online/

源码地址：https://github.com/Chenyating/iFresh-ui
在这里插入图片描述

select组件遇到的问题

思路：单选跟多选，就是radio跟checkbox的结合体；

条件判断，是否可以多选。

z-index

失效的原因：

  1. 父级元素position可能是relative，或者是没有position；
  2. 元素存在float属性

解决办法：

  1. position设置部位relative
  2. 去掉float，清除浮动，浮动元素设置position；
  3. overflow设置为auto；

tabindex

按tab建的时候顺序触发,可以有blur事件跟focus事件；

展示

  1. 显示项目（已经选中的框）（框）
  2. 下拉列表项目（已选中项的状态）
最低0.47元/天 解锁文章
明月别枝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GrowingIO Design 组件库搭建之Select组件
GrowingIO 基于 BitMap 的海量数据分析
07-05 508
前言 Select 是最频繁使用的UI组件之一，它可以运用在很多场景。大多数情况下，原生HTML的<Select>标签无法满足业务的功能过需求，以及原生HTML的<Select>标签在各个浏览器版本里样式表现不太一样。在这样的情况下，多数人都会选择实现一个符合UI要求以及产品功能需求的Select组件，或者选择使用一些开源组件库提供的 Select 组件。本文主要梳理了 gio-design 中的Select组件在实现过程中遇到的一些阻碍及需要注意的地方，希望能对大家在设计和实现s
最好用的 5 个 Vue select 单选多选下拉组件 - 卡拉云
蒋川@卡拉云
02-26 1万+
单选 / 下拉 / 多选（select）组件在搭建 Vue 的 app 中特别常用，Vue select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 5 款 Vue select 组件，每一款都经过我实际测试，推荐给大家。
bootstrap-select组件
热门推荐
cjnba的专栏
10-13 1万+
阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例 1、基础示例 2、其他效果示例 3、组件取值赋值 4、组件其他用法 5、组件封装 四、源码下载 五、总结 正文 前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap multiselect组件大比拼 和JS组件系列——Bootstrap Select2组件使用小结，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种...
select下拉框组件
weixin_44207118的博客
11-11 1405
发现vant-uI是没有select下拉框多选框的所以自己写了一个组件。话不多说上代码。加## 标题粗样式 这是select组件 <template> <div > <div class="selectInput"> <div class="title" @click.stop="liShow"> <input class="icon1" type="text" disabled placeholder=
vue3组件篇 Select
秋来九月八
02-21 4492
弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
Vue3选择器（Select）
Mr Dear的博客
03-31 1万+
下拉选择器组件，支持禁用、禁用选项、清除、搜索、自定义过滤函数、自定义选项字段名、自定义下拉面板数、自定义下拉面板滚动条、自定义样式等。总之，功能丰富，简单易用😁😁
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
又一款MVVM组件 构建自己的Vue组件（2）
01-19
前言：转眼距离上篇JS组件系列——又...随便点进去看了几个UI组件，基本都不是原生的html用法，如果你不懂Vue的组件相关概念，看到一些“稀奇古怪”的标签写法，可能会使用，但肯定无法理解为什么可以这么写。比如我们
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D ...通过理解并熟练运用canvas绘图原理，开发者可以创建出各种复杂且动态的UI组件，提升小程序的用户体验。
JS组件系列之MVVM组件构建自己的Vue组件
01-19
正文 前言：转眼距离上篇 JS组件系列——又一款MVVM...随便点进去看了几个UI组件，基本都不是原生的html用法，如果你不懂Vue的组件相关概念，看到一些“稀奇古怪”的标签写法，可能会使用，但肯定无法理解为什么可以这
基于elementui的数据驱动表单组件
08-12
它提供了丰富的组件库，使得构建用户界面变得更加高效和便捷。本篇将深入探讨"基于elementui的数据驱动表单组件"这一主题，以及如何在实际项目中应用。 数据驱动表单是现代前端开发中的一个重要概念，它强调通过...
select组件
weixin_30727835的博客
09-06 99
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8...
ElementUI select组件实现全选
txf666的博客
10-19 3475
ElementUI select组件实现全选 效果图： <el-form-item label="发薪部门"> <el-select size="medium" filterable v-model="downloadParam.orgName" clearable collapse-tags multiple placeholder="请选择发薪部门"
el-select 下拉框全选、多选的几种方式组件
IT博客技术分享
09-19 5393
由于添加了：collapse-tags 属性后，全选选中的时候，正常会默认选中第一个label的值显示，后面是 + 全部数量 -1 . 我们可以在初始化的时候，把默认选中的数组里面最前面添加一项“全选”2. 用selectArr的变量存一下， value的数组 过滤出不含 全选的，剩余全部数据。1. 先用arr1的变量存一下，把下拉框的数组 过滤出不含 全选的，剩余全部数据。：判断如果是全选就在最前面 添加1项 value 值 ‘全选’直接添加一个【全选】复选框，实现的功能跟方法一是一样的。
vue3 select 组件
NEWonclick的博客
10-18 727
手写vue3 select组件
论如何实现一个完美的Select组件
weixin_33924312的博客
05-21 695
前言 下拉列表组件Select可以是前端使用频率最高的UI组件之一。正因此，原生HTML也存在这一标签。但由于对UI的较高追求及统一规范，我们往往不会去使用即不好看又不统一的原生Select标签，而是自己实现。能够写出一个“多数场景下能用”的Select组件，并没有什么难度。直到遇到一些特殊的场景，才意识到要想完成一个组件库级别的作品，并非易事。本文将会阐述在实际生产环境中因为遇到的问题，并分享A...
Vue2+ElementUI下拉、Select组件的封装
最新发布
qq_43657722的博客
03-07 3127
在 Vue2 项目中，ElementUI 的 `el-select` 组件是常用的下拉选择框组件。它提供了丰富的功能和样式，可以满足各种需求。但是，在实际开发中，我们经常会遇到一些重复性的需求
Concis组件库封装——Select选择器
量子前端的博客
04-13 1430
选择器组件，文档如下： 组件封装代码如下： import React, { FC, useMemo, createRef, useEffect, useState, useCallback, memo } from 'react'; import { DownOutlined, LoadingOutlined, CloseOutlined } from '@ant-design/icons'; import style from './index.module.less'; interface Op
Android开发1：基本UI界面设计——布局和组件
05-31
好的，Android开发中的UI界面设计主要包括布局和组件两个方面。 布局：Android中常用的布局有线性布局（LinearLayout）、相对布局（RelativeLayout）、帧布局（FrameLayout）等。其中，线性布局按照一个方向（水平...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值