GithubHelp home page GithubHelp logo

tencent / tdesign-mobile-vue Goto Github PK

View Code? Open in Web Editor NEW
241.0 15.0 139.0 6.77 MB

A Vue3.x Mobile UI components lib for TDesign.

Home Page: https://tdesign.tencent.com/mobile-vue

License: MIT License

Shell 0.03% JavaScript 25.68% Dockerfile 0.02% TypeScript 29.19% HTML 0.11% Vue 44.32% Less 0.65%
vue3 typescript tdesign

tdesign-mobile-vue's Introduction

TDesign Logo

License Version Downloads

TDesign 适配移动端的组件库，适合在 vue 3 技术栈项目中使用。

🎉 特性

  • 适配移动端交互
  • 基于 Vue3，并使用 Vite 2.x 开发构建
  • 对接前端组件语言规范
  • 与其他框架（React Mobile、小程序） API、UI 保持一致
  • 支持按需加载

安装

目前组件库已发布一期组件的测试版本，还在快速迭代，注意留意版本变化

npm i tdesign-mobile-vue

基础使用

推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

import { createApp } from 'vue';
import TDesign from 'tdesign-mobile-vue';

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

浏览器兼容性

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari
Edge >=97 Firefox >=96 Chrome >=96 Safari >=14.1

贡献成员

参与贡献

TDesign 欢迎任何愿意参与贡献的参与者。如果需要本地运行代码或参与贡献，请先阅读参与贡献。

反馈

有任何问题，建议通过 Github issues 反馈或扫码加入用户微信群。

开源协议

TDesign 遵循 MIT 协议。

tdesign-mobile-vue's People

Contributors

94dreamer avatar anlyyao avatar boneyx avatar buptsteve avatar ccccpj avatar chrysalis1215 avatar dengzygx avatar dufemeng avatar fayching avatar helkyle avatar helloyarn avatar honkinglin avatar josonyang avatar krimeshu avatar leejim avatar lipinghai avatar liweijie0812 avatar marvengong avatar nice-plq avatar palmcivet avatar ppyoung avatar romeochen avatar shoumwang avatar tingshine avatar veggieggggg avatar xia7187 avatar xiaosansiji avatar yaogengzhu avatar yorick304 avatar yuanmeda 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

Forkers

dengzygx syxysszyw shoumwang boneyx helloyarn krimeshu dut3062796s e0427 alamozhou flyerangel ppyoung xia7187 leecloudvictor fayching kuawo zc95 notwoboy f2e-awesome-components prui wingwangsz loopzhou ruige24601 nuohui sunnywanggit rashagu robinwongm-archives renxm wwlh200 skyelapsestarry zwkang ztao-z roytang1005 oceanlvr w453145157 lx233 yilaierwang douxpang isabella232 tingshine wangditxz luojin315 buptsteve kryst4ljy ladychatterleylover wqqfocks imhunterand xxxlj zyqq helkyle deadlyace isanxia leehomeok marvengong zhangpaopao0609 rofixro isabella327 elvinn cherishding 4xii wulibinbin diandian123 byq1213 saberc8 teal-front yuanmeda lockiechen yinchinan010 cloverforks rmj-lang wing-9527 adoer jarmywang yaogengzhu mamumu123 tangzixuan ctkqiang tomcat-hz shinyina mistakers yusuf-yz co-kyo rhinel fengchunqi rzdong brianzhang teacherdingting chenyusolar nined9 cunzaizhuyi gjxwxt charles-1999 bitjian resuragam chaneyzhao engvuchen ceezyyyy linhuaihang noonhorse hpdx ws2vicky

tdesign-mobile-vue's Issues

t-grid-item组件的badge-props属性，count 为0时，如何设置隐藏

tdesign-mobile-vue 版本

0.9.0

重现链接

No response

重现步骤

t-grid-item组件的badge-props属性，count 为0时，如何设置隐藏

Uploading image.png…

期望结果

当 count 为0 时，隐藏 badge

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Tabs] 增加Sticky粘性布局支持

这个功能解决了什么问题

增加一种内在功能的支持，Tabs 选项卡滚动到顶部时自动吸顶

你建议的方案是什么

Tabs 选项卡滚动到顶部时自动吸顶

t-list @scroll 方法触发不了怎么解决？

tdesign-mobile-vue 版本

0.8.2

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

