Skip to content

Commit c9f251d

Browse files
author
reco_luan
committed
feat: create plugin notice
1 parent d75005e commit c9f251d

File tree

14 files changed

+280
-5
lines changed

14 files changed

+280
-5
lines changed

‎example/.vuepress/config.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,5 +96,29 @@ module.exports = {
9696
* 'tomorrow'
9797
* 'twilight'
9898
*/
99-
}
99+
},
100+
plugins: [
101+
['@vuepress-reco/vuepress-plugin-notice', {
102+
body: [
103+
{
104+
type: 'title',
105+
content: '欢迎加入QQ交流群 🎉🎉🎉',
106+
style: 'text-aligin: center;'
107+
},
108+
{
109+
type: 'image',
110+
src: '/rvcode_qq.png'
111+
}
112+
],
113+
footer: [
114+
[
115+
{
116+
type: 'button',
117+
text: '打赏',
118+
link: '/donate'
119+
}
120+
]
121+
]
122+
}]
123+
]
100124
}

‎example/.vuepress/public/rvcode_qq.png‎

191 KB
Loading

‎example/.vuepress/public/rvcode_wx.png‎

13.3 KB
Loading

‎packages/@vuepress-reco/vuepress-plugin-back-to-top/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
],
1010
"homepage": "https://vuepress-theme-reco.recoluan.com",
1111
"bugs": {
12-
"url": "https://github.com/vuepress-reco/vuepress-plugin-pagation/issues"
12+
"url": "https://github.com/vuepress-reco/vuepress-theme-reco/issues"
1313
},
1414
"repository": {
1515
"type": "git",

‎packages/@vuepress-reco/vuepress-plugin-comments/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"repository": {
1515
"type": "git",
16-
"url": "git+https://github.com/vuepress-reco/vuepress-theme-reco.git"
16+
"url": "git+https://github.com/vuepress-reco/vuepress-plugin-comments.git"
1717
},
1818
"license": "MIT",
1919
"author": "reco_luan <recoluan@outlook.com>",

‎packages/@vuepress-reco/vuepress-plugin-loading/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"repository": {
1515
"type": "git",
16-
"url": "git+https://github.com/vuepress-reco/vuepress-theme-reco.git"
16+
"url": "git+https://github.com/vuepress-reco/vuepress-plugin-loading-page.git"
1717
},
1818
"license": "MIT",
1919
"author": "reco_luan <recoluan@outlook.com>",

‎packages/@vuepress-reco/vuepress-plugin-notice/.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
__tests__
2+
__mocks__
3+
node_modules

‎packages/@vuepress-reco/vuepress-plugin-notice/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# `@vuepress-reco/vuepress-plugin-notice`
2+
3+
> TODO: description
4+
5+
## Usage
6+
7+
```
8+
const vuepressPluginNotice = require('@vuepress-reco/vuepress-plugin-notice');
9+
10+
// TODO: DEMONSTRATE API
11+
```

‎packages/@vuepress-reco/vuepress-plugin-notice/bin/Notice.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<transition name="fade">
3+
<div v-if="visible" class="notice-wrapper" :style="{ width }">
4+
<h4 class="notice-title">
5+
<i class="iconfont reco-tongzhi"></i>
6+
<span>{{ title || NoticeLocales.notice }}</span>
7+
<i class="btn-close" @click="closeNote">
8+
<svg t="1573745677073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4448" width="22" height="22"><path d="M512 34.133333a486.4 486.4 0 1 0 486.4 486.4A486.4 486.4 0 0 0 512 34.133333z m209.4848 632.8064l-55.6032 55.466667-151.517867-151.125333-151.517866 151.1168-55.6032-55.466667 151.517866-151.108267L307.242667 364.714667l55.6032-55.466667 151.517866 151.125333 151.517867-151.1168 55.6032 55.466667-151.517867 151.099733z m0 0" p-id="4449"></path></svg>
9+
</i>
10+
</h4>
11+
<div class="notice-content" v-html="bodyNodes"></div>
12+
<hr>
13+
<div class="notice-footer" v-html="footerNodes"></div>
14+
</div>
15+
</transition>
16+
</template>
17+
18+
<script>
19+
import noticeLocales from './locales'
20+
21+
export default {
22+
name: 'Notice',
23+
data () {
24+
return {
25+
visible: false,
26+
/* eslint-disable no-undef */
27+
title: TITLE,
28+
width: WIDTH,
29+
body: BODY,
30+
footer: FOOTER
31+
}
32+
},
33+
computed: {
34+
bodyNodes () {
35+
return this.handleNode(this.body).join('')
36+
},
37+
footerNodes () {
38+
return this.handleNode(this.footer).join('')
39+
},
40+
noticeLocales () {
41+
return noticeLocales(this)
42+
}
43+
},
44+
mounted () {
45+
const closeNote = sessionStorage.getItem('closeNote')
46+
this.visible = closeNote !== 'true'
47+
},
48+
methods: {
49+
closeNote () {
50+
this.visible = false
51+
sessionStorage.setItem('closeNote', 'true')
52+
},
53+
handleNode (nodes) {
54+
if (!Array.isArray(nodes)) {
55+
let type = nodes.type
56+
type = type.slice(0, 1).toUpperCase() + type.slice(1)
57+
return this[`handle${type}`](nodes)
58+
} else {
59+
return nodes.map(node => this.handleNode(node))
60+
}
61+
},
62+
handleImage (node) {
63+
return `<img style=\"${node.style || ''}\" src=\"${node.src}\" />`
64+
},
65+
handleText (node) {
66+
return `<p style=\"${node.style || ''}\">${node.content}</p>`
67+
},
68+
handleTitle (node) {
69+
return `<h5 style=\"${node.style || ''}\">${node.content}</h5>`
70+
},
71+
handleButton (node) {
72+
return `<a style=\"${node.style || ''}\" class=\"btn\" href=\"${node.link}\">${node.text}</a>`
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style lang="stylus" scoped>
79+
.notice-wrapper
80+
position fixed
81+
top 80px
82+
right 20px
83+
z-index 19
84+
box-sizing border-box
85+
background #fff
86+
border 1px solid $accentColor
87+
border-radius .25rem
88+
background var(--background-color)
89+
box-shadow var(--box-shadow)
90+
.notice-title
91+
position relative
92+
box-sizing border-box
93+
padding 10px
94+
margin 0
95+
background $accentColor
96+
color #fff
97+
i
98+
color #fff
99+
.btn-close
100+
position absolute
101+
display inline-block
102+
width 22px
103+
height 22px
104+
right 10px
105+
top 0
106+
bottom 0
107+
margin auto
108+
cursor pointer
109+
svg
110+
fill #fff
111+
.notice-content
112+
box-sizing border-box
113+
padding 10px 15px 0
114+
::v-deep h5
115+
margin .2rem 0
116+
text-align center
117+
::v-deep img
118+
width 100%
119+
.notice-footer
120+
padding 16px
121+
text-align center
122+
::v-deep .btn
123+
display inline-block
124+
width 3.4rem
125+
line-height 3.4rem
126+
text-align center
127+
background-color $accentColor
128+
border-radius 50%
129+
color #fff
130+
font-size 1rem
131+
box-shadow var(--box-shadow)
132+
cursor pointer
133+
&:not(:first-child)
134+
margin-left 10px
135+
.fade-enter-active, .fade-leave-active {
136+
transition: opacity .5s;
137+
}
138+
.fade-enter, .fade-leave-to {
139+
opacity: 0;
140+
}
141+
</style>

‎packages/@vuepress-reco/vuepress-plugin-notice/bin/enhanceAppFile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import notice from './notice.vue'
2+
3+
export default ({ Vue }) => {
4+
Vue.component('notice', notice)
5+
}

0 commit comments

Comments
 (0)
⚡