Coder Social home page Coder Social logo

tencent / tdesign-miniprogram Goto Github PK

View Code? Open in Web Editor NEW
1.1K 23.0 254.0 13.99 MB

A Wechat MiniProgram UI components lib for TDesign.

Home Page: https://tdesign.tencent.com/miniprogram

License: MIT License

JavaScript 22.77% Less 14.19% TypeScript 25.59% Vue 0.58% HTML 36.85% Shell 0.02%
miniprogram tdesign wechat

tdesign-miniprogram's Issues

为 Button 组件添加自定义点击事件, 以便于处理 disabled 时的点击事件

Is your feature request related to a problem? Please describe.
当为 Button 组件设置 disabled 时, 尽管组件颜色变淡, 但是 tap 事件依旧可以正常执行, 需要自行在函数中处理

Describe the solution you'd like

  • 自定义点击事件, 组件设置 disabled 后, 在组件内部处理
  • 文档中指明在组件设置 disabled 后, tap 事件依旧会正常触发, 提醒用户处理
  • 希望两者都能实现:pray:

Describe alternatives you've considered
在 tap 事件函数中处理, 但是很容易忘记

Input 组件是否可以支持双向绑定

Is your feature request related to a problem? Please describe.
在处理用户输入时, 会使用到多个 Input 组件, 而每个 Input 都需要监听 change 事件, 并完成数据的更新

Describe the solution you'd like
使用 model:value 实现数据的双向绑定

<t-input model:value="{{ title }}" />

Describe alternatives you've considered

<t-input value="{{ title }}" />
handleChange(e) {
  const { value } = e.detail
  this.setData({ title: value })
}

Additional context

简易双向绑定 | 微信开放文档

steps 文档错误

Describe Framework

  • tdesign-miniprogram

Describe Environment

Add browser version here

Describe the bug
引入的 usingComponents 中缺少了 t- 前缀。

还有 stepper 组件

【Badge】【style】单个数字时不是圆形

对应的组件

Badge

相关环境

基础库版本:最新

运行环境:开发者工具 / iOS / Android

出现的问题

徽标组件,单个数字时不是圆形

附加信息

徽标组件基础是正圆,然后在此基础扩展

能搞环形进度条吗?我看桌面版的里边有,小程序也需要呀

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.

【小程序】关于可自定义小程序组件样式建议

建议:

使用css3的变量函数 var(--) 来自定义。

以Button按钮组件为例子:
开发者如果想自定义背景色(background-color)、字体色(color)、边框(border)
现阶段是样式覆盖,经测试需要加 !important 才能覆盖以上样式,个人感觉写法有点不爽
如果使用css3的变量函数 var(--) ,按照以下写法,个人感觉合理,希望能被采纳

组件内部写法 :