3.2.25

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[CountDown] 倒计时刷新问题

tdesign-mobile-vue 版本

0.8.0

重现链接

https://tdesign.tencent.com/mobile-vue/components/count-down?tab=api

重现步骤

count-down组件中引用的useCountDown文件（src/shared/useCountDown/index.ts）
第15行-- count.value = parseInt(${Number(count.value) - 1000 / 60}, 10);
这里是使用的刷新率：60帧 去进行计算的吗？
我发现在高刷新率的手机上（小米11pro 144hz），倒计时会刷新的特别快，和正常的1s时间完全不同。

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Input] size未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[CheckBox] demo与示例代码不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[swiper] 没有支持loop这个功能吧?

tdesign-mobile-vue 版本

0.8.4

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Rate] gap未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[CheckBox] maxLabelRow未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[ImageViewer] API文档已更新，需补充所缺属性

tdesign-mobile-vue 版本

0.8.6

重现链接

https://github.com/Tencent/tdesign-mobile-vue/tree/feat/image-viewer/props

重现步骤

API差异

期望结果

实现props：closeBtn、deleteBtn、images、index、showIndex、trigger、visible、

实现event： close、indexChange

实际结果

目前props：images、visible、showIndex、initialIndex、backgroundColor

目前event：change

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

  1. API：feat/image-viewer/props分支下，ImageViewer组件的image-viewer.md、props.ts、type.ts为最新API文档及功能需求，需对齐该文档对ImageViewer组件进行重构。
  2. 开发：参照API文档，基于feat/image-viewer/props分支开发

[Upload] imageProps未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Swiper] 动态绑定时出错

tdesign-mobile-vue 版本

0.8.2

重现链接

No response

重现步骤

动态生成swiper item时

期望结果

显示正常

实际结果

显示报错

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

官网中移动端展示效果有点别扭

这个能不能改成固定定位的呀，这个感觉有点别扭，有时候得翻到底下才能显示全，
image
有时候在底下看不到上面 在上面看不到底下的
image

[Drawer] 官方示例中带图标的抽屉没有显示图标

tdesign-mobile-vue 版本

0.8.5

重现链接

No response

重现步骤

Drawer 组件中图标没有正确显示

期望结果

显示图标

实际结果

没有显示图标

框架版本

Vue(3.2.33)

浏览器版本

Chrome(102.0.5005.61)

系统版本

MacOS(12.4)

Node版本

17.6.0

补充说明

No response

[Popup] to属性设置后效果不对，会报错

tdesign-mobile-vue 版本

0.8.1

重现链接

No response

重现步骤

设置popup的to属性为某个id时

期望结果

不报错且正常弹出

实际结果

设置popup的to属性为某个id时会报错，无法正常弹出

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Upload] cancel-upload事件未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Tabs] 选项卡 TabPanel label 无法动态赋值

tdesign-mobile-vue 版本

0.8.0

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Icon] 文档缺少预览

这个功能解决了什么问题

Icon组件的文档，没有预览，我不知道tdesign-icons-vue-next提供了哪些图标，无从选择

你建议的方案是什么

组件文档显示预览图标

[Fab] demo未对齐视觉稿

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

视觉稿：视觉稿地址

[Upload] select-change事件未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Drawer] API文档已更新，需补充所缺属性，建议重构。

tdesign-mobile-vue 版本

0.8.6

重现链接

https://github.com/Tencent/tdesign-mobile-vue/tree/refactor/drawer

重现步骤

API差异

期望结果

实现props：attach、cancelBtn、closeBtn、closeOnOverlayClick、confirmBtn、destroyOnClose、items、mode、placement、showInAttachedElement、showOverlay、size、zIndex

实现event：close、itemClick、overlayClick

实际结果

目前props为：visible、sidebar

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

  1. API：refactor/drawer分支下，Drawer组件的drawer.md、props.ts、type.ts为最新API文档及功能需求，需对齐该文档对Drawer组件进行重构。
  2. 开发：参照API文档，基于refactor/drawer分支开发。

[List] layout、size、split、stripe等属性未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

实现props：layout、size、split、stripe，与文档保持一致

实际结果

layout、size、split、stripe均未实现，与文档描述不符

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Badge] 设置 shape 属性为 ribbon 时，组件被移动到了右边

tdesign-mobile-vue 版本

0.8.5

