Weex 通知栏组件
<template> <div class="container"> <div class="demo"> <wxc-noticebar mode="link" notice="测试通告,可跳转" type="info" @wxcNoticebarLinkClicked="wxcNoticebarLinkClicked" notice-url="//h5.m.taobao.com/trip/home/index.html"> </wxc-noticebar> </div> <div class="demo"> <wxc-noticebar mode="closable" notice="测试通告,可跳转测试通告,可跳转测试通告,可跳转测试通告,可跳转测试通告,可跳转" :lines="2" type="warn"></wxc-noticebar> </wxc-noticebar> </div> </div> </template> <script> const modal = weex.requireModule('modal'); import { WxcNoticebar } from 'weex-ui'; export default { components: { WxcNoticebar }, data: () => ({ show: true }), methods: { wxcNoticebarCloseClicked(e){ console.log(e); modal.toast({ 'message': 'wxcNoticebarCloseClicked', 'duration': 1 }); }, wxcNoticebarLinkClicked(e){ console.log(e); modal.toast({ 'message': 'wxcNoticebarLinkClicked', 'duration': 1 }); } } }; </script>
更详细代码可以参考 demo
Prop | Type | Required | Default | Description |
---|---|---|---|---|
notice | String | Y | - | 通知文案 |
notice-url | String | Y | - | 跳转链接,没有不跳转 |
mode | String | Y | - | 提示类型(右侧图标) link /closable |
type | String | Y | - | 图标类型(左侧图标)success /error /info /question /time /redbag |
lines | Number | Y | 1 | 文案行数,取最大的行数截取 |
`@wxcNoticebarLinkClicked="wxcNoticebarLinkClicked"` `@wxcNoticebarCloseClicked="wxcNoticebarCloseClicked"`