.t-button{
    color: var(--color , #000000e6);
    background-color: var(--background-color , #fff);
    border: var(--border , 1px solid #dcdcdc);
}

组件外部自定义时:

.my-button{
    --color : red;
    --background-color : blue
    --border : solid 5px yellow
}

提示组件找不到

用微信小程序工具创建项目,直接npm i tdesign-miniprogram -S --production 下载下来,拷贝的目录下面。
在全局引入的时候,提示组件找不到内部自己的组件,为什么?
image

Button 组件支持纯图标按钮

你想要的特性

image

你想要的解决方案

Button 组件支持纯图标按钮, 而不仅仅是带图标按钮

你考虑过的替代方案

使用 external-classes 覆盖原有样式

支持taro吗

按照说明clone下来 build后 复制到根目录 运行小程序 复制了tbutton作为demo 提示 ["usingComponents"]["t-button"] 未找到
image
image

Cell 组件 jump-type 使用与文档不匹配

Describe Framework

tdesign-miniprogram

Describe Environment

fc003c6

Describe the bug

<!-- 在为 Cell 组件设置 url 后, 点击组件报错: `TypeError: wx[jumpType] is not a function` -->

<t-cell title="添加" hover arrow url="/pages/meeting/staff/index" ></t-cell>

<!-- 按照文档同时设置 url 和 jump-type 后, 依旧报错 `TypeError: wx[jumpType] is not a function` -->

<t-cell title="添加" hover arrow url="/pages/meeting/staff/index" jump-type="navigate-to"></t-cell>

根据代码定义, 目前使用的方案:

<t-cell title="添加" hover arrow url="/pages/meeting/staff/index" jump-type="navigateTo"></t-cell>

Additional context

| jump-type | String | navigate-to | 链接跳转类型。可选项:redirect-to/switch-tab/relaunch/navigate-to | N |

jumpLink(urlKey = 'url', link = 'jumpType') {
const url = this.data[urlKey];
const jumpType = this.data[link];
if (url) {
wx[jumpType]({ url });
// wx.navigateTo({ url });
}
}

【Dialog】【Button】相关的问题

Describe Framework
tdesign-miniprogram

Describe Environment

any

Describe the bug

  • Button 需要支持 content
  • Dialog 的 confirmBtn 目前传入 buttonProps 并不会透传 t-button

Popup visible-change 事件中的 visible 与 visiable

Describe Framework

tdesign-miniprogram

Describe Environment

Any

Describe the bug
文档中 visible-change 事件返回的参数应为 visible, 而在示例代码和组件源码中实际使用的是 visiable

Additional context

| visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发,`context.trigger` 表示触发来源 |

onVisibleChange({ detail }) {
const { visiable } = detail;
this.setData({
top: visiable,
bottom: visiable,
center: visiable,
left: visiable,
right: visiable,
});
},

onOverlayClick() {
const { closeOnOverlayClick } = this.properties;
if (closeOnOverlayClick) {
this.triggerEvent('visible-change', { visiable: false });
}
}
onCloseClick() {
this.triggerEvent('visible-change', { visiable: false });
}

【重点】TDesign 接下来安排

想要的特性

  • 基础样式的实现
  • 受控实现
  • 双向绑定

想要的解决方案

< 基础样式的实现 >

目前许多组件的基础样式都是在示例里面实现,应该在组件里面实现。

<受控实现>

不是所有组件都需要,而且由于工作量可能比较大,因此会有优先顺序:

  • Dialog #124
  • Switch #122
  • Checkbox #158
  • Steps #146
  • Tabs #147
  • Tabbar #148
  • Input 因为双向绑定和受控冲突,目前还是未受控的
  • Textarea 因为双向绑定和受控冲突,目前还是未受控的
  • Radio #143
  • Rate #149
  • Search #152
  • Slider #151
  • Stepper #150
  • Upload #156

Popup 不需要支持

<双向绑定>

优先实现表单相关组件:

  • Input
  • Checkbox
  • Switch
  • Textarea
  • Radio
  • Search
  • Slider
  • Stepper

关联的issue: #98

补充

======================================================
|| 欢迎大家一起参与开源共建。感兴趣的伙伴可以提 PR 或 联系 Core Contributor:
||
|| @LeeJim @jin0209 @JJunYang
======================================================

Dialog弹出框 external-classes不能进行修改样式

对应的组件

Button

相关环境

基础库版本:最新

运行环境:开发者工具 / iOS / Android

出现的问题

A clear and concise description of what the bug is.

附加信息

Add any other context about the problem here.

Steps 视觉调整 & 问题修复

对应的组件

Steps

相关环境

基础库版本:最新

运行环境:开发者工具

出现的问题

视觉已更新:

  • 已完成步骤和错误步骤样式更新;
  • 分割线颜色改为Gy5;
  • 去掉【竖向带图标只读步骤条样式】

存在问题:

  • 所有可操作类型中,所有未选状态是统一的,没有灰色部分(只区分选中/未选中两种)

附加信息

视觉稿地址:https://codesign.qq.com/s/JG2mj75B3G0VKdM

Slider 视觉调整 & 问题修复

对应的组件

Slider

相关环境

基础库版本:最新

运行环境:开发者工具

出现的问题

视觉已更新:

  • 滑动点样式对齐web端(加粗,变蓝)
  • 所有默认状态文字色彩改为 90%;
  • 未激活线条样式改为Gray3;
  • 刻度样式改为居中

存在问题:

  • 部分数字位置偏移了
  • 没有与滑动选择器对齐
  • 展示demo无法滑动

附加信息

视觉稿地址:https://codesign.qq.com/s/JG2mj75B3G0VKdM

Message提示组件无法使用

Describe Framework

tdesign-miniprogram

Describe Environment

Add browser version here

Describe the bug
在使用Page.js 引入
import Message from 'tdesign-miniprogram/message/index';

并在触发事件中使用该API, 报错,无法显示; 报错信息如下:
VM5634 WAService.js:2 Unhandled promise rejection (env: Windows,mp,1.05.2111051; lib: 2.19.4)

button 按钮组件在 "style":"v2" 下 “点击后样式” 失效

导入 button 按钮组件后发现点击没有出现 “点击后状态样式”(即按钮变暗),百思不得其解,准备放弃 tdesign 的按钮尝试使用 vant-weapp 的按钮,发现其文档 快速上手部分 的 步骤二 说明如下:

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

按照其说法去除 "style": "v2" 后发现 tdesign 按钮样式恢复,重新加上 "style": "v2" 按钮的 “点击后样式” 失效。
建议在文档中也补充相关说明。

统一文档代码演示部分与右侧预览部分的代码

Is your feature request related to a problem? Please describe.
文档示例中的代码演示与预览部分大多数对不上号

Describe the solution you'd like

  • 统一文档代码演示部分与右侧预览部分的代码, 确保左侧代码复制完整后, 可以实现与右侧预览相同的功能与样式
  • 或者提供查看完整代码的 GitHub 链接等指引

Describe alternatives you've considered
对比示例代码与组件源码

Additional context
why

Avatar 初始样式错误

对应的组件

Avatar

相关环境

基础库版本:最新

运行环境:开发者工具

出现的问题

按官网的示例使用:

<t-avatar icon="user" t-class-icon="default-user" />

是没有任何样式的。需要手动实现 default-user 相关的样式:

.default-user {
    background-color: #e7e7e7;
    color: #c5c5c5;
    font-size: 60rpx;
  }

我的预期

应该是有默认的样式,而不是通过 externClass 来实现这默认样式

附加信息

相关链接:https://txc.qq.com/products/293854/post/164195607783926055/

dialog 支持 async-close

【现状】目前dialog 点击确定的时候直接把dialog 就关闭了
【期望】否关闭交给开发者控制比较好,比如有些校验不通过不想关闭dialog

check-box content slot doesn't work

Describe Framework

tdesign-miniprogram

Describe Environment

any

Describe the bug
check-box slot="content" doesn't work.

<t-checkbox>
    <!-- doesn't work -->
    <view slot="content">
    </view>

    <!-- work -->
    <view></view>
</t-checkbox>

Additional context

| content | String / Slot | - | 复选框内容 | N |

<view
class="{{classPrefix}}__description t-class-content "
style="-webkit-line-clamp:{{maxContentRow}}"
>
{{content}}
<slot />
</view>

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.