wxc-icon.wxml:
<view class="icon icon--{{type}}" style="font-size:{{size}}rpx; color:{{color}};"></view>
wxc-toast.wxml:
<view class="toast" wx:if="{{isShow}}">
<view class="toast__box">
<view wx:if="{{icon || iconImage}}" class="toast__icon" style="color: {{iconColor || '#fff'}}">
<block wx:if="{{icon && !iconImage}}">
<wxc-icon type="{{icon}}" size="68"></wxc-icon>
</block>
<image wx:if="{{iconImage}}" class="toast__icon--image" src="{{iconImage}}" mode="widthFix"></image>
</view>
<text class="toast__title">
<slot wx:if="{{!text}}"></slot>{{text ? text : ''}}
</text>
</view>
</view>
wxc-icon.js:
Component({ options: {}, behaviors: [], properties: { type: { type: String, value: '' }, size: { type: [Number, String], value: 26 }, color: { type: String, value: '#333333' } },
data: {},
created: function () {}, attached: function () {}, ready: function () {}, moved: function () {}, detached: function () {},
methods: {
} })
wxc-toast.js:
Component({ options: {}, behaviors: [], properties: { isShow: { type: Boolean, value: false }, text: { type: String, value: '' }, icon: { type: String, value: '' }, iconColor: { type: String, value: '' }, iconImage: { type: String, value: '' }, duration: { type: Number, value: 2000 } },
data: { maskStatus: 'hide' },
created: function () {}, attached: function () { console.log(this.data.icon); },
ready: function () {}, moved: function () {}, detached: function () {},
methods: { } })
index.wxml:
<wxc-toast is-show="{{$toast.show}}" text="分享成功" icon="yes" icon-color="#ff5777"></wxc-toast>
<button bindtap="showToast">自定义 icon 颜色的 toast</button>
index.js:
showToast() { this.setData({ $toast: { show: true } }) setTimeout(() => { this.setData({ $toast: { show: false } }) }, 1500) },
|
强力驱动