side-nav.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <style>
  2. .side-nav {
  3. width: 100%;
  4. box-sizing: border-box;
  5. padding-right: 30px;
  6. transition: opacity .3s;
  7. &.is-fade {
  8. transition: opacity 3s;
  9. }
  10. li {
  11. list-style: none;
  12. }
  13. ul {
  14. padding: 0;
  15. margin: 0;
  16. overflow: hidden;
  17. }
  18. > ul > .nav-item > a {
  19. margin-top: 15px;
  20. }
  21. > ul > .nav-item:nth-child(-n + 4) > a {
  22. margin-top: 0;
  23. }
  24. .nav-item {
  25. a {
  26. font-size: 16px;
  27. color: #333;
  28. line-height: 40px;
  29. height: 40px;
  30. margin: 0;
  31. padding: 0;
  32. text-decoration: none;
  33. display: block;
  34. position: relative;
  35. transition: .15s ease-out;
  36. font-weight: bold;
  37. &.active {
  38. color: #409EFF;
  39. }
  40. }
  41. .nav-item {
  42. a {
  43. display: block;
  44. height: 40px;
  45. color: #444;
  46. line-height: 40px;
  47. font-size: 14px;
  48. overflow: hidden;
  49. white-space: nowrap;
  50. text-overflow: ellipsis;
  51. font-weight: normal;
  52. &:hover,
  53. &.active {
  54. color: #409EFF;
  55. }
  56. }
  57. }
  58. &.sponsors {
  59. & > .sub-nav {
  60. margin-top: -10px;
  61. }
  62. & > a {
  63. color: #777;
  64. font-weight: 300;
  65. font-size: 14px;
  66. }
  67. .nav-item {
  68. display: inline-block;
  69. a {
  70. height: auto;
  71. display: inline-block;
  72. vertical-align: middle;
  73. margin: 8px 12px 12px 0;
  74. img {
  75. width: 42px;
  76. }
  77. }
  78. &:first-child a img {
  79. width: 36px;
  80. }
  81. }
  82. }
  83. }
  84. .nav-group__title {
  85. font-size: 12px;
  86. color: #999;
  87. line-height: 26px;
  88. margin-top: 15px;
  89. }
  90. #code-sponsor-widget {
  91. margin: 0 0 0 -20px;
  92. }
  93. }
  94. .nav-dropdown-list {
  95. width: 120px;
  96. margin-top: -8px;
  97. li {
  98. font-size: 14px;
  99. }
  100. }
  101. </style>
  102. <template>
  103. <div
  104. class="side-nav"
  105. @mouseenter="isFade = false"
  106. :class="{ 'is-fade': isFade }"
  107. :style="navStyle">
  108. <ul>
  109. <li class="nav-item sponsors">
  110. <a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
  111. <ul class="pure-menu-list sub-nav">
  112. <li class="nav-item" v-show="lang !== 'zh-CN'">
  113. <a href="https://tipe.io/?ref=element" target="_blank">
  114. <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
  115. </a>
  116. </li>
  117. <li class="nav-item">
  118. <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
  119. <img src="~examples/assets/images/duohui.svg" alt="duohui">
  120. </a>
  121. </li>
  122. </ul>
  123. </li>
  124. <li
  125. class="nav-item"
  126. v-for="(item, key) in data"
  127. :key="key">
  128. <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
  129. <a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>
  130. <router-link
  131. v-if="item.path"
  132. active-class="active"
  133. :to="base + item.path"
  134. exact
  135. v-text="item.title || item.name">
  136. </router-link>
  137. <ul class="pure-menu-list sub-nav" v-if="item.children">
  138. <li
  139. class="nav-item"
  140. v-for="(navItem, key) in item.children"
  141. :key="key">
  142. <router-link
  143. class=""
  144. active-class="active"
  145. :to="base + navItem.path"
  146. exact
  147. v-text="navItem.title || navItem.name">
  148. </router-link>
  149. </li>
  150. </ul>
  151. <template v-if="item.groups">
  152. <div
  153. class="nav-group"
  154. v-for="(group, key) in item.groups"
  155. :key="key"
  156. >
  157. <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
  158. <ul class="pure-menu-list">
  159. <li
  160. class="nav-item"
  161. v-for="(navItem, key) in group.list"
  162. v-if="!navItem.disabled"
  163. :key="key">
  164. <router-link
  165. active-class="active"
  166. :to="base + navItem.path"
  167. exact
  168. v-text="navItem.title"></router-link>
  169. </li>
  170. </ul>
  171. </div>
  172. </template>
  173. </li>
  174. </ul>
  175. <!--<div id="code-sponsor-widget"></div>-->
  176. </div>
  177. </template>
  178. <script>
  179. import bus from '../bus';
  180. import compoLang from '../i18n/component.json';
  181. export default {
  182. props: {
  183. data: Array,
  184. base: {
  185. type: String,
  186. default: ''
  187. }
  188. },
  189. data() {
  190. return {
  191. highlights: [],
  192. navState: [],
  193. isSmallScreen: false,
  194. isFade: false
  195. };
  196. },
  197. watch: {
  198. '$route.path'() {
  199. this.handlePathChange();
  200. },
  201. isFade(val) {
  202. bus.$emit('navFade', val);
  203. }
  204. },
  205. computed: {
  206. navStyle() {
  207. const style = {};
  208. if (this.isSmallScreen) {
  209. style.paddingBottom = '60px';
  210. }
  211. style.opacity = this.isFade ? '0.5' : '1';
  212. return style;
  213. },
  214. lang() {
  215. return this.$route.meta.lang;
  216. },
  217. langConfig() {
  218. return compoLang.filter(config => config.lang === this.lang)[0]['nav'];
  219. }
  220. },
  221. methods: {
  222. handleResize() {
  223. this.isSmallScreen = document.documentElement.clientWidth < 768;
  224. this.handlePathChange();
  225. },
  226. handlePathChange() {
  227. if (!this.isSmallScreen) {
  228. this.expandAllMenu();
  229. return;
  230. }
  231. this.$nextTick(() => {
  232. this.hideAllMenu();
  233. let activeAnchor = this.$el.querySelector('a.active');
  234. let ul = activeAnchor.parentNode;
  235. while (ul.tagName !== 'UL') {
  236. ul = ul.parentNode;
  237. }
  238. ul.style.height = 'auto';
  239. });
  240. },
  241. hideAllMenu() {
  242. [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
  243. ul.style.height = '0';
  244. });
  245. },
  246. expandAllMenu() {
  247. [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
  248. ul.style.height = 'auto';
  249. });
  250. },
  251. expandMenu(event) {
  252. if (!this.isSmallScreen) return;
  253. let target = event.currentTarget;
  254. if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
  255. this.hideAllMenu();
  256. event.currentTarget.nextElementSibling.style.height = 'auto';
  257. }
  258. },
  259. created() {
  260. bus.$on('fadeNav', () => {
  261. this.isFade = true;
  262. });
  263. },
  264. mounted() {
  265. this.handleResize();
  266. window.addEventListener('resize', this.handleResize);
  267. },
  268. beforeDestroy() {
  269. window.removeEventListener('resize', this.handleResize);
  270. }
  271. };
  272. </script>