Code Monkey home page Code Monkey logo

tdesign-vue-next's Introduction

TDesign Logo

License Version Downloads

English | 简体中文

TDesign Vue Next is a UI component library for Vue 3 and desktop application.

🎉 Features

  • Desktop application interaction
  • High quality UI components for Vue 3.x
  • Consistent API and UI with TDesign component libraries for other frameworks
  • Dark mode and customizable theme
  • Support tree-shaking

📦 Installation

npm i tdesign-vue-next

🔨 Usage

import { createApp } from 'vue';
import { Button } from 'tdesign-vue-next';

import 'tdesign-vue-next/es/style/index.css';

import App from './app.vue';

const app = createApp(App);
app.use(Button);

The package of tdesign-vue-next provides kinds of bundles, read the documentation for the detail of differences between bundles.

Quick Start

Visit TDesign Starter to experience in the application built with TDesign Vue Next UI components.

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge >=84 Firefox >=83 Chrome >=84 Safari >=14.1

Read our browser compatibility for more details.

TDesign component libraries

TDesign also provides component libraries for other platforms and frameworks.

Contributing

Contributing is welcome. Read guidelines for contributing before submitting your Pull Request.

Contributors

Feedback

Create your Github issues or scan the QR code below to join our user groups

License

The MIT License. Please see the license file for more information.

tdesign-vue-next's People

Contributors

94dreamer avatar asbstty avatar btea avatar chaishi avatar chrislee0211 avatar dellyoung avatar geff1991 avatar gnauhca avatar honkinglin avatar k1nz avatar ladychatterleylover avatar leejim avatar liangyongxian avatar liweijie0812 avatar pengyyyyy avatar pstiu avatar qinmudi avatar qunbotop avatar realyuyanan avatar red626 avatar ruio9244 avatar s-mohan avatar sinbadmaster avatar tabspace avatar uyarn avatar vnues avatar xiaosansiji avatar yeshanshan avatar zack921 avatar zhangpaopao0609 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tdesign-vue-next's Issues

Drawer 默认的确认按钮无效

image
image

绑定了onConfirm属性, 点击时无效.
另外, 同时绑定属性onConfirm和事件confirmd会导致vue的警告
image
此二api是否重复.

使用自定义的按钮可以正常使用, 如图打印出了confirm.
image

🎉 Composition Api 重构计划

说明

  1. 使用 Composition Api 语法重构,文件类型依然使用 tsx
  2. 参与贡献请在此 issue 中评论领取的组件
  3. 重构时的思考,避免 optionsAPI 照搬 compositionAPI
  4. 重构前联系管理员先进行一轮组件的 review

开发规范

https://github.com/Tencent/tdesign-vue-next/wiki/TDesign--CompositionAPI-%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83

基础Hook:

  • useConfig:全局配置 hook@PengYYYYY
  • useEmitEvent: @vnues #177 (不推荐,事件参数类型不明确,建议直接使用 props.onXXX)
  • useDefault: 用于实现 v-model,内置受控和非受控处理。 @chaishi
  • useVModel: 用于实现 v-model:xxx,内置受控和非受控处理。 @chaishi
  • useTNode: 用于在 setup 组合 TNoderender 函数渲染 TNode 请使用 renderTNodeJSX@PengYYYYY
  • useChildComponentSlots:渲染 default slot,获取子组件 VNode。处理多种子组件创建场景。
  • useIcon: 多种icon的render方式 @vnues
  • useVirtualScroll @Louiszhai

组件

全局组件

基础

  • button - @amadeus711 #106

布局

导航

输入

数据展示

消息提醒

[Bug][Table]已设置每列宽度,当父容器变宽后标题和内容页错位

Describe Environment

browser version:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62
tdesign-vue-next version:0.6.0

Describe the bug

image
table已设置每列宽度,当父容器变宽后标题和内容页错位
设置height属性后才会出现该问题

Popconfirm点击确认后位置变动

Describe Environment
browser version:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62
tdesign-vue-next version:0.6.0

Describe the bug

e5edu-solml

浏览器出现滚动条后,拖到最下面点击Popconfirm确认键后位置变动

table表格 最小宽度问题

1.table表格设置了最小宽度时,挤压到最小会按照最小宽度平均值设置
例如 :1.有2列设置了minWidth 分别为100 和 200 挤压到最小,这两列默认的最小宽度都会置为(100+200)/2 .
2.有2列,1列设置了minWidth为100,另外一列自适应,这两列默认的最小宽度都会置为(100+0)/2 .

2.table表格是不是必须要设置一个固定列,才能去进行滚动,感觉蛮奇怪的。

一些建议

我有一些想法,想提 pr ,但是 fork 只有遇到了些项目问题,有可以讨论的群吗

inputNumber会有遮挡

Describe Framework

  • tdesign-vue
  • tdesign-vue-next
  • tdesign-react
  • tdesign-miniprogram

Describe Environment
chrome 96.0.4664.110
Describe the bug
数字长一点的时候,就会有数字遮挡,inputNumber的demo里可以复现

image
image
image

我打开控制台看了一下,是这个css造成的

image

[Improve][Tree] 树能支持拖动吗

tdesign-vue-next

You will open an feature issue at tdesign-vue-next

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Improve][table] 表格能添加那种和tree结合形式么

tdesign-vue-next

You will open an feature issue at tdesign-vue-next

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

关于本地dev的问题

  • 样式链接问题
  • vite依赖不存在 等

我不知道是我个人的问题, 还是项目搭建的不够严谨, 或者官方可以给出一份相应的如何参与贡献地文档

我觉的 fork 后
直接 yarn / pnpm install / npm install
然后运行相应的命令(如 npm run start )就可以启动项目, 才是一种让人愉悦的体验

tree 有修改名称的api或者设计吗

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

0.5.0 升级至 0.6.0 版本 CSS BEM 规范改动列表

由于历史原因,之前的 CSS 类名没有很好地规范,为了以后可以更好更规范地推进,在 0.6.0 的版本中,我们把之前很多不规范的 CSS类名都进行了改动,具体改动如列表所示:

表格组件

组件 原类名 新类名
Table table-body t-table__body
Table align-center t-align-center
Table align-left t-align-left
Table align-right t-align-right
Table text-ellipsis t-text-ellipsis
Table t-table-pagination t-table__pagination
Table t-table-sort-icon t-table__sort-icon
Table t-table-double-icons t-table__double-icons
Table t-table-sort-icon-active t-table__sort-icon--active
Table t-table-expand-box t-table__expand-box
Table t-table-sort-icon-active t-table__sort-icon--active
Table t-table-content t-table__content
Table t-table-expandable-icon-cell t-table__expandable-icon-cell
Table t-table--empty t-table__empty
Table t-table-valign__top t-table--align-top
Table t-table--loading-async t-table__async-loading
Table t-table--loading-status-loading t-is-loading
Table t-table--loading-status-load-more t-is-load-more
Table t-table-filter-icon t-table__filter-icon
Table t-table-filter-pop t-table__filter-pop
Table t-table-filter-pop-content t-table__filter-pop-content
Table t-table-filter-pop-content__inner t-table__filter-pop-content-inner
Table t-table-content--scrollable-to-left t-table__content--scrollable-to-left
Table t-table-content--scrollable-to-right t-table__content--scrollable-to-right
Table t-table-expanded-cell t-table__expanded-cell

Menu 组件

组件 原类名 新类名
MenuGroup t-menu-group-title t-menu-group__title

Dropdown组件

组件 原类名 新类名
Dropdown 组件 t-dropdown__menu__column t-dropdown__menu-column
Dropdown 组件 t-dropdown__item__content t-dropdown__item-content
Dropdown 组件 t-dropdown__item__content_text t-dropdown__item-text
Dropdown 组件 has-suffix t-dropdown--suffix
Dropdown 组件 children-suffix t-dropdown__item-icon

