小程序自定义简易的提示组件

效果图：

源码：

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: {
    
  }
})