mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
remove demo block
This commit is contained in:
parent
dec2a07ac5
commit
10ed5982f6
@ -126,31 +126,6 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
slugify: slugify,
|
slugify: slugify,
|
||||||
permalink: true,
|
permalink: true,
|
||||||
permalinkBefore: true
|
permalinkBefore: true
|
||||||
}],
|
|
||||||
[require('markdown-it-container'), 'demo', {
|
|
||||||
validate: function(params) {
|
|
||||||
return params.trim().match(/^demo\s*(.*)$/);
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function(tokens, idx) {
|
|
||||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
|
||||||
if (tokens[idx].nesting === 1) {
|
|
||||||
var description = (m && m.length > 1) ? m[1] : '';
|
|
||||||
var content = tokens[idx + 1].content;
|
|
||||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
|
||||||
var script = striptags.fetch(content, 'script');
|
|
||||||
var style = striptags.fetch(content, 'style');
|
|
||||||
var descriptionHTML = description
|
|
||||||
? md.render(description)
|
|
||||||
: '';
|
|
||||||
|
|
||||||
return `<demo-block class="demo-box">
|
|
||||||
<div class="source" slot="source">${html}</div>
|
|
||||||
${descriptionHTML}
|
|
||||||
<div class="highlight" slot="highlight">`;
|
|
||||||
}
|
|
||||||
return '</div></demo-block>\n';
|
|
||||||
}
|
|
||||||
}]
|
}]
|
||||||
],
|
],
|
||||||
preprocess: function(MarkdownIt, source) {
|
preprocess: function(MarkdownIt, source) {
|
||||||
|
@ -1,196 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="demo-block"
|
|
||||||
:class="[blockClass, { 'hover': hovering }]"
|
|
||||||
@mouseenter="hovering = true"
|
|
||||||
@mouseleave="hovering = false">
|
|
||||||
<slot name="source"></slot>
|
|
||||||
<div class="meta">
|
|
||||||
<div class="description">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<slot name="highlight">
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
<div class="demo-block-control" @click="isExpanded = !isExpanded">
|
|
||||||
<span v-show="hovering">{{ controlText }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script type="text/babel">
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
hovering: false,
|
|
||||||
isExpanded: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
blockClass() {
|
|
||||||
return `demo-${this.$route.path.split('/').pop()}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
controlText() {
|
|
||||||
return this.isExpanded ? '隐藏代码' : '显示代码';
|
|
||||||
},
|
|
||||||
|
|
||||||
codeArea() {
|
|
||||||
return this.$el.getElementsByClassName('meta')[0];
|
|
||||||
},
|
|
||||||
|
|
||||||
codeAreaHeight() {
|
|
||||||
if (this.$el.getElementsByClassName('description').length > 0) {
|
|
||||||
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
|
||||||
}
|
|
||||||
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
isExpanded(val) {
|
|
||||||
this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
let highlight = this.$el.getElementsByClassName('highlight')[0];
|
|
||||||
if (this.$el.getElementsByClassName('description').length === 0) {
|
|
||||||
highlight.style.width = '100%';
|
|
||||||
highlight.borderRight = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.demo-block {
|
|
||||||
border: solid 1px #eaeefb;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: .2s;
|
|
||||||
|
|
||||||
&.hover {
|
|
||||||
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-button {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source {
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
background-color: #f9fafc;
|
|
||||||
border-top: solid 1px #eaeefb;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 0;
|
|
||||||
transition: height .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
padding: 18px 24px;
|
|
||||||
width: 40%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-left: solid 1px #eaeefb;
|
|
||||||
float: right;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #5e6d82;
|
|
||||||
word-break: break-word;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
color: #5e6d82;
|
|
||||||
background-color: #e6effb;
|
|
||||||
margin: 0 4px;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
width: 60%;
|
|
||||||
border-right: solid 1px #eaeefb;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code.hljs {
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
max-height: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-block-control {
|
|
||||||
border-top: solid 1px #eaeefb;
|
|
||||||
height: 36px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #fff;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: -1px;
|
|
||||||
color: #d3dce6;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .2s;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 36px;
|
|
||||||
transition: .3s;
|
|
||||||
&.hovering {
|
|
||||||
transform: translateX(-40px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 36px;
|
|
||||||
transition: .3s;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #20a0ff;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .text-slide-enter,
|
|
||||||
& .text-slide-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
x
Reference in New Issue
Block a user