Divider组件

组件 原类名 新类名
Divider 组件 t-divider-inner-text t-divider__inner-text

Drawer组件

组件 原类名 新类名
Drawer 组件 t-drawer-attach t-drawer--attach
Drawer 组件 t-drawer-left t-drawer--left
Drawer 组件 t-drawer-right t-drawer--right
Drawer 组件 t-drawer-top t-drawer--top
Drawer 组件 t-drawer-bottom t-drawer--bottom
Drawer 组件 t-drawer-open t-drawer--open
Drawer 组件 t-drawer-no-mask t-drawer--without-mask
Drawer 组件 t-drawer-confirm t-drawer__confirm
Drawer 组件 t-drawer-cancel t-drawer__cancel
组件 原类名 新类名
Pagination t-pagiantion__btn--prev t-pagiantion__btn-prev
Pagination t-pagiantion__btn--next t-pagiantion__btn-next

Dialog 组件

组件 原类名 新类名
Dialog t-dialog-ctx t-dialog__ctx
Dialog t-dialog-ctx--fixed t-dialog__ctx--fixed
Dialog t-not-visable t-is-hidden
Dialog t-dialog-mask t-dialog__mask
Dialog t-dialog-mask--hidden t-is-hidden
Dialog t-dialog-confirm t-dialog__confirm
Dialog t-dialog-cancel t-dialog__cancel

Message

组件 原类名 新类名
Message t-message-close t-message__close
Message t-message-list t-message__list

Notification

组件 原类名 新类名
Notification t-notification__detail--item t-notification__detail-item

Anchor组件

组件 原类名 新类名
Anchor 组件 t-anchor_line t-anchor__line
Anchor 组件 t-anchor-item t-anchor__item
Anchor 组件 t-anchor-item_link t-anchor__item-link
Anchor 组件 t-anchor-target t-anchor__target
Anchor 组件 cursor-wrapper t-anchor__line-cursor-wrapper
Anchor 组件 cursor t-anchor__line-cursor
Anchor 组件 t-copy t-anchor__copy

Slider组件

组件 原类名 新类名
Slider 组件 t-slider-contianer t-slider__container
Slider 组件 t-slider-input-container t-slider__input-container
Slider 组件 center-line t-slider__center-line
Slider 组件 t-slide-vertical t-slide--vertical

Form 组件

组件 原类名 新类名
Form 组件 t-form__controls--content t-form__controls-content

Badge

组件 原类名 新类名
Badge 组件 t-badge-static t-badge--static

List

组件 原类名 新类名
List t-list-items t-list__inner

Cascader 组件

组件 原类名 新类名
Cascader 组件 t-cascader-placeholder t-cascader__placeholder
Cascader 组件 t-cascader-content t-cascader__content
Cascader 组件 t-cascader-is-multiple t-cascader--multiple
Cascader 组件 t-cascader-dropdown t-cascader__dropdown
Cascader 组件 t-cascader-panel t-cascader__panel
Cascader 组件 t-cascader-menu t-cascader__menu
Cascader 组件 t-cascader-item t-cascader__item
Cascader 组件 t-cascader-item--highlight t-cascader__item--highlight
Cascader 组件 t-cascader-item-have-icon t-cascader__item--with-icon
Cascader 组件 t-cascader-item-is-leaf t-cascader__item--leaf
Cascader 组件 t-cascader-item__label t-cascader__item-label
Cascader 组件 t-cascader-item__label--filter t-cascader__item-label--filter
Cascader 组件 t-cascader-item__is-empty t-cascader__empty
Cascader 组件 t-cascader-menu__seperator t-cascader__menu-seperator
Cascader 组件 t-cascader-menu__filter t-cascader__menu-filter
Cascader 组件 t-cascader-search-input t-cascader__search-input
Cascader 组件 t-cascader-icon t-cascader__icon
Cascader 组件 t-cascader-item-icon t-cascader__item-icon
Cascader 组件 t-cascader-panel t-cascader__panel

