| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-popover placement="bottom" |
| | | width="350" |
| | | trigger="click"> |
| | | |
| | | <el-tabs v-model="activeName"> |
| | | <el-tab-pane label="é®ä»¶(1)" |
| | | name="first"></el-tab-pane> |
| | | <el-tab-pane label="æ¶æ¯(2)" |
| | | name="second"></el-tab-pane> |
| | | <el-tab-pane label="éç¥" |
| | | name="third"></el-tab-pane> |
| | | </el-tabs> |
| | | <el-scrollbar style="height:300px"> |
| | | <avue-notice :data="data" |
| | | :option="option" |
| | | @page-change="pageChange"></avue-notice> |
| | | </el-scrollbar> |
| | | <div slot="reference"> |
| | | <el-badge is-dot> |
| | | <i class="el-icon-bell"></i> |
| | | </el-badge> |
| | | </div> |
| | | </el-popover> |
| | | </template> |
| | | |
| | | <script> |
| | | let list = [{ |
| | | img: '/img/bg/vip1.png', |
| | | title: 'å²è夫·ä¹å¸æ¯ å
³æ³¨äºä½ ', |
| | | subtitle: '05-08 15:08', |
| | | tag: 'å·²ç»å¼å§', |
| | | status: 0 |
| | | }, { |
| | | img: '/img/bg/vip2.png', |
| | | title: 'æ¯è夫·æ²å
¹å°¼äºå
å
³æ³¨äºä½ ', |
| | | subtitle: '05-08 15:08', |
| | | tag: 'æªå¼å§', |
| | | status: 1 |
| | | }, { |
| | | img: '/img/bg/vip3.png', |
| | | title: 'èå§Â·åºå
å
³æ³¨äºä½ ', |
| | | subtitle: '05-08 15:08', |
| | | status: 3, |
| | | tag: 'æé误' |
| | | }, { |
| | | img: '/img/bg/vip4.png', |
| | | title: 'æ¯å°Â·è´¹å°åå¾·æ¯ å
³æ³¨äºä½ ', |
| | | subtitle: '05-08 15:08', |
| | | status: 4, |
| | | tag: '已宿' |
| | | }]; |
| | | export default { |
| | | name: "top-notice", |
| | | data () { |
| | | return { |
| | | activeName: 'first', |
| | | option: { |
| | | props: { |
| | | img: 'img', |
| | | title: 'title', |
| | | subtitle: 'subtitle', |
| | | tag: 'tag', |
| | | status: 'status' |
| | | }, |
| | | }, |
| | | data: list, |
| | | } |
| | | }, |
| | | created () { |
| | | |
| | | }, |
| | | methods: { |
| | | pageChange (page, done) { |
| | | setTimeout(() => { |
| | | this.$message.success('页ç ' + page) |
| | | this.data = this.data.concat(list); |
| | | done(); |
| | | }, 1000) |
| | | |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | </style> |