theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.0.3

Browse Source
This commit is contained in:
maplemei
2019-09-25 17:47:38 +08:00
parent 9786701c41
commit 2d26f68640
72 changed files with 3707 additions and 2064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/components/component.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<router-view></router-view>
</template>

240
docs/components/demo-block.vue Executable file
View File

@@ -0,0 +1,240 @@
<template>
<div class="demo-block" :class="[blockClass, { 'hover': hovering }]" @mouseenter="hovering = true" @mouseleave="hovering = false">
<div class="source">
<slot name="source"></slot>
</div>
<div class="meta" ref="meta">
<div class="description" v-if="$slots.default">
<slot></slot>
</div>
<div class="highlight">
<slot name="highlight"></slot>
</div>
</div>
<div class="demo-block-control" ref="control" :class="{ 'is-fixed': fixedControl }" @click="isExpanded = !isExpanded">
<transition name="arrow-slide">
<i :class="[iconClass, { 'hovering': hovering }]"></i>
</transition>
<transition name="text-slide">
<span v-show="hovering">{{ controlText }}</span>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hovering: false,
isExpanded: false,
fixedControl: false,
scrollParent: null
};
},
methods: {
scrollHandler() {
const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
this.fixedControl = bottom > document.documentElement.clientHeight &&
top + 44 <= document.documentElement.clientHeight;
this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
},
removeScrollHandler() {
this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
}
},
computed: {
langConfig() {
return {
"hide-text": "隐藏代码",
"show-text": "显示代码",
}
},
blockClass() {
return `demo-xm-select demo-${ this.$router.currentRoute.path.split('/').pop() }`;
},
iconClass() {
return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
},
controlText() {
return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'];
},
codeArea() {
return this.$el.getElementsByClassName('meta')[0];
},
codeAreaHeight() {
if (this.$el.getElementsByClassName('description').length > 0) {
return this.$el.getElementsByClassName('description')[0].clientHeight +
this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
},
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
if (!val) {
this.fixedControl = false;
this.$refs.control.style.left = '0';
this.removeScrollHandler();
return;
}
setTimeout(() => {
this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
this.scrollHandler();
}, 200);
}
},
mounted() {
this.$nextTick(() => {
let highlight = this.$el.getElementsByClassName('highlight')[0];
if (this.$el.getElementsByClassName('description').length === 0) {
highlight.style.width = '100%';
highlight.borderRight = 'none';
}
});
},
beforeDestroy() {
this.removeScrollHandler();
}
};
</script>
<style lang="less">
.demo-block {
border: solid 1px #ebebeb;
border-radius: 3px;
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;
}
.demo-button {
float: right;
}
.source {
padding: 24px;
}
.meta {
background-color: #fafafa;
border-top: solid 1px #eaeefb;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 20px;
box-sizing: border-box;
border: solid 1px #ebebeb;
border-radius: 3px;
font-size: 14px;
line-height: 22px;
color: #666;
word-break: break-word;
margin: 10px;
background-color: #fff;
p {
margin: 0;
line-height: 26px;
}
code {
color: #5e6d82;
background-color: #e6effb;
margin: 0 4px;
display: inline-block;
padding: 1px 5px;
font-size: 12px;
border-radius: 3px;
height: 18px;
line-height: 18px;
}
}
.highlight {
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: 44px;
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;
position: relative;
&.is-fixed {
position: fixed;
bottom: 0;
width: 868px;
}
i {
font-size: 16px;
line-height: 44px;
transition: .3s;
&.hovering {
transform: translateX(-40px);
}
}
>span {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 44px;
transition: .3s;
display: inline-block;
}
&:hover {
color: #409EFF;
background-color: #f9fafc;
}
& .text-slide-enter,
& .text-slide-leave-active {
opacity: 0;
transform: translateX(10px);
}
.control-button {
line-height: 26px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
padding-left: 5px;
padding-right: 25px;
}
}
}
</style>

325
docs/components/header.vue Executable file
View File