Calendar组件

组件 原类名 新类名
Calendar 组件 t-is-now t-calendar__table-body-cell--now
Calendar 组件 t-calendar__table-body-cell-value t-calendar__table-body-cell-display

DatePicker 组件

组件 原类名 新类名
DatePicker t-date-picker-popup-reference t-date-picker__popup-reference
DatePicker t-date-picker--container t-date-picker__container
DatePicker t-date-picker--panels t-date-picker__panels
DatePicker t-date-picker-header t-date-picker__header
DatePicker t-date-picker-header-title t-date-picker__header-title
DatePicker t-date-header__btn t-date-picker__header-btn
DatePicker t-date-picker-header-controller t-date-picker__header-controller
DatePicker t-date-cell__wrapper t-date-picker__cell-wrapper
DatePicker t-date-picker-year t-date-picker--year
DatePicker t-date-picker-month t-date-picker--month
DatePicker t-date-picker-date t-date-picker--date
DatePicker t-date-picker-range t-date-picker--range
DatePicker t-date-cell__text t-date-picker__cell-text
DatePicker t-date-picker-presets t-date-picker__presets
DatePicker t-date t-date-picker__panel
DatePicker t-date-cell--now t-date-picker__cell--now
DatePicker t-date-cell--active t-date-picker__cell--active
DatePicker t-date-cell--disabled t-date-picker__cell--disabled
DatePicker t-date-cell--highlight t-date-picker__cell--highlight
DatePicker t-date-cell--active-start t-date-picker__cell--active-start
DatePicker t-date-cell--active-end t-date-picker__cell--active-end
DatePicker t-date-cell--additional t-date-picker__cell--additional
DatePicker t-date-cell--first-day-of-month t-date-picker__cell--first-day-of-month
DatePicker t-date-cell--last-day-of-month t-date-picker__cell--last-day-of-month

Grid 组件

组件 原类名 新类名
Grid t-row-start r-row--start
Grid t-row-center r-row--center
Grid t-row-end r-row--end
Grid t-row-space-between t-row--space-between
Grid t-row-space-around t-row--space-around
Grid t-row-top t-row--top
Grid t-row-middle t-row--middle
Grid t-row-bottom t-row--bottom

Layout

组件 原类名 新类名
Layout t-layout-has-sider t-layout--with-sider
Layout t-layout--header t-layout__header
Layout t-layout--content t-layout__content
Layout t-layout--sider t-layout__sider
Layout t-layout--footer t-layout__footer

Popup

组件 原类名 新类名
Popup t-popup-content t-popup__content
Popup t-popup-reference t-popup__reference
Popup t-popup_animation-enter t-popup--animation-enter
Popup t-popup_animation-enter-from t-popup--animation-enter-from
Popup t-popup_animation-exiting t-popup--animation-exiting
Popup t-popup_animation-leave-to t-popup--animation-leave-to
Popup t-popup_animation-enter-to t-popup--animation-enter-to
Popup t-popup_animation-entering t-popup--animation-entering
Popup t-popup_animation-leave-from t-popup--animation-leave-from
Popup t-popup_animation-leave t-popup--animation-leave
Popup t-popup_animation-enter-active t-popup--animation-enter-active
Popup t-popup_animation-leave-active t-popup--animation-leave-active

Tooltip

组件 原类名 新类名
Tooltip t-tooltip-light t-tooltip--light
Tooltip t-tooltip-default t-tooltip--default
Tooltip t-tooltip-primary t-tooltip--primary
Tooltip t-tooltip-success t-tooltip--success
Tooltip t-tooltip-danger t-tooltip--danger
Tooltip t-tooltip-warning t-tooltip--warning

Popup

