支付宝小程序组件？

初次见面 只因为在蚂蚁群中多看了你一眼，就难以忘掉你容颜……小红小蓝的相遇就是这么 的狗血，就是蚁海中的擦肩而过回眸那一眼，小蓝大脑弹出提示：这个蚂蚁美眉真 是蚁群中最亮眼的那一只呀。小红心里想：这只蚂蚁哥哥真是独特呀。至于这劫能 不能逃得过，请见下回分解。下面我们讲一下关于 tips 提示的相关信息。 Tips 引导是特定应用场景下系统针对用户的一种功能引导方式，例如用户第一次 登录后、或者某个新功能上线后的提示等。分为两种类型：tipsdialog（对话 型）、tipsplain（简单型）。 示例代码

"defaultTitle": "Tips",
"usingComponents": {
 "tips-dialog": "mini-ali-ui/es/tips/tips-dialog/index",
 "tips-plain": "mini-ali-ui/es/tips/tips-plain/index"
}
}

tips-dialog

<tips-dialog
 show="{{showDialog}}"
 className="dialog"
 type="dialog"

 <view class="content" slot="content">
 <view>hello,</view>
 <view>欢迎使用小程序扩展组件库 mini-ali-ui</view>
 </view>
 <view slot="operation" class="opt-button" onTap="onDialogTap">知道了</view>
</tips-dialog>
<tips-dialog

iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.p
ng"
 type="rectangle"
 className="rectangle"
 onCloseTap="onCloseTap"
 show="{{showRectangle}}">
 <view class="content" slot="content">
 把“城市服务”添加到首页
 </view>
 <view slot="operation" class="add-home" onTap="onRectangleTap">立即添加
</view>
</tips-dialog>
</view>

data: {
 showRectangle: true,
 showDialog: true,
},
onCloseTap() {
 this.setData({
 showRectangle: false,
 });
},
onRectangleTap() {
 my.alert({
 content: 'do something',
 });

},
onDialogTap() {
 this.setData({
 showDialog: false,
 });
},
});

rectangle {
position: fixed;
bottom: 100px;
}
.dialog {
position: fixed;
bottom: 10px;
}
.content {
font-size: 14px;
color: #fff;
}
.opt-button {
width: 51px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
border: #68BAF7 solid 1rpx;
}
.add-home {
width: 72px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
background-color: #56ADEB;

color: #fff;
font-size: 14px;
}

tips-plain

Page({
data: {
 content: '我知道了',
 time: 2000,
},
onClose() {
 my.alert({
 title: '12321'
 });
}
});

属性 tips-dialog 属性 类型 默认值 说明 必填 className String - 自定义 class。 否 show Boolean true 控制组件是否展示。 否 type String dialog dialog 表示对话框的样 式类型，rectangle 表示 矩形的样式类型。 否 onCloseTap ()=> void - 当 type 值为 rectangle 时，组件点击关闭 icon 的回调。 否 iconUrl String - 展示 icon 的 url 地址。 属性 tips-dialog 属性 类型 默认值 说明 必填 className String - 自定义 class。 否 show Boolean true 控制组件是否展示。 否 type String dialog dialog 表示对话框的样 式类型，rectangle 表示 矩形的样式类型。 否 onCloseTap ()=> void - 当 type 值为 rectangle 时，组件点击关闭 icon 的回调。 否 iconUrl String - 展示 icon 的 url 地址。 否 85 arrowPosition String bottom-left 控制 tips 中的箭头位 置。可选值：bottomleft、bottom-center、 bottom-right、topleft、top-center、topright、left、right。 否 slots slotName 说明 content 用于渲染提示的正文内容 operation 用于渲染右侧操作区域 tips-plain 属性 类型 默认值 描述 默认值 className String false 自定义 class。 - time Number false 自动关闭时间（单 位：毫秒）。 5000(ms) onClose () => void false 回调并关闭提示框。 - 86 对方向你发出了好友邀请 作为男士，小蓝主动发起了对话：小红美眉，我可以加你为支付宝好友吗？小红： 用来作什么呢？小蓝：我可以天天送你能量跟鸡饲料，种树献爱心。小红心想自己 想种一棵樟子松还差点能量，加就加。至此，小红小蓝成功成为了支付宝好友。 当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话 框。用户需要针对对话框进行操作后方可结束。

"defaultTitle": "Modal",
"usingComponents": {
 "modal": "mini-ali-ui/dist/es/modal/index"
}
}

<view>
<button onTap="openModal">打开 modal</button>
<modal
 show="{{modalOpened}}"
 onModalClick="onModalClick"
 onModalClose="onModalClose"

topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.
png"
>
 <view slot="header">标题单行</view>
 说明当前状态、提示用户解决方案，最好不要超过两行。
 <view slot="footer">确定</view>
</modal>
</view>

data: {
 modalOpened: false,
},
openModal() {
 this.setData({
 modalOpened: true,
 });
},
onModalClick() {
 this.setData({
 modalOpened: false,
 });
},
onModalClose() {
 this.setData({
 modalOpened: false,
 });
}
});
属性 

属性名 类型 默认值 描述 className String - 自定义 class。 show Boolean false 是否展示 modal。 可选值：true、false。 showClose Boolean true 是否渲染 关闭。 可选值：true、false。 mask Boolean true 是否展示蒙层。 可选值：true、false。 closeType String 0 关闭图表类型。

onModalClick EventHandle () => void 选择区间时的回调。 onModalClose EventHandle () => void 点击 关闭 的回调。showClose 为 false 时无需设置。 topImage String - 顶部图片。 topImageSize String md 顶部图片规则。 可选值：  lg (带图弹框-大图)；  md (带图弹框)；  sm(带图弹框-小图)。 buttons Array