<!-- 01 基础类型 -->
<re-notice-bar class="demo-default" content="这是一条普通的通知信息" @click="setLog('点击了默认公告栏')" />
<re-notice-bar class="demo-prefix" prefixIcon="♪" content="带前缀图标的公告信息" @click="setLog('点击了前缀图标公告栏')" />
<re-notice-bar class="demo-suffix" suffixIcon="→" content="支持后缀提示图标" @click="setLog('点击了后缀图标公告栏')" />
<re-notice-bar class="demo-operation" content="带操作按钮的公告栏" operation="详情" @click="setLog('点击了带操作文案的公告栏')" />
<re-notice-bar class="demo-slot-operation" content="支持自定义 operation 插槽" @click="setLog('点击了插槽公告栏')"> <template #operation> <view class="demo-slot-action" @click.stop="setLog('点击了自定义操作插槽')"> <text class="demo-slot-action__text">查看详情</text> </view> </template> </re-notice-bar>
<re-notice-bar class="demo-custom" prefixIcon="★" content="通过 customStyle 调整圆角与内边距" customStyle="height:44px;border-radius:12px;padding-left:16px;padding-right:16px;" @click="setLog('点击了自定义样式公告栏')" />
<!-- 02 主题状态 -->
<re-notice-bar class="demo-theme-info" content="默认状态公告栏" />
<re-notice-bar class="demo-success" theme="success" content="成功状态公告栏" />
<re-notice-bar class="demo-warning" theme="warning" content="警示状态公告栏" />
<re-notice-bar class="demo-error" theme="error" content="错误状态公告栏" />
<!-- 03 滚动形态 -->
<re-notice-bar class="demo-marquee" :marquee="true" prefixIcon="📣" content="这是一条需要滚动播放的公告信息内容较长，适合用于连续展示较长文案。" @click="setLog('点击了水平跑马灯公告栏')" />
<re-notice-bar class="demo-vertical" direction="vertical" prefixIcon="🔊" content="垂直方向公告展示" @click="setLog('点击了垂直方向公告栏')" />
<!-- 04 交互控制 -->
<re-button class="demo-control-btn" theme="primary" size="small" @click="toggleVisible"> {{ visibleDemo ? '隐藏公告' : '显示公告' }} </re-button>
<re-button class="demo-control-btn" size="small" @click="resetLog">清空日志</re-button>
<re-notice-bar v-if="visibleDemo" class="demo-visible" suffixIcon="✕" content="当前公告栏由页面状态控制显示与隐藏" @click="setLog('点击了受控显示公告栏')" />