组件 原类名 新类名
Popup t-popup-content t-popup__content
Popup t-popup-reference t-popup__reference
Popup t-popup_animation-enter t-popup--animation-enter
Popup t-popup_animation-enter-from t-popup--animation-enter-from
Popup t-popup_animation-exiting t-popup--animation-exiting
Popup t-popup_animation-leave-to t-popup--animation-leave-to
Popup t-popup_animation-enter-to t-popup--animation-enter-to
Popup t-popup_animation-entering t-popup--animation-entering
Popup t-popup_animation-leave-from t-popup--animation-leave-from
Popup t-popup_animation-leave t-popup--animation-leave
Popup t-popup_animation-enter-active t-popup--animation-enter-active
Popup t-popup_animation-leave-active t-popup--animation-leave-active

Tooltip

| 组件 | 原类名 | 新类名 |
|-----|-----|
| Tooltip | t-tooltip-light | t-tooltip--light |
| Tooltip | t-tooltip-default | t-tooltip--default |
| Tooltip | t-tooltip-primary | t-tooltip--primary |
| Tooltip | t-tooltip-success | t-tooltip--success |
| Tooltip | t-tooltip-danger | t-tooltip--danger |
| Tooltip | t-tooltip-warning | t-tooltip--warning |

Radio

组件 原类名 新类名
Radio t-radio-group-outline t-radio-group__outline
Radio t-radio-group-filled t-radio-group--filled
Radio t-radio-group-filled-bg-block t-radio-group__bg-block
Radio t-radio-group-primary-filled t-radio-group--primary-filled
Radio t-radio-group-small t-size-s
Radio t-radio-group-medium t-size-m
Radio t-radio-group-large t-size-l

TimePicker

组件 原类名 新类名
TimePicker t-time-picker-panel__container t-time-picker__panel-container
TimePicker t-time-picker-panel t-time-picker__panel
TimePicker t-time-picker-panel__body t-time-picker__panel-body
TimePicker t-time-picker-panel-section t-time-picker__panel-section
TimePicker t-time-picker-panel-section__body t-time-picker__panel-section-body
TimePicker t-time-picker-panel-section__footer t-time-picker__panel-section-footer

Tree

组件 原类名 新类名
Tree t-tree--fx t-tree--transition
Tree t-tree-toggle-enter-active t-tree__item--enter-active
Tree t-tree-toggle-leave-active t-tree__item--leave-active

Upload

组件 原类名 新类名
Upload t-upload-icon-delete t-upload__icon-delete
Upload t-upload-list__file t-upload__list-file
Upload t-upload-list__item t-upload__list-item
Upload t-upload-list__name t-upload__list-name
Upload t-upload-list__content t-upload__list-content
Upload t-upload-list__controll t-upload__list-controll
Upload t-upload-list__img t-upload__list-img
Upload t-upload__highlight t-upload--highlight
Upload t-upload-dialog t-upload__dialog
Upload t-upload-card__mask-disabled t-is-disabled
Upload t-upload__small t-size-s
Upload t-display-text--margin t-upload__display-text--margin
Upload t-upload-card-container t-upload__card-container
Upload t-upload-card t-upload__card
Upload t-upload-card__item t-upload__card-item
Upload t-upload-card__name t-upload__card-name
Upload t-upload-card__content t-upload__card-content
Upload t-upload-card__mask__item t-upload__card-mask-item
Upload t-upload-card__status-wrap t-upload__card-status-wrap
Upload t-upload-card__content-border t-is-bordered
Upload t-upload-card__status t-upload__card-status
Upload t-upload-card__mask t-upload__card-mask
Upload t-upload-dialog__body-img-box t-upload__dialog-body-img-box

Transfer

