vuepress-theme-uniapp-official 1.4.26 → 1.4.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/global-components/CodeSimulator.vue +235 -88
  2. package/global-components/Popover.vue +6 -2
  3. package/package.json +6 -5
package/global-components/CodeSimulator.vue CHANGED
@@ -1,56 +1,185 @@
1
1
  <script>
2
- import clientRootMixin from 'vuepress-plugin-juejin-style-copy/clientRootMixin';
2
+ import clientRootMixin from 'vuepress-plugin-juejin-style-copy/clientRootMixin'
3
+ import Popover from './Popover.vue'
4
+
5
+ const qrCodeLogoD =
6
+ 'M597.333333 597.333333h85.333334v-85.333333h85.333333v128h-85.333333v42.666667h-85.333334v-42.666667h-85.333333v-128h85.333333v85.333333z m-384-85.333333h256v256H213.333333v-256z m85.333334 85.333333v85.333334h85.333333v-85.333334H298.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m85.333334 85.333334v85.333333h85.333333V298.666667H298.666667z m213.333333-85.333334h256v256h-256V213.333333z m85.333333 85.333334v85.333333h85.333334V298.666667h-85.333334z m85.333334 384h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333333v85.333333h-85.333333v-85.333333z'
7
+ const appRedirectKeyword = 'appRedirect'
8
+ let imageIndex = 0
3
9
 