@@ -0,0 +1,325 @@
<template>
<div class="headerWrapper">
<header class="header" ref="header">
<div class="container">
<h1>
<router-link :to="`/`">
<!-- logo -->
<slot>
<!-- <img src="../assets/images/element-logo.svg" alt="element-logo" class="nav-logo"> -->
<!-- <img src="../assets/images/element-logo-small.svg" alt="element-logo" class="nav-logo-small"> -->
xm-select
</slot>
</router-link>
</h1>
<!-- nav -->
<ul class="nav">
<li class="nav-item">
<router-link active-class="active" :to="`/`">使用手册</router-link>
</li>
<li class="nav-item">
<a href='https://gitee.com/maplemei/xm-select' target="_blank" style="opacity: 1; display: flex; margin-top: 20px;">
<img src='https://gitee.com/maplemei/xm-select/widgets/widget_6.svg' alt='Fork me on Gitee'></img>
</a>
</li>
</ul>
</div>
</header>
</div>
</template>
<script>
export default {
data() {
return {
active: '',
};
},
};
</script>
<style lang="less" scoped>
.headerWrapper {
height: 80px;
}
.header {
height: 80px;
background-color: #fff;
color: #fff;
top: 0;
left: 0;
width: 100%;
line-height: 80px;
z-index: 100;
position: relative;
.container {
height: 100%;
box-sizing: border-box;
border-bottom: 1px solid #DCDFE6;
}
.nav-lang-spe {
color: #888;
}
h1 {
margin: 0;
float: left;
font-size: 32px;
font-weight: normal;
a {
color: #333;
text-decoration: none;
display: block;
}
span {
font-size: 12px;
display: inline-block;
width: 34px;
height: 18px;
border: 1px solid rgba(255, 255, 255, .5);
text-align: center;
line-height: 18px;
vertical-align: middle;
margin-left: 10px;
border-radius: 3px;
}
}
.nav {
float: right;
height: 100%;
line-height: 80px;
background: transparent;
padding: 0;
margin: 0;
&::before,
&::after {
display: table;
content: "";
}
&::after {
clear: both;
}
}
.nav-gap {
position: relative;
width: 1px;
height: 80px;
padding: 0 20px;
&::before {
content: '';
position: absolute;
top: calc(50% - 8px);
width: 1px;
height: 16px;
background: #ebebeb;
}
}
.nav-logo,
.nav-logo-small {
vertical-align: sub;
}
.nav-logo-small {
display: none;
}
.nav-item {
margin: 0;
float: left;
list-style: none;
position: relative;
cursor: pointer;
&.nav-algolia-search {
cursor: default;
}
&.lang-item,
&:last-child {
cursor: default;
margin-left: 34px;
span {
opacity: .8;
}
.nav-lang {
cursor: pointer;
display: inline-block;
height: 100%;
color: #888;
&:hover {
color: #409EFF;
}
&.active {
font-weight: bold;
color: #409EFF;
}
}
}
a {
text-decoration: none;
color: #1989FA;
opacity: 0.5;
display: block;
padding: 0 22px;
&.active,
&:hover {
opacity: 1;
}
&.active::after {
content: '';
display: inline-block;
position: absolute;
bottom: 0;
left: calc(50% - 15px);
width: 30px;
height: 2px;
background: #409EFF;
}
}
}
}
.nav-dropdown {
margin-bottom: 6px;
padding-left: 18px;
width: 100%;
span {
display: block;
width: 100%;
font-size: 16px;
color: #888;
line-height: 40px;
transition: .2s;
padding-bottom: 6px;
user-select: none;
&:hover {
cursor: pointer;
}
}
i {
transition: .2s;
font-size: 12px;
color: #979797;
transform: translateY(-2px);
}
.is-active {
span,
i {
color: #409EFF;
}
i {
transform: rotateZ(180deg) translateY(3px);
}
}
&:hover {
span,
i {
color: #409EFF;
}
}
}
.nav-dropdown-list {
width: auto;
}
@media (max-width: 850px) {
.header {
.nav-logo {
display: none;
}
.nav-logo-small {
display: inline-block;
}
.nav-item {
margin-left: 6px;
&.lang-item,
&:last-child {
margin-left: 10px;
}
a {
padding: 0 5px;
}
}
.nav-theme-switch,
.nav-algolia-search {
display: none;
}
}
}
@media (max-width: 700px) {
.header {
.container {
padding: 0 12px;
}
.nav-item {
a {
font-size: 12px;
vertical-align: top;
}
&.lang-item {
height: 100%;
.nav-lang {
display: flex;
align-items: center;
span {
padding-bottom: 0;
}
}
}
}
.nav-dropdown {
padding: 0;
span {
font-size: 12px;
}
}
.nav-gap {
padding: 0 8px;
}
.nav-versions {
display: none;
}
}
}
</style>

