效果图：
源码：
wxml:
<!-- 简易的提示组件 -->
<view class="dxui-toptips-container {{state==='success'?'dxui-toptips-success':''}} {{state==='warn'?'dxui-toptips-warn':''}} {{state==='error'?'dxui-toptips-error':''}}">
{{msg}}
</view>css:
.dxui-toptips-container {
width: 80%;
height: 50rpx;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
.dxui-toptips-success {
background: #00d060;
color: #fff;
}
.dxui-toptips-warn {
background: #ff8c00;
color: #fff;
}
.dxui-toptips-error {
background: red;
color: #fff;
}
js:
Component({
/**
* 组件的属性列表
*/
properties: {
//
msg:{
type:String,
value:""
},
state:{
type:String,
value:""
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
