[youzan/vant][Feature Request] TextEllipsis 组件支持自定义 action 按钮位置(脱离文本)

2023-12-11 74 views
8
这个功能解决了什么问题?

正常来说,脱离文本的 action 按钮(比如按钮在文字下方)是可以按照普通 ellipsis 来实现的,

但是如果使用了 text-align: justify,css ellipsis 的 dots ... 在 iOS 上会和文字有重叠,这时还是需要使用动态计算截取文本的方式来添加 dots

你期望的 API 是什么样子的?
  • 方案一:添加 action 按钮的 slot,没有这个 slot 时,保持原有逻辑,有则把操作事件绑定到这个 slot 上
  • 方案二:添加对外的 toggle(expanded = !expanded) 方法,此时可以通过将 expandText 和 collapseText 置为空以取消对 action 字符的计算,同时可以在任意位置通过任意操作来主动触发 toggle

个人认为方案二比较灵活,改起来也比较方便

以上,感谢

回答

3

可以提供一个 toggle 方法,一方面是脱离文本的 action,还有场景是不需要按钮,直接点击文本本身切换的

2

赞同 有的时候不希望默认铺开,而是希望以popup的形式展开全文,加个toggle刚好解决这问题

9

我拷贝了一份 TextEllipsis.tsx 的源码,尝试添加了一个 toggle,发现单独添加 toggle 方法不能达到和原来一样的效果,区别在于对 action 按钮的内容控制和显示控制。

在源码里,按钮的控制是由其内部的 expandedhasAction 来控制的。

我尝试的处理:我在组件根节点上通过 expandedhasAction 绑定了两个表示状态的 class,我的 action 在组件外部是和组件挨着的,所以可以通过表示状态的 class 的相邻元素控制 action 的显示

请问在自定义 action 的需求下是否有更加通用的方式来实现对 action 状态的控制?

0

我直接修改了node-module中的ellipsis相关的ts和js文件,加了一个unable参数,在click事件中判断unable,如果为false则执行正常逻辑(为了兼容老版本)将expand设置反值,如果为true则不做处理。实现了点击“展开”事件,以popup的形式呈现,而非默认铺开,破坏原始布局

3

emm...,不好意思没太明白你想要的效果,有没有 codesandbox 看下效果的,如果是 action 脱离组件,完全可以由用户定义按钮并且控制的啊

4

action 按钮和文本状态其实是互相影响的

  • action 按钮通过 toggle 方法手动切换文本的显示状态
  • 文本显示状态又会影响 action 按钮的显示(文本展开和收起时显示不同的按钮内容,文本无需折叠时不显示按钮)

toggle 方法比较好实现,但这个反向的控制我没想到合适的方法

6

哦哦,如果能知道 hasAction 的值是不是就可以了。

2

逻辑上可行

如果能知道 expanded 的值就更好了

3

如果按钮脱离组件了,expanded 的值是由使用者通过 toggle 控制的,已经知道了啊?

8

是的,expanded 可以通过外层变量和 toggle 来记录获取,我是想省掉外层的操作。这是一个有个人倾向的可选项,可以忽略

5

已增加获取文本是否可被省略的方法,待合并发版后即可使用哈。