# 8.1 消息提醒（Noticebar）

展现需要关注的信息。

# 样式

样式如下，有普通、带跳转按钮、带关闭、带跳转加带关闭；橙色为一般提醒样式。 普通样式（不带关闭）消息提示，出现3-5s后，自动消失。

# 示例

<template>
  <div class="dof-demo" :style="pageContainerStyle">
    <dof-minibar title="8.1 消息提醒"> </dof-minibar>
    <SwitchTheme />
    <scroller class="scroller">
      <dof-catalog title="一般提醒样式" background-color="#E5E5E8"></dof-catalog>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          btn-text="去查看"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          btn-text="去查看"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看。"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看您有一条新消息"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="all"
          btn-text="去查看"
          @dofNoticebarClicked="dofNoticebarClicked"
          notice="您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="all"
          btn-text="去查看"
          @dofNoticebarClicked="dofNoticebarClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看。"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="您有一条新消息，其注意查看"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="您有一条新消息，其注意查看，您仍然有一条新消息，其注意查看"></dof-noticebar>
      </div>
      <dof-catalog title="重要提醒样式" background-color="#E5E5E8"></dof-catalog>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          type="important"
          btn-text="去查看"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          type="important"
          btn-text="去查看"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看。"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          type="important"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看您有一条新消息"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          type="important"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="all"
          btn-text="去查看"
          type="important"
          @dofNoticebarClicked="dofNoticebarClicked"
          notice="您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="all"
          btn-text="去查看"
          type="important"
          @dofNoticebarClicked="dofNoticebarClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看。"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar notice="您有一条新消息，其注意查看" type="important"></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          type="important"
          notice="您有一条新消息，其注意查看，您仍然有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <dof-catalog title="点击态" background-color="#E5E5E8"></dof-catalog>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          btn-text="去查看"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看。"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看您有一条新消息"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="closable"
          type="important"
          @dofNoticebarCloseClicked="dofNoticebarCloseClicked"
          notice="您有一条新消息，其注意查看，您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="demo">
        <dof-noticebar
          mode="btn"
          btn-text="去查看"
          type="important"
          @dofNoticebarBtnClicked="dofNoticebarBtnClicked"
          notice="您有一条新消息，其注意查看"
        ></dof-noticebar>
      </div>
      <div class="h-100"></div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #151617;
}

.scroller {
  flex: 1;
}
.h-100 {
  width: 750px;
  height: 100px;
}

.demo {
  margin-top: 40px;
}

.colorPanel {
  padding-bottom: 40px;
  margin-top: 40px;
}
</style>

<script>
const modal = weex.requireModule('modal')
import { DofNoticebar, DofMinibar, DofCatalog } from 'dolphin-weex-ui'
import SwitchTheme from 'src/components/SwitchTheme.vue'
export default {
  components: { DofCatalog, DofNoticebar, DofMinibar, SwitchTheme },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    url: 'http://dolphin-weex-dev.msmartlife.cn/component/base/color.html'
  }),
  created() {
    // setTitle('Noticebar');
  },
  computed: {
    pageContainerStyle() {
      try {
        let tmp = this.$theme.watchTheme({
          colmo: { backgroundColor: '#151617' }, // colmo模式 的 style
          default: { backgroundColor: '#ffffff' }
        })
        return tmp
      } catch (error) {
        return { backgroundColor: '#151617' }
      }
    }
  },
  methods: {
    dofNoticebarCloseClicked(e) {
      console.log(e)
      modal.toast({ message: 'dofNoticebarCloseClicked', duration: 1 })
    },

    dofNoticebarClicked(e) {
      console.log('dofNoticebarClicked')
      modal.toast({ message: 'dofNoticebarClicked', duration: 1 })
    },

    dofNoticebarBtnClicked(e) {
      console.log(e)
      console.log('dofNoticebarBtnClicked')
      modal.toast({ message: 'dofNoticebarBtnClicked', duration: 1 })
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
点我扫二维码 查看demo

# Attributes

Prop Type Required Default Description
type String N 'info' 类型：info/warning/warning-i18n/danger/important 见注1
notice String N '' notice内容
mode String N '' 类型：btn/closable/all 见注2
btn-text String N '' mode值为btn或者all时，btn按钮显示的label

# Events

事件名 说明 回调参数
dofNoticebarBtnClicked btn按钮点击事件 e
dofNoticebarClicked noticebar点击事件 e
dofNoticebarCloseClicked closeIcon点击事件 e
  • 注1：type值为important，为colmo的重要提醒样式，橙色背景的
  • 注2: mode值为btn时，noticebar右边为按钮，为closable时为关close Icon，值为all时，btn和close同时显示
Last Updated: 12/27/2023, 4:50:54 PM

← 8.2 红点提醒（Badge） →