umicro / uView

uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
MIT License
4.05k stars 769 forks source link

建议给ActionSheet组件添加slot,可以自定义Action内容和样式 #34

Open dingdingtop opened 4 years ago

dingdingtop commented 4 years ago

建议给ActionSheet组件添加slot,可以自定义Action内容和样式,参考vant-weapp的 action-sheet组件: https://github.com/youzan/vant-weapp/blob/dev/dist/action-sheet/index.wxml

BeiQiaoT commented 4 years ago

您是说单个item吗,如果想自定义更多,建议使用popup

dingdingtop commented 4 years ago

实现起来很简单,@BeiQiaoT: <template> <u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex"> <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">{{tips.text}}</view> <view v-if="list && list.length"> <block v-for="(item, index) in list" :key="index"> <view @touchmove.stop.prevent @tap="itemClick(index)" :style="[itemStyle(index)]" class="u-action-sheet-item" :class="[index < list.length - 1 ? 'u-border-bottom' : '']" hover-class="u-hover-class" :hover-stay-time="150">{{item.text}}</view> </block> </view> <slot /> <view class="u-gab" v-if="cancelBtn"></view> <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" @tap="close">取消</view> </u-popup> </template>