Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d9e1102

Browse files
author
savoygu
committed
Merge branch 'master' of github.com:savoygu/vue-demonstration
2 parents bf8e134 + cec1a7e commit d9e1102

File tree

5 files changed

+87
-33
lines changed

5 files changed

+87
-33
lines changed

‎example/src/App.vue‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,14 @@
246246
通过 <code>slot="table"</code> 添加表格, 通过 <code>class="vd-demo__table"</code> 设置表格样式,还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
247247
</template>
248248
</vue-demonstration>
249+
<vue-demonstration
250+
anchor="zhan-shi-code"
251+
:show-content="false"
252+
:code="sourcecodeK">
253+
<template slot="title">
254+
展示代码 <i class="vd-demo__new">(1.0.2 新增)</i>
255+
</template>
256+
</vue-demonstration>
249257
<vue-demonstration
250258
anchor="attributes"
251259
title="Attributes"
@@ -261,7 +269,7 @@
261269
</thead>
262270
<tbody>
263271
<tr>
264-
<td>multiple <iclass="vd-demo__new">(特殊标识)</i></td>
272+
<td>multiple</td>
265273
<td>是否同时展示多个示例</td>
266274
<td>boolean</td>
267275
<td>—</td>
@@ -273,7 +281,15 @@
273281
<td>string</td>
274282
<td>—</td>
275283
<td>—</td>
276-
</tr><tr>
284+
</tr>
285+
<tr>
286+
<td>code<i class="vd-demo__new">(1.0.2 新增)</i></td>
287+
<td>要展示的代码片段</td>
288+
<td>string</td>
289+
<td>—</td>
290+
<td>—</td>
291+
</tr>
292+
<tr>
277293
<td>tag</td>
278294
<td>标题标签</td>
279295
<td>string</td>
@@ -329,7 +345,11 @@
329345
<th>参数</th>
330346
<th>说明</th>
331347
</thead>
332-
<tbody>
348+
<tbody>
349+
<tr>
350+
<td>title <i class="vd-demo__new">(1.0.1 新增)</i></td>
351+
<td>标题</td>
352+
</tr>
333353
<tr>
334354
<td>description</td>
335355
<td>标题描述</td>
@@ -365,7 +385,8 @@
365385
sourcecodeG,
366386
sourcecodeH,
367387
sourcecodeI,
368-
sourcecodeJ
388+
sourcecodeJ,
389+
sourcecodeK
369390
} from './template'
370391
371392
export default {
@@ -381,7 +402,8 @@
381402
sourcecodeG,
382403
sourcecodeH,
383404
sourcecodeI,
384-
sourcecodeJ
405+
sourcecodeJ,
406+
sourcecodeK
385407
}
386408
}
387409
}

‎example/src/template.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,4 +261,6 @@ export const sourcecodeJ = `<vue-demonstration
261261
<template slot="explanation">
262262
通过 <code>slot="table"</code> 添加表格, 通过 <code>class="vd-demo__table"</code> 设置表格样式,还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
263263
</template>
264-
</vue-demonstration>`
264+
</vue-demonstration>`
265+
266+
export const sourcecodeK = `import VueDemonstration from 'vue-demonstration'`

‎lib/vue-demonstration.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-demonstration",
33
"description": "Vue-based element docs's demo code style component, asily add examples to your vue project to show your code.",
4-
"version": "1.0.0",
4+
"version": "1.0.4",
55
"author": "savoygu",
66
"main": "lib/vue-demonstration.js",
77
"files": [

‎src/components/Demo.vue‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@
33
<vd-demo-title
44
:title="title"
55
:anchor="anchor"
6-
:tag="tag"></vd-demo-title>
6+
:tag="tag"
7+
:has-slot="!!$slots.title"></vd-demo-title>
78
<vd-demo-description
8-
:description="description"
9-
:has-slot="!!$slots.description">
9+
:description="description"
10+
:has-slot="!!$slots.description">
1011
</vd-demo-description>
12+
<div class="vd-demo__code" v-if="code">
13+
<pre v-highlightjs="code"><code class="html language-javascript"></code></pre>
14+
</div>
15+
<slot></slot>
1116
<slot name="table"></slot>
1217
<div class="vd-demo__content" v-if="showContent">
1318
<div class="vd-demo__source" :style="{padding: multiple ? '0' : '24px'}" ref="source">
@@ -45,6 +50,7 @@
4550
props: {
4651
multiple: Boolean,
4752
highlight: String,
53+
code: String,
4854
tag: {
4955
type: String,
5056
default: 'h3'
@@ -53,8 +59,14 @@
5359
type: String,
5460
default: ''
5561
},
56-
title: String,
57-
description: String,
62+
title: {
63+
type: String,
64+
default: ''
65+
},
66+
description: {
67+
type: String,
68+
default: ''
69+
},
5870
showContent: {
5971
type: Boolean,
6072
default: true
@@ -74,9 +86,9 @@
7486
if (source) {
7587
let blocks = source.querySelectorAll('.vd-demo__block-1')
7688
if (
77-
blocks.length
78-
&& blocks.length % 2 === 1
79-
&& blocks.length - 2 > 0
89+
blocks.length
90+
&& blocks.length % 2 === 1
91+
&& blocks.length - 2 > 0
8092
) {
8193
blocks[blocks.length - 2].style.borderBottom = '1px solid #eff2f6'
8294
}
@@ -101,28 +113,29 @@
101113
props: {
102114
title: String,
103115
anchor: String,
104-
tag: String
116+
tag: String,
117+
hasSlot: Boolean
105118
},
106119
render (h) {
107-
if (this.title) {
120+
if (this.title||this.hasSlot) {
108121
return h(this.tag, {
122+
attrs: {
123+
id: this.anchor
124+
}
125+
},
126+
[
127+
h('a', {
109128
attrs: {
110-
id: this.anchor
129+
href: '#' + this.anchor,
130+
'aria-hidden': true,
131+
class: 'header-anchor'
132+
},
133+
domProps: {
134+
innerHTML: ''
111135
}
112-
},
113-
[
114-
h('a', {
115-
attrs: {
116-
href: '#' + this.anchor,
117-
'aria-hidden': true,
118-
class: 'header-anchor'
119-
},
120-
domProps: {
121-
innerHTML: ''
122-
}
123-
}),
124-
this.title
125-
])
136+
}),
137+
this.title ? this.title : this.$parent.$slots.title
138+
])
126139
}
127140
return ''
128141
}
@@ -149,13 +162,15 @@
149162
}
150163
}, this.$parent.$slots.description)
151164
}
165+
return ''
152166
}
153167
}
154168
}
155169
}
156170
</script>
157171
<style lang="less" rel="stylesheet/less">
158172
@import "../styles/less/style";
173+
159174
.vd-demo {
160175
width: 1000px;
161176
margin: 0 auto;
@@ -309,6 +324,21 @@
309324
line-height: 18px;
310325
}
311326
}
327+
&__code {
328+
pre {
329+
.hljs {
330+
line-height: 1.8;
331+
font-family: Menlo, Monaco, Consolas, Courier, monospace;
332+
font-size: 12px;
333+
padding: 18px 24px;
334+
background-color: #f9fafc;
335+
border: 1px solid #eaeefb;
336+
margin-bottom: 25px;
337+
border-radius: 4px;
338+
-webkit-font-smoothing: auto;
339+
}
340+
}
341+
}
312342
&__highlight {
313343
width: 60%;
314344
border-right: 1px solid #eaeefb;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /