refactor: 3.0

example/helper/card.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="card">
+    <section :id="id" class="card-title" v-html="title"></section>
+    <section class="card-description markdown-body" v-html="description"></section>
+    <section class="card-demo markdown-body">
+      <slot></slot>
+    </section>
+    <section class="card-actions" @click="handleExpand">
+      <img v-if="codeVisible" alt="show code" class="icon-expand" src="../assets/expand.svg" />
+      <img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
+    </section>
+    <section v-show="codeVisible" class="card-code">
+      <pre>
+        <code class="vue">{{code}}</code>
+      </pre>
+    </section>
+  </div>
+</template>
+
+<script>
+// TODO: 替换img 图标, 本地
+
+export default {
+  name: 'DemoCard',
+  props: {
+    id: String,
+    title: String,
+    description: String,
+    code: String,
+  },
+  data() {
+    return {
+      codeVisible: false,
+    };
+  },
+  methods: {
+    handleExpand() {
+      this.codeVisible = !this.codeVisible;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+$border-color: #ebedf0;
+
+.card {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-size: 14px;
+  color: #314659;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  & + & {
+    margin-top: 60px;
+  }
+}
+
+.card-demo {
+  padding: 30px 24px;
+  color: #213649;
+  border-top: 1px solid $border-color;
+  .box {
+    display: flex;
+    flex-wrap: wrap;
+    > section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.card-title {
+  position: absolute;
+  margin-top: -10px;
+  margin-left: 14px;
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 700;
+  padding: 0 10px;
+  background: #fff;
+}
+
+.card-description {
+  padding: 12px 24px;
+}
+
+.markdown-body {
+  font-size: 15px;
+  line-height: 1.7;
+  p,
+  ul,
+  ol {
+    margin: 10px 0;
+  }
+  ul,
+  ol {
+    padding-left: 30px;
+  }
+  code {
+    margin: 0 1px;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(27, 31, 35, 0.05);
+    border-radius: 3px;
+  }
+}
+
+.card-actions {
+  position: relative;
+  border-top: 1px solid $border-color;
+  height: 36px;
+  text-align: center;
+  color: #d3dce6;
+  cursor: pointer;
+  transition: 0.2s;
+  user-select: none;
+  &:hover {
+    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
+  }
+}
+.icon-expand {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+  width: 16px;
+  height: 16px;
+  opacity: 0.3;
+}
+
+.card-code {
+  border-top: 1px solid $border-color;
+  pre {
+    margin: 0;
+    background: #fff;
+    &::after,
+    &::before {
+      width: 0;
+    }
+    // 添加优先级, 覆盖 引入的样式
+    code {
+      display: block;
+      background: #fff;
+      color: #314659;
+      line-height: 2;
+      border: 0;
+      box-shadow: none;
+      padding: 16px 32px;
+      border-radius: 2px;
+      font-size: 14px;
+    }
+  }
+}
+</style>

example/helper/container.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="container">
+    <div class="sidebar">
+      <a
+        v-for="(menu, i) in menus"
+        :key="menu.id"
+        :class="{ active: activeIndex === i }"
+        :href="`#${menu.id}`"
+        >{{ menu.title }}</a
+      >
+    </div>
+    <div ref="main" class="main" @scroll="handleScroll">
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    menus: Array,
+  },
+  data() {
+    return {
+      offset: [],
+      activeIndex: 0,
+    };
+  },
+  mounted() {
+    const scrollEl = this.$refs.main;
+    const els = document.querySelectorAll('.card-title');
+    const { top } = scrollEl.getBoundingClientRect();
+    const offset = [];
+    for (let i = 0; i < els.length; i++) {
+      const el = els[i];
+      offset.push(el.getBoundingClientRect().top - top);
+    }
+    this.offset = offset;
+  },
+  methods: {
+    handleScroll(evt) {
+      const value = evt.currentTarget.scrollTop - 10;
+      const index = this.offset.findIndex(v => v > value);
+      this.activeIndex = index;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+html,
+body {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+}
+.sidebar {
+  border-right: 1px solid #ebedf0;
+  width: 280px;
+  overflow: auto;
+  a {
+    font-size: 14px;
+    line-height: 30px;
+    display: block;
+    padding-left: 16px;
+    overflow: hidden;
+    color: #314659;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-left: 1px solid transparent;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    &:hover {
+      color: mix(#fff, #1284e7, 0.8);
+    }
+    &.active {
+      color: #1284e7;
+    }
+  }
+}
+
+.main {
+  flex: 1;
+  overflow: auto;
+}
+
+.content {
+  padding: 20px;
+  p {
+    margin: 10px 0;
+  }
+}
+</style>