first commit
This commit is contained in:
编码猿
1
vant/packages/vant-cli/site/desktop/components/.pydio
Normal file
1
vant/packages/vant-cli/site/desktop/components/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
aee38061-e7df-40fa-b330-e3c710239aa2
|
||||
32
vant/packages/vant-cli/site/desktop/components/Container.vue
Normal file
32
vant/packages/vant-cli/site/desktop/components/Container.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-doc-container van-doc-row"
|
||||
:class="{ 'van-doc-container--with-simulator': hasSimulator }"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-doc-container',
|
||||
|
||||
props: {
|
||||
hasSimulator: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-container {
|
||||
box-sizing: border-box;
|
||||
padding-left: @van-doc-nav-width;
|
||||
overflow: hidden;
|
||||
|
||||
&--with-simulator {
|
||||
padding-right: @van-doc-simulator-width + @van-doc-padding;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
238
vant/packages/vant-cli/site/desktop/components/Content.vue
Normal file
238
vant/packages/vant-cli/site/desktop/components/Content.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div :class="['van-doc-content', `van-doc-content--${currentPage}`]">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-doc-content',
|
||||
|
||||
computed: {
|
||||
currentPage() {
|
||||
const { path } = this.$route;
|
||||
if (path) {
|
||||
return path.split('/').slice(-1)[0];
|
||||
}
|
||||
return this.$route.name;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-content {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0 0 75px;
|
||||
|
||||
.card {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: @van-doc-border-radius;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 1px;
|
||||
color: @van-doc-green;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: @van-doc-black;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
&[id] {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 30px;
|
||||
font-size: 30px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 45px 0 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 24px 0 12px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 24px 0 12px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @van-doc-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
color: @van-doc-text-color;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid @van-doc-code-background-color;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
|
||||
// version tag
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 2px 6px;
|
||||
color: @van-doc-blue;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
background-color: fade(@van-doc-blue, 10%);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
color: @van-doc-green;
|
||||
font-size: 12.5px;
|
||||
font-family: @van-doc-code-font-family;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
position: relative;
|
||||
margin: 5px 0 5px 10px;
|
||||
padding-left: 15px;
|
||||
color: @van-doc-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid @van-doc-dark-grey;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 30px 0;
|
||||
border: 0 none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
p > code,
|
||||
li > code,
|
||||
table code {
|
||||
display: inline;
|
||||
margin: 2px 3px;
|
||||
padding: 2px 5px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
word-break: keep-all;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
p > code {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 20px 0 0;
|
||||
padding: 16px;
|
||||
color: rgba(52, 73, 94, 0.8);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
background-color: #ecf9ff;
|
||||
border-radius: @van-doc-border-radius;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
border-radius: @van-doc-border-radius;
|
||||
}
|
||||
|
||||
&--changelog {
|
||||
strong {
|
||||
display: block;
|
||||
margin: 24px 0 12px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
+ p code {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
273
vant/packages/vant-cli/site/desktop/components/Header.vue
Normal file
273
vant/packages/vant-cli/site/desktop/components/Header.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="van-doc-header">
|
||||
<div class="van-doc-row">
|
||||
<div class="van-doc-header__top">
|
||||
<a class="van-doc-header__logo">
|
||||
<img :src="config.logo" />
|
||||
<span>{{ config.title }}</span>
|
||||
</a>
|
||||
|
||||
<search-input
|
||||
v-if="searchConfig"
|
||||
:lang="lang"
|
||||
:search-config="searchConfig"
|
||||
/>
|
||||
|
||||
<ul class="van-doc-header__top-nav">
|
||||
<li v-for="item in config.links" class="van-doc-header__top-nav-item">
|
||||
<a
|
||||
class="van-doc-header__logo-link"
|
||||
target="_blank"
|
||||
:href="item.url"
|
||||
>
|
||||
<img :src="item.logo" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
ref="version"
|
||||
v-if="versions"
|
||||
class="van-doc-header__top-nav-item"
|
||||
>
|
||||
<span
|
||||
class="van-doc-header__cube van-doc-header__version"
|
||||
@click="toggleVersionPop"
|
||||
>
|
||||
{{ versions[0].label }}
|
||||
<transition name="van-doc-dropdown">
|
||||
<div v-if="showVersionPop" class="van-doc-header__version-pop">
|
||||
<div
|
||||
v-for="item in versions"
|
||||
class="van-doc-header__version-pop-item"
|
||||
@click="onSwitchVersion(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="langLabel && langLink" class="van-doc-header__top-nav-item">
|
||||
<a class="van-doc-header__cube" :href="langLink">{{ langLabel }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchInput from './SearchInput';
|
||||
|
||||
export default {
|
||||
name: 'van-doc-header',
|
||||
|
||||
components: {
|
||||
SearchInput,
|
||||
},
|
||||
|
||||
props: {
|
||||
lang: String,
|
||||
config: Object,
|
||||
versions: Array,
|
||||
langConfigs: Array,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showVersionPop: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
langLink() {
|
||||
return `#${this.$route.path.replace(this.lang, this.anotherLang.lang)}`;
|
||||
},
|
||||
|
||||
langLabel() {
|
||||
return this.anotherLang.label;
|
||||
},
|
||||
|
||||
anotherLang() {
|
||||
const items = this.langConfigs.filter(item => item.lang !== this.lang);
|
||||
if (items.length) {
|
||||
return items[0];
|
||||
}
|
||||
|
||||
return {};
|
||||
},
|
||||
|
||||
searchConfig() {
|
||||
return this.config.searchConfig;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleVersionPop() {
|
||||
const val = !this.showVersionPop;
|
||||
|
||||
const action = val ? 'add' : 'remove';
|
||||
document.body[`${action}EventListener`](
|
||||
'click',
|
||||
this.checkHideVersionPop
|
||||
);
|
||||
|
||||
this.showVersionPop = val;
|
||||
},
|
||||
|
||||
checkHideVersionPop(event) {
|
||||
if (!this.$refs.version.contains(event.target)) {
|
||||
this.showVersionPop = false;
|
||||
}
|
||||
},
|
||||
|
||||
onSwitchLang(lang) {
|
||||
this.$router.push(this.$route.path.replace(lang.from, lang.to));
|
||||
},
|
||||
|
||||
onSwitchVersion(version) {
|
||||
if (version.link) {
|
||||
location.href = version.link;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-header {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @van-doc-header-top-height;
|
||||
padding: 0 @van-doc-padding;
|
||||
line-height: @van-doc-header-top-height;
|
||||
background-color: #001938;
|
||||
|
||||
&-nav {
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
text-align: right;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cube {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&__version {
|
||||
padding-right: 20px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
transform: rotate(-45deg);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-pop {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
color: #333;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border-radius: @van-doc-border-radius;
|
||||
box-shadow: 0 4px 12px #ebedf0;
|
||||
transform-origin: top;
|
||||
transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&-item {
|
||||
padding-left: 12px;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @van-doc-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: block;
|
||||
|
||||
img,
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo-link {
|
||||
img {
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-dropdown {
|
||||
&-enter,
|
||||
&-leave-active {
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
vant/packages/vant-cli/site/desktop/components/Nav.vue
Normal file
158
vant/packages/vant-cli/site/desktop/components/Nav.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="van-doc-nav" :style="style">
|
||||
<div
|
||||
v-for="(group, index) in navConfig"
|
||||
class="van-doc-nav__group"
|
||||
:key="index"
|
||||
>
|
||||
<div class="van-doc-nav__title">
|
||||
{{ group.title }}
|
||||
</div>
|
||||
<template v-if="group.items">
|
||||
<div
|
||||
v-for="(item, groupIndex) in group.items"
|
||||
:key="groupIndex"
|
||||
class="van-doc-nav__item"
|
||||
>
|
||||
<van-doc-nav-link :item="item" :base="base" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from './NavLink';
|
||||
|
||||
export default {
|
||||
name: 'van-doc-nav',
|
||||
|
||||
components: {
|
||||
[NavLink.name]: NavLink,
|
||||
},
|
||||
|
||||
props: {
|
||||
lang: String,
|
||||
navConfig: Array,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
top: 60,
|
||||
bottom: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
top: this.top + 'px',
|
||||
bottom: this.bottom + 'px',
|
||||
};
|
||||
},
|
||||
|
||||
base() {
|
||||
return this.lang ? `/${this.lang}/` : '/';
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('scroll', this.onScroll);
|
||||
this.onScroll();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onScroll() {
|
||||
const { pageYOffset: offset } = window;
|
||||
this.top = Math.max(0, 60 - offset);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-nav {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
min-width: @van-doc-nav-width;
|
||||
max-width: @van-doc-nav-width;
|
||||
padding: 24px 0 72px;
|
||||
overflow-y: scroll;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
|
||||
@media (min-width: @van-doc-row-max-width) {
|
||||
left: 50%;
|
||||
margin-left: -(@van-doc-row-max-width / 2);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(69, 90, 100, 0.2);
|
||||
}
|
||||
|
||||
&__group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 8px 0 8px @van-doc-padding;
|
||||
color: #455a64;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 8px 0 8px @van-doc-padding;
|
||||
color: #455a64;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: @van-doc-green;
|
||||
}
|
||||
|
||||
&.active {
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
&__item {
|
||||
a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
vant/packages/vant-cli/site/desktop/components/NavLink.vue
Normal file
62
vant/packages/vant-cli/site/desktop/components/NavLink.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<router-link
|
||||
v-if="item.path"
|
||||
:class="{ active }"
|
||||
:to="path"
|
||||
v-html="itemName"
|
||||
/>
|
||||
<a v-else-if="item.link" :href="item.link" v-html="itemName" />
|
||||
<a v-else v-html="itemName" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-doc-nav-link',
|
||||
|
||||
props: {
|
||||
base: String,
|
||||
item: Object,
|
||||
},
|
||||
|
||||
computed: {
|
||||
itemName() {
|
||||
const name = (this.item.title || this.item.name).split(' ');
|
||||
return `${name[0]} <span>${name.slice(1).join(' ')}</span>`;
|
||||
},
|
||||
|
||||
path() {
|
||||
return `${this.base}${this.item.path}`;
|
||||
},
|
||||
|
||||
active() {
|
||||
if (this.$route.path === this.path) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.item.path === 'home') {
|
||||
return this.$route.path === this.base;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
active() {
|
||||
this.scrollIntoView();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.scrollIntoView();
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrollIntoView() {
|
||||
if (this.active && this.$el && this.$el.scrollIntoViewIfNeeded) {
|
||||
this.$el.scrollIntoViewIfNeeded();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
101
vant/packages/vant-cli/site/desktop/components/SearchInput.vue
Normal file
101
vant/packages/vant-cli/site/desktop/components/SearchInput.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<input class="van-doc-search" :placeholder="placeholder" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-doc-search',
|
||||
|
||||
props: {
|
||||
lang: String,
|
||||
searchConfig: Object,
|
||||
},
|
||||
|
||||
computed: {
|
||||
placeholder() {
|
||||
return this.searchConfig.placeholder || 'Search...';
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
lang(lang) {
|
||||
if (this.docsearchInstance) {
|
||||
this.docsearchInstance.algoliaOptions.facetFilters = [`lang:${lang}`];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.searchConfig) {
|
||||
this.docsearchInstance = window.docsearch({
|
||||
...this.searchConfig,
|
||||
inputSelector: '.van-doc-search',
|
||||
algoliaOptions: {
|
||||
facetFilters: [`lang:${this.lang}`],
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-search {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
margin-left: 140px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-dropdown-menu {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: @van-doc-blue;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--text {
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
box-shadow: inset 0 -1px 0 0 @van-doc-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
.ds-dropdown-menu [class^='ds-dataset-'] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ds-dropdown-menu {
|
||||
top: 80% !important;
|
||||
box-shadow: 0 4px 12px #ebedf0;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
vant/packages/vant-cli/site/desktop/components/Simulator.vue
Normal file
82
vant/packages/vant-cli/site/desktop/components/Simulator.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div :class="['van-doc-simulator', { 'van-doc-simulator-fixed': isFixed }]">
|
||||
<iframe ref="iframe" :src="src" :style="simulatorStyle" frameborder="0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-doc-simulator',
|
||||
|
||||
props: {
|
||||
src: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
scrollTop: window.scrollY,
|
||||
windowHeight: window.innerHeight,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
isFixed() {
|
||||
return this.scrollTop > 60;
|
||||
},
|
||||
|
||||
simulatorStyle() {
|
||||
const height = Math.min(640, this.windowHeight - 90);
|
||||
return {
|
||||
height: height + 'px',
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.scrollTop = window.scrollY;
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
this.windowHeight = window.innerHeight;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-simulator {
|
||||
position: absolute;
|
||||
top: @van-doc-padding + @van-doc-header-top-height;
|
||||
right: @van-doc-padding;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
width: @van-doc-simulator-width;
|
||||
min-width: @van-doc-simulator-width;
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border-radius: @van-doc-border-radius;
|
||||
box-shadow: #ebedf0 0 4px 12px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
right: auto;
|
||||
left: 750px;
|
||||
}
|
||||
|
||||
@media (min-width: @van-doc-row-max-width) {
|
||||
right: 50%;
|
||||
margin-right: -@van-doc-row-max-width / 2 + 40px;
|
||||
}
|
||||
|
||||
&-fixed {
|
||||
position: fixed;
|
||||
top: @van-doc-padding;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
vant/packages/vant-cli/site/desktop/components/index.vue
Normal file
108
vant/packages/vant-cli/site/desktop/components/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="van-doc">
|
||||
<doc-header
|
||||
:lang="lang"
|
||||
:config="config"
|
||||
:versions="versions"
|
||||
:lang-configs="langConfigs"
|
||||
@switch-version="$emit('switch-version', $event)"
|
||||
/>
|
||||
<doc-nav :lang="lang" :nav-config="config.nav" />
|
||||
<doc-container :has-simulator="!!simulator">
|
||||
<doc-content>
|
||||
<slot />
|
||||
</doc-content>
|
||||
</doc-container>
|
||||
<doc-simulator v-if="simulator" :src="simulator" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocNav from './Nav';
|
||||
import DocHeader from './Header';
|
||||
import DocContent from './Content';
|
||||
import DocContainer from './Container';
|
||||
import DocSimulator from './Simulator';
|
||||
|
||||
export default {
|
||||
name: 'van-doc',
|
||||
|
||||
components: {
|
||||
DocNav,
|
||||
DocHeader,
|
||||
DocContent,
|
||||
DocContainer,
|
||||
DocSimulator,
|
||||
},
|
||||
|
||||
props: {
|
||||
lang: String,
|
||||
versions: Array,
|
||||
simulator: String,
|
||||
langConfigs: Array,
|
||||
config: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
base: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
// eslint-disable-next-line
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setNav();
|
||||
this.keyboardHandler();
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
const { nav } = this.config;
|
||||
const items = nav.reduce((list, item) => list.concat(item.items), []);
|
||||
const currentPath = this.$route.path.split('/').pop();
|
||||
|
||||
let currentIndex;
|
||||
for (let i = 0, len = items.length; i < len; i++) {
|
||||
if (items[i].path === currentPath) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.leftNav = items[currentIndex - 1];
|
||||
this.rightNav = items[currentIndex + 1];
|
||||
},
|
||||
|
||||
keyboardNav(direction) {
|
||||
const nav = direction === 'prev' ? this.leftNav : this.rightNav;
|
||||
if (nav.path) {
|
||||
this.$router.push(this.base + nav.path);
|
||||
}
|
||||
},
|
||||
|
||||
keyboardHandler() {
|
||||
window.addEventListener('keyup', event => {
|
||||
switch (event.keyCode) {
|
||||
case 37: // left
|
||||
this.keyboardNav('prev');
|
||||
break;
|
||||
case 39: // right
|
||||
this.keyboardNav('next');
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
</style>
|
||||
Reference in New Issue
Block a user