4
10
  export default {
5
- mixins:[clientRootMixin],
6
- props:{
7
- src:{
8
- type:String,
9
- default:''
10
- }
11
- },
12
- data(){
13
- return {
14
- activeIndex: 0
15
- }
16
- },
17
- mounted(){
18
- this.$copyUpdates && this.$copyUpdates()
19
- this.onWindowResize()
20
- window.addEventListener('resize', this.onWindowResize)
21
- },
22
- beforeDestroy(){
23
- window.removeEventListener('resize', this.onWindowResize)
24
- },
25
- methods:{
26
- onWindowResize(){
27
- const contentWidth = getComputedStyle(document.querySelector('.theme-default-content')).width
28
- if (window.matchMedia('(max-width: 410px)').matches) {
29
- this.$refs.codeIframe.style.maxWidth = contentWidth
30
- }
31
- },
32
- onClick(index){
33
- this.activeIndex = index
34
- },
35
- createdDom(h,node){
36
- let headerDom = []
37
- node.forEach((v, index) => {
38
- headerDom.push(h('p', {
39
- class: `pages-tabs-header-text ${this.activeIndex === index ? 'pages-tabs--active' : ''}`, on: {
40
- click: (e) => {
41
- this.onClick(index)
42
- }
43
- }
44
- }, v.title),)
45
- })
46
- return this.renderDom(h, h('div', { class: 'page-tabs' }, [
47
- h('div', { class: 'pages-tabs-header' }, headerDom),
48
- h('div', { class: 'page-snippet-code', key: this.activeIndex }, [node[this.activeIndex].node]),
49
- ]))
50
- },
51
- renderDom(h,node){
52
- return h('div', { class: 'page-runtime' }, [
53
- h('div', { class: 'page-snippet' , style: { height: this.src ? '667px' : 'auto' }}, [node]),
11
+ mixins: [clientRootMixin],
12
+ components: { Popover },
13
+ props: {
14
+ src: {
15
+ type: String,
16
+ default: '',
17
+ },
18
+ },
19
+ data() {
20
+ return {
21
+ activeIndex: 0,
22
+ appRedirectSrc: '',
23
+ qrCodeImageClass: `qrcode-img_${++imageIndex}`,
24
+ qrCodeImageParentDisplay: 'none',
25
+ firstRender: true,
26
+ }
27
+ },
28
+ mounted() {
29
+ this.$copyUpdates && this.$copyUpdates()
30
+ this.onWindowResize()
31
+ this.qrCodeImage = document.querySelector(`img.${this.qrCodeImageClass}`)
32
+ if (this.qrCodeImage) {
33
+ this.qrCodeImageContainer = this.qrCodeImage.parentElement
34
+ }
35
+ window.addEventListener('resize', this.onWindowResize)
36
+ },
37
+ beforeDestroy() {
38
+ window.removeEventListener('resize', this.onWindowResize)
39
+ },
40
+ methods: {
41
+ onWindowResize() {
42
+ const contentWidth = getComputedStyle(document.querySelector('.theme-default-content')).width
43
+ if (window.matchMedia('(max-width: 410px)').matches) {
44
+ this.$refs.codeIframe && (this.$refs.codeIframe.style.maxWidth = contentWidth)
45
+ }
46
+ },
47
+ onClick(index) {
48
+ this.activeIndex = index
49
+ },
50
+ createQRCodeSVG(h, style) {
51
+ if (this.appRedirectSrc) {
52
+ return h(
53
+ 'a',
54
+ {
55
+ style: { 'margin-top': '16px', display: 'inline-block', 'text-decoration': 'none' },
56
+ attrs: { href: this.appRedirectSrc, target: '_blank' },
57
+ },
58
+ [
59
+ h('Popover', {
60
+ on: {
61
+ show: () => {
62
+ if (this.appRedirectSrc) {
63
+ if (!this.qrCodeImage.src) {
64
+ import('qr-code-with-logo').then(({ default: QrCodeWithLogo }) => {
65
+ QrCodeWithLogo.toImage({
66
+ image: this.qrCodeImage,
67
+ content: this.appRedirectSrc,
68
+ width: 256,
69
+ nodeQrCodeOptions: {
70
+ margin: 2,
71
+ },
72
+ })
73
+ })
74
+ }
75
+ }
76
+ },
77
+ },
78
+ scopedSlots: {
79
+ reference: props =>
80
+ h(
81
+ 'div',
82
+ {
83
+ class: 'qr-code-button',
84
+ style: {
85
+ display: 'flex',
86
+ 'justify-content': 'center',
87
+ 'align-items': 'center',
88
+ background: '#f7f8f9',
89
+ color: '#666',
90
+ padding: '0 6px',
91
+ 'border-radius': '16px',
92
+ 'font-size': '14px',
93
+ },
94
+ },
95
+ [
96
+ h(
97
+ 'svg',
98
+ {
99
+ class: 'app-redirect-icon',
100
+ style: {
101
+ width: '26px',
102
+ height: '26px',
103
+ },
104
+ attrs: {
105
+ t: Date.now(),
106
+ viewBox: '0 0 1024 1024',
107
+ version: '1.1',
108
+ xmlns: 'http://www.w3.org/2000/svg',
109
+ },
110
+ },
111
+ [
112
+ h('path', {
113
+ attrs: {
114
+ d: qrCodeLogoD,
115
+ fill: '#aaa',
116
+ },
117
+ }),
118
+ ]
119
+ ),
120
+ h('span', null, ' 扫码体验（手机浏览器跳转到App直达页）'),
121
+ ]
122
+ ),
123
+ default: props =>
124
+ h(
125
+ 'div',
126
+ {
127
+ style: {
128
+ display: 'flex',
129
+ width: '150px',
130
+ height: '170px',
131
+ 'flex-direction': 'column',
132
+ 'justify-content': 'center',
133
+ 'align-items': 'center',
134
+ },
135
+ },
136
+ [
137
+ h('img', {
138
+ class: this.qrCodeImageClass,
139
+ style: {
140
+ width: '150px',
141
+ height: '150px',
142
+ 'max-width': 'unset !important',
143
+ },
144
+ }),
145
+ h('span', { style: { 'font-weight': 'bold' } }, '扫码体验'),
146
+ ]
147
+ ),
148
+ },
149
+ }),
150
+ ]
151
+ )
152
+ }
153
+ },
154
+ wrapHeader(h, node) {
155
+ let headerDom = []
156
+ node.forEach((v, index) => {
157
+ headerDom.push(
158
+ h(
159
+ 'p',
160
+ {
161
+ class: `pages-tabs-header-text ${this.activeIndex === index ? 'pages-tabs--active' : ''}`,
162
+ on: {
163
+ click: e => {
164
+ this.onClick(index)
165
+ },
166
+ },
167
+ },
168
+ v.title
169
+ )
170
+ )
171
+ })
172
+ return this.renderDom(
173
+ h,
174
+ h('div', { class: 'page-tabs' }, [
175
+ h('div', { class: 'pages-tabs-header' }, headerDom),
176
+ h('div', { class: 'page-snippet-code', key: this.activeIndex }, [node[this.activeIndex].node]),
177
+ ])
178
+ )
179
+ },
180
+ renderDom(h, node) {
181
+ return h('div', { class: 'page-runtime', style: { position: 'relative' } }, [
182
+ h('div', { class: 'page-snippet', style: { height: this.src ? '667px' : 'auto' } }, [node]),
54
183
  h('div', { class: 'code-content', style: { display: this.src ? 'block' : 'none' } }, [
55
184
  h('iframe', {
56
185
  class: 'code-iframe',
@@ -63,45 +192,63 @@ export default {
63
192
  }),
64
193
  ]),
65
194
  ])
66
- }
67
- },
68
- render(h){
69
- const columns = this.$slots.default || []
70
- let boxObj = []
71
- let realDom = []
72
- columns.forEach((v, i) => {
73
- if (v.tag && v.children) {
74
- realDom.push(v)
75
- }
76
- })
77
- realDom.forEach((vnode, index) => {
78
- let code = vnode.children[0]
79
- if (vnode.tag === 'div' && code.tag === 'pre') {
80
- let i = index - 1
81
- if (i >= 0) {
82
- let textDom = realDom[i]
83
- if (textDom.tag === 'blockquote') {
84
- let text = textDom.children[0]
85
- let p = text.children[0]
86
- boxObj.push({
87
- title: p.text ? p.text : 'title',
88
- node: vnode
89
- })
90
- }
195
+ },
196
+ },
197
+ render(h) {
198
+ const columns = this.$slots.default || []
199
+ let boxObj = []
200
+ let realDom = []
201
+ columns.forEach((v, i) => {
202
+ if (v.tag && v.children) {
203
+ realDom.push(v)
204
+ }
205
+ })
206
+ for (let index = 0; index < realDom.length; index++) {
207
+ const vnode = realDom[index]
208
+ let code = vnode.children[0]
209
+
210
+ if (vnode.tag === 'blockquote' && code.tag === 'p' && this.firstRender) {
211
+ const pFirstChild = code.children[0]
212
+ if (pFirstChild) {
213
+ const text = pFirstChild.text
214
+ if (text && text.trim().indexOf(appRedirectKeyword) === 0) {
215
+ this.appRedirectSrc = text.trim().split(' ')[1] || ''
216
+ realDom.splice(index, 1)
217
+ this.$slots.default.splice(index, 1)
218
+ index--
219
+ continue
220
+ }
221
+ }
222
+ }
91
223
 
92
- }
93
- }
94
- })
95
- if (boxObj.length > 0) {
96
- return h('div', null, [this.createdDom(h, boxObj)])
97
- } else {
98
- if (this.src) {
99
- return this.renderDom(h, this.$slots.default)
100
- } else {
101
- return h('div', null, this.$slots.default)
102
- }
103
- }
104
- }
224
+ if (vnode.tag === 'div' && code.tag === 'pre') {
225
+ let i = index - 1
226
+ if (i >= 0) {
227
+ let textDom = realDom[i]
228
+ if (textDom.tag === 'blockquote') {
229
+ let text = textDom.children[0]
230
+ let p = text.children[0]
231
+ boxObj.push({
232
+ title: p.text ? p.text : 'title',
233
+ node: vnode,
234
+ })
235
+ }
236
+ }
237
+ }
238
+ }
239
+ this.firstRender = false
240
+ const appRedirectQrCode = this.createQRCodeSVG(h)
241
+ if (boxObj.length > 0) {
242
+ return h('div', null, [appRedirectQrCode, this.wrapHeader(h, boxObj)])
243
+ } else {
244
+ console.log('this.src :>> ', this.src)
245
+ if (this.src) {
246
+ return h('div', null, [appRedirectQrCode, this.renderDom(h, this.$slots.default)])
247
+ } else {
248
+ return h('div', null, [appRedirectQrCode, this.$slots.default])
249
+ }
250
+ }
251
+ },
105
252
  }
106
253
  </script>
107
254
 
package/global-components/Popover.vue CHANGED
@@ -1,7 +1,9 @@
1
1
  <script setup>
2
- import { ref, useSlots } from 'vue'
2
+ import { ref, useSlots, defineEmits } from 'vue'
3
3
  import { getNavbarHeight } from '../util'
4
4
 
5
+ const emit = defineEmits(['show', 'hide'])
6
+
5
7
  const props = defineProps({
6
8
  table: String
7
9
  })
@@ -21,10 +23,12 @@ const mouseEnter = (e) => {
21
23
  width
22
24
  }
23
25
  infoHover.value = true
26
+ emit('show')
24
27
  }
25
28
 
26
29
  const mouseLeave = (e) => {
27
30
  infoHover.value = false
31
+ emit('hide')
28
32
  }
29
33
 
30
34
  const vPopover = {
@@ -109,7 +113,7 @@ const vPopover = {
109
113
  .popover-content-wrapper {
110
114
  position: absolute;
111
115
  background-color: #fff;
112
- z-index: 1;
116
+ z-index: 11;
113
117
  border-radius: 5px;
114
118
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
115
119
  transition: opacity .1s cubic-bezier(0.57, 0.85, 0.85, 0.57);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vuepress-theme-uniapp-official",
3
- "version": "1.4.26",
3
+ "version": "1.4.28",
4
4
  "description": "uni-app official website theme for vuepress",
5
5
  "main": "index.js",
6
6
  "repository": {
@@ -38,14 +38,15 @@
38
38
  "@vuepress/plugin-back-to-top": "^1.9.5",
39
39
  "algoliasearch": "^4.13.1",
40
40
  "clipboard": "^2.0.11",
41
+ "markdown-it-attrs": "^4.1.6",
42
+ "markdown-it-raw-table": "^1.0.0",
43
+ "markdown-it-task-lists": "^2.1.1",
44
+ "qr-code-with-logo": "^1.1.0",
41
45
  "vuepress-plugin-check-md2": "^1.0.5",
42
46
  "vuepress-plugin-expandable-row": "^1.0.9",
43
47
  "vuepress-plugin-juejin-style-copy": "^1.0.4",
44
48
  "vuepress-plugin-mermaidjs": "1.9.1",
45
49
  "vuepress-plugin-named-chunks": "^1.1.4",
46
- "vuepress-plugin-zooming": "^1.1.8",
47
- "markdown-it-attrs": "^4.1.6",
48
- "markdown-it-raw-table": "^1.0.0",
49
- "markdown-it-task-lists": "^2.1.1"
50
+ "vuepress-plugin-zooming": "^1.1.8"
50
51
  }
51
52
  }