重现链接

No response

重现步骤

Badge 组件设置 shape 属性为 ribbon 时，组件移动到了右边

期望结果

位置正常

实际结果

移动到了右边

框架版本

Vue(3.2.33)

浏览器版本

Chrome(102.0.5005.61)

系统版本

MacOS(12.4)

Node版本

17.6.0

补充说明

No response

[Cell] image未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

支持image，与文档描述保持一致

实际结果

image未实现，

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[date-time-picker] onColumnChange 事件返回的数据有误

tdesign-mobile-vue 版本

0.8.4

重现链接

No response

重现步骤

截屏2022-04-28 16 13 54

期望结果

No response

实际结果

const onColumnChange = ({ value, index }) => {
context.emit('columnChange', {
value,
index,
});
};

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Textarea, Collapse] 使用组件时会出现 console

tdesign-mobile-vue 版本

0.8.5

重现链接

No response

重现步骤

使用 Textarea 和 Collapse 组件时会出现 console

期望结果

不应该出现 console

实际结果

出现 console

框架版本

Vue(3.2.33)

浏览器版本

Chrome(102.0.5005.61)

系统版本

MacOS(12.4)

Node版本

17.6.0

补充说明

No response

[ImageViewer] 图片预览组件缺少手势缩放功能、预览图片惰性加载

这个功能解决了什么问题

1.对应一个图片预览组件，支持图片缩放查看是不可缺少的功能；
2.还有就是引用该组件后，即使没有打开预览，也会组件加载所有的dom结构，并且高清图的请求会占用网络带宽甚至影响页面加载速度；
3.组件元素的类名，有些事直接以image-viewer开头，而有些是t-image-viewer

你建议的方案是什么

1.支持图片缩放查看预览；
2.支持组件元素惰性加载；
3.组件元素的类名统一以t-image-viewer前缀

[Badge] 设置 maxCount 属性无效

tdesign-mobile-vue 版本

0.8.5

重现链接

No response

重现步骤

Badge 组件设置 maxCount 属性无效，count 会超出 maxCount

期望结果

maxCount 属性生效

实际结果

maxCount 属性无效

框架版本

Vue(3.2.33)

浏览器版本

Chrome(102.0.5005.61)

系统版本

MacOS(12.4)

Node版本

17.6.0

补充说明

No response

[CheckBox] 在t-checkbox-group中，checked无效

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Picker 选择器,02联动中弹出框弹出 之后，选择取消,不会自动消失,点击页面空白处,弹出框才会消失.

tdesign-vue-next 版本

Vue Next for Mobile0.8.4

重现链接

https://tdesign.tencent.com/mobile-vue/components/picker

重现步骤

1.点击选择英雄,出现弹出框,选择其他英雄，突然前期不想选择了,但是选项框没有更改
2.点击取消,弹出框不消失，已取消警告框出现.

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

19.7.0

补充说明

No response

[Checkbox] maxContentRow未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[Badge] color 属性设置无效

tdesign-mobile-vue 版本

0.8.5

重现链接

No response

重现步骤

使用 Badge 组件设置 color 属性后，颜色没有发生变化

期望结果

color 属性发生变化

实际结果

color 属性没有发生变化

框架版本

Vue(3.2.33)

浏览器版本

Chrome(102.0.5005.61)

系统版本

MacOS(12.4)

Node版本

17.6.0

补充说明

No response

[t-dropdown-item] value属性没有受控，监听不到变化 chang事件也无法触发

tdesign-mobile-vue 版本

使用最新的0.8.5发现此问题

重现链接

No response

重现步骤

`

<t-dropdown-menu>
   <t-dropdown-item v-model="parkType" label="园区类型" :options="parkTypeOptions" @change="handleChange" />
</t-dropdown-menu>

const parkType = ref('');
watch(parkType, (val) => {
  console.log(val);   // 监听不到变化
});

const handleChange = (val) => {
  console.log(val)  // 监听不到变化
}

`

期望结果

下拉选择后监听到value的值变化

实际结果

监听不到value的值变化

框架版本

Vue(3.2.25)

浏览器版本

Chrome(101.0.4951.54)

系统版本

Windows 11

Node版本

Node(v14.17.6)

补充说明

No response

[Badge] maxCount未实现，与文档描述不一致

tdesign-mobile-vue 版本

0.8.6

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

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.