猎豆优选小程序

notice.vue 1.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view>
  3. <view class="level-tips-wrap" @click="onClickNotice">
  4. <image class="icon" src="https://ld.726p.com/ldyx_static/imgs/icon-notice.png" />
  5. <text class="tips">{{text}}</text>
  6. <slot><u-icon class="iconClose" :name="name" color="#F10B00" size="24" @click.stop="closeEvent"></u-icon></slot>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props:{
  13. text:{
  14. type:String,
  15. default:''
  16. },
  17. name:{
  18. type:String,
  19. default:'close'
  20. }
  21. },
  22. data(){
  23. return{
  24. }
  25. },
  26. methods: {
  27. // 点击整个notice
  28. onClickNotice(){
  29. this.$emit('clickNotice')
  30. },
  31. //关闭提示
  32. closeEvent(){
  33. this.$emit('close')
  34. }
  35. },
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .level-tips-wrap {
  40. display: flex;
  41. align-items: center;
  42. background-color: #fff;
  43. margin: 10rpx 0;
  44. padding: 20rpx;
  45. .icon {
  46. width: 34rpx;
  47. height: 28rpx;
  48. }
  49. .tips {
  50. margin-left: 10rpx;
  51. font-size: 26rpx;
  52. color: #F10B00;
  53. }
  54. .iconClose{
  55. margin-left: auto;
  56. }
  57. }
  58. </style>