ant-design / ant-design-mini

Ant Design for Alipay Mini Program

Home Page:https://mini.ant.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SwiperAction 支持通过 slot 定制 Button

DiamondYuan opened this issue · comments

背景

目前的 SwipeAction 只支持通过 text 来定制文本

期望

希望可以自定义样式, 比如在文本下面多一个 icon

思路 1 , 使用 slot-scope + named slot

<slot name='button'. position='left/right' index='index' text="getText()" item="item">

思路 2 , 用户自定义 slot 的名字

[{
slotName: 'button-one'
}]

<view slot="button-one" / >

思路 1 的缺点是微信不支持 named slot
思路 2 的缺点是不支持 confirmText

第二种思路的 slot 定义 与 消费


          {
            item.slotName  && item.confirm && <slot name="{{item.slotName}}-confirm">
            item.slotName && !item.confirm && <slot name="{{item.slotName}}">
            !item.slotName && <text>默认实现</text>
          }

          <block a:for="{{ rightBtns }}">
            <block a:if="{{ item.slotName }}">
              <view slot="{{item.slotName}}">
                {{item.text}}
              </view>
              <view slot="{{item.slotName}}-confirm">
               {{item.confirmText}}
              </view>
            </block>
          </block>