组件 原类名 新类名
Transfer t-transfer-list t-transfer__list
Transfer t-transfer-list-source t-transfer__list-source
Transfer t-transfer-list-target t-transfer__list-target
Transfer t-transfer-list__header t-transfer__list-header
Transfer t-transfer-list__body t-transfer__list-body
Transfer t-transfer-list-with-search t-transfer__list--with-search
Transfer t-transfer-list-search-wrapper t-transfer__search-wrapper
Transfer t-transfer-list__content t-transfer__list-content
Transfer t-transfer-list__item t-transfer__list-item
Transfer t-transfer-list__wrapper t-transfer__list-wrapper
Transfer t-transfer-list__pagination t-transfer__list-pagination
Transfer t-transfer-list__footer t-transfer__list-footer
Transfer t-transfer-operations t-transfer__operations
Transfer t-transfer-search t-transfer__search
Transfer t-transfer-with-tree t-transfer--with-tree
Transfer t-transfer-pagination t-transfer__pagination
Transfer t-transfer-footer t-transfer__footer
Transfer t-transfer-wrapper t-transfer__wrapper

Select组件

组件 原类名 新类名
Select 组件 t-select-wrap t-select__wrap
Select 组件 t-select-right-icon t-select__right-icon
Select 组件 t-select-left-icon t-select__left-icon
Select 组件 t-select-placeholder t-select__placeholder
Select 组件 t-select-input t-select__input
Select 组件 t-select-popup-reference t-select__popup-reference
Select 组件 t-select-dropdown t-select__dropdown
Select 组件 t-select-empty t-select__empty
Select 组件 t-select-loading-tips t-select__loading-tips
Select 组件 t-select-selectedSingle t-select__single
Select 组件 t-option-group t-select-option-group
Select 组件 t-option-group__divider t-select-option-group__divider
Select 组件 t-option-group-header t-select-option-group__header
Select 组件 t-select-right-icon__clear t-select__right-icon-clear
Select 组件 t-select-active-icon t-select__active-icon

Steps

组件 原类名 新类名
Steps t-steps-item-content t-steps-item__content
Steps t-steps-item-title t-steps-item__title
Steps t-steps-item-icon t-steps-item__icon
Steps t-steps-item-description t-steps-item__description
Steps t-steps-item-canclick t-steps-item--clickable
Steps default-step-icon t-steps__default-icon

[BUG][Icon] 组件动态切换无效

<icon-font :name="collapsed ? 'menu-fold' : 'menu-unfold'"> 当我改变collapsed值时组件name并未切换。

如果分开写成2个能正常切换
<icon-font v-if="collapsed" name="menu-fold"><icon-font v-else name="menu-unfold">

datepicker日期选择器问题

Describe Framework

  • tdesign-vue
  • tdesign-vue-next
  • tdesign-react
  • tdesign-miniprogram

Describe Environment
[email protected]

Add browser version here
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"

Describe the bug
当我们使用datepicker组件时,其中选择精确地时间(时分秒),选择后点击确认按钮,这时候输入框不显示精确时间。

Additional context
image

[improve] [Form] 表单组件自定义校验如果为数字类型存在问题

tdesign-vue-next

You will open an feature issue at tdesign-vue-next

Is your feature request related to a problem? Please describe.

当前情况,所有的表单校验,max/min都是默认校验字符串的长度是否符合规则,但是如果为数字类型,个人理解理论上max/min应该校验的是其值是否 >min or <max

 max: (val: ValueType, num: number): boolean => getCharacterLength(val) <= num,
 min: (val: ValueType, num: number): boolean => val.length >= num,

逻辑修改

如果值为数字,由于数字很少有长度的定义,校验规则 max 和 min 自动更为数值大小的校验

[Bug][Select] 在Popup中使用Select组件,Select组件展开后点击空白处无法正常关闭

tdesign-vue-next

You will open a bug issue at tdesign-vue-next。

Describe Environment

  • browser version: chrome
  • tdesign-vue-next version: 0.6.0

Describe the bug

image

<template>
  <t-popup
    trigger="click"
    placement="bottom-left"
  >
    <template #content>
      <div style="width: 300px; height: 300px;">
        <t-select>
          <t-option value="apple" label="apple" />
          <t-option value="pear" label="pear" />
        </t-select>
      </div>
    </template>
    <div>click me</div>
  </t-popup>
</template>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.