234
docs/components/side-nav.vue Executable file
View File

@@ -0,0 +1,234 @@
<template>
<div class="side-nav" @mouseenter="isFade = false" :class="{ 'is-fade': isFade }" :style="navStyle">
<ul>
<li class="nav-item" v-for="(item, key) in data.filter(a => !a.hidden)" :key="key">
<a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
<a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>
<router-link v-if="item.path" active-class="active" :to="base + item.path" exact v-text="item.title || item.name"></router-link>
<ul class="pure-menu-list sub-nav" v-if="item.children">
<li class="nav-item" v-for="(navItem, key) in item.children" :key="key">
<router-link class="" active-class="active" :to="base + navItem.path" exact v-text="navItem.title || navItem.name"></router-link>
</li>
</ul>
<template v-if="item.groups">
<div class="nav-group" v-for="(group, key) in item.groups" :key="key">
<div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
<ul class="pure-menu-list">
<li class="nav-item" v-for="(navItem, key) in group.list" v-show="!navItem.disabled" :key="key">
<router-link active-class="active" :to="base + navItem.path" exact v-text="navItem.title"></router-link>
</li>
</ul>
</div>
</template>
</li>
</ul>
<!--<div id="code-sponsor-widget"></div>-->
</div>
</template>
<script>
export default {
props: {
data: Array,
base: {
type: String,
default: ''
}
},
data() {
return {
highlights: [],
navState: [],
isSmallScreen: false,
isFade: false
};
},
watch: {
'$route.path'() {
this.handlePathChange();
},
isFade(val) {
this.$emit('navFade', val);
}
},
computed: {
navStyle() {
const style = {};
if (this.isSmallScreen) {
style.paddingBottom = '60px';
}
style.opacity = this.isFade ? '0.5' : '1';
return style;
},
},
methods: {
handleResize() {
this.isSmallScreen = document.documentElement.clientWidth < 768;
this.handlePathChange();
},
handlePathChange() {
if (!this.isSmallScreen) {
this.expandAllMenu();
return;
}
this.$nextTick(() => {
this.hideAllMenu();
let activeAnchor = this.$el.querySelector('a.active');
let ul = activeAnchor.parentNode;
while (ul.tagName !== 'UL') {
ul = ul.parentNode;
}
ul.style.height = 'auto';
});
},
hideAllMenu() {
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
ul.style.height = '0';
});
},
expandAllMenu() {
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
ul.style.height = 'auto';
});
},
expandMenu(event) {
if (!this.isSmallScreen) return;
let target = event.currentTarget;
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
this.hideAllMenu();
event.currentTarget.nextElementSibling.style.height = 'auto';
}
},
created() {
this.$on('fadeNav', () => {
this.isFade = true;
});
},
mounted() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
};
</script>
<style lang="less">
.side-nav {
width: 100%;
box-sizing: border-box;
padding-right: 30px;
transition: opacity .3s;
&.is-fade {
transition: opacity 3s;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
>ul>.nav-item>a {
margin-top: 15px;
}
>ul>.nav-item:nth-child(-n + 4)>a {
margin-top: 0;
}
.nav-item {
a {
font-size: 16px;
color: #333;
line-height: 40px;
height: 40px;
margin: 0;
padding: 0;
text-decoration: none;
display: block;
position: relative;
transition: .15s ease-out;
font-weight: bold;
&.active {
color: #409EFF;
}
}
.nav-item {
a {
display: block;
height: 40px;
color: #444;
line-height: 40px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
&:hover,
&.active {
color: #409EFF;
}
}
}
&.sponsors {
&>.sub-nav {
margin-top: -10px;
}
&>a {
color: #777;
font-weight: 300;
font-size: 14px;
}
.nav-item {
display: inline-block;
a {
height: auto;
display: inline-block;
vertical-align: middle;
margin: 8px 12px 12px 0;
img {
width: 42px;
}
}
&:first-child a img {
width: 36px;
}
}
}
}
.nav-group__title {
font-size: 12px;
color: #999;
line-height: 26px;
margin-top: 15px;
}
#code-sponsor-widget {
margin: 0 0 0 -20px;
}
}
.nav-dropdown-list {
width: 120px;
margin-top: -8px;
li {
font-size: 14px;
}
}
</style>