refactor: 3.0

example/app.js

@@ -0,0 +1,142 @@
+/* eslint-disable global-require */
+/* eslint-disable import/no-extraneous-dependencies */
+import fs from 'fs';
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import 'highlight.js/styles/atom-one-light.css';
+
+import Container from './helper/container.vue';
+import Card from './helper/card.vue';
+import Basic from './demo/Basic.vue';
+import ValueType from './demo/ValueType.vue';
+import Range from './demo/Range.vue';
+import DisabledDateTime from './demo/DisabledDateTime.vue';
+import Shortcut from './demo/Shortcut.vue';
+import ControlTimePanel from './demo/ControlTimePanel.vue';
+import ControlOpen from './demo/ControlOpen.vue';
+import HideSeconds from './demo/HideSeconds.vue';
+import MinuteStep from './demo/MinuteStep.vue';
+import FixedTimeList from './demo/FixedTimeList.vue';
+import Disabled from './demo/Disabled.vue';
+
+import en from './en.md';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml);
+
+const components = [
+  {
+    id: 'Basic',
+    component: Basic,
+    code: fs.readFileSync(`${__dirname}/demo/Basic.vue`, 'utf8'),
+  },
+  {
+    id: 'ValueType',
+    component: ValueType,
+    code: fs.readFileSync(`${__dirname}/demo/ValueType.vue`, 'utf8'),
+  },
+  {
+    id: 'Range',
+    component: Range,
+    code: fs.readFileSync(`${__dirname}/demo/Range.vue`, 'utf8'),
+  },
+  {
+    id: 'HideSeconds',
+    component: HideSeconds,
+    code: fs.readFileSync(`${__dirname}/demo/HideSeconds.vue`, 'utf8'),
+  },
+  {
+    id: 'MinuteStep',
+    component: MinuteStep,
+    code: fs.readFileSync(`${__dirname}/demo/MinuteStep.vue`, 'utf8'),
+  },
+  {
+    id: 'FixedTimeList',
+    component: FixedTimeList,
+    code: fs.readFileSync(`${__dirname}/demo/FixedTimeList.vue`, 'utf8'),
+  },
+  {
+    id: 'DisabledDateTime',
+    component: DisabledDateTime,
+    code: fs.readFileSync(`${__dirname}/demo/DisabledDateTime.vue`, 'utf8'),
+  },
+  {
+    id: 'Disabled',
+    component: Disabled,
+    code: fs.readFileSync(`${__dirname}/demo/Disabled.vue`, 'utf8'),
+  },
+  {
+    id: 'Shortcut',
+    component: Shortcut,
+    code: fs.readFileSync(`${__dirname}/demo/Shortcut.vue`, 'utf8'),
+  },
+  {
+    id: 'ControlTimePanel',
+    component: ControlTimePanel,
+    code: fs.readFileSync(`${__dirname}/demo/ControlTimePanel.vue`, 'utf8'),
+  },
+  {
+    id: 'ControlOpen',
+    component: ControlOpen,
+    code: fs.readFileSync(`${__dirname}/demo/ControlOpen.vue`, 'utf8'),
+  },
+];
+
+function transformMd(text) {
+  const array = text.split(/\n(?=<!-)/);
+  const getId = s => {
+    const result = s.match(/<!--\s*(\w+)\s*-->/);
+    return result && result[1].trim();
+  };
+  const getTitleAndDescription = s => {
+    const result = s.match(/<h.*?>(.*?)<\/h\d>/);
+    if (!result) return null;
+    const title = result[1];
+    const description = s.slice(result[0].length + result.index);
+    return {
+      title: title.trim().replace(/&amp;/g, '&'),
+      description: description.trim(),
+    };
+  };
+  const result = {};
+  array.forEach(str => {
+    const id = getId(str);
+    if (id) {
+      result[id] = getTitleAndDescription(str);
+    }
+  });
+  return result;
+}
+
+const titleAndDescMap = transformMd(en);
+
+const App = {
+  name: 'App',
+  mounted() {
+    hljs.initHighlightingOnLoad();
+  },
+  render(h) {
+    const menus = components.map(item => {
+      return {
+        id: item.id,
+        ...titleAndDescMap[item.id],
+      };
+    });
+    return (
+      <Container menus={menus}>
+        {components.map(item => {
+          const { component, id, code } = item;
+          const props = {
+            id,
+            code,
+            ...titleAndDescMap[id],
+          };
+          return <Card {...{ props }}>{h(component)}</Card>;
+        })}
+      </Container>
+    );
+  },
+};
+
+export default App;

example/assets/collapse.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572655426603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1257" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M336 784c-12.286 0-24.57-4.688-33.942-14.058l-224-224c-18.746-18.746-18.746-49.138 0-67.882l224-224c18.746-18.744 49.136-18.744 67.882 0 18.742 18.744 18.742 49.136 0 67.882L179.882 512l190.058 190.058c18.742 18.746 18.742 49.136 0 67.882C360.566 779.312 348.286 784 336 784z" p-id="1258"></path><path d="M688 784c12.286 0 24.57-4.688 33.942-14.058l224-224c18.746-18.746 18.746-49.138 0-67.882l-224-224c-18.746-18.744-49.136-18.744-67.882 0-18.742 18.744-18.742 49.136 0 67.882L844.118 512l-190.058 190.058c-18.742 18.746-18.742 49.136 0 67.882C663.434 779.312 675.714 784 688 784z" p-id="1259"></path></svg>

example/assets/expand.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572655405733" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1139" xmlns:xlink="http://www.w3.org/1999/xlink" width="214.453125" height="200"><defs><style type="text/css"></style></defs><path d="M352.548571 799.451429l-28.598857 28.598857q-5.705143 5.705143-13.165714 5.705143t-13.165714-5.705143l-266.313143-266.313143q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l266.313143-266.313143q5.705143-5.705143 13.165714-5.705143t13.165714 5.705143l28.598857 28.598857q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714l-224.548571 224.548571 224.548571 224.548571q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714zM690.322286 189.732571l-213.138286 737.718857q-2.267429 7.460571-8.850286 11.117714t-13.458286 1.462857l-35.401143-9.728q-7.460571-2.267429-11.117714-8.850286t-1.462857-13.970286l213.138286-737.718857q2.267429-7.460571 8.850286-11.117714t13.458286-1.462857l35.401143 9.728q7.460571 2.267429 11.117714 8.850286t1.462857 13.970286zM1065.691429 561.737143l-266.313143 266.313143q-5.705143 5.705143-13.165714 5.705143t-13.165714-5.705143l-28.598857-28.598857q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l224.548571-224.548571-224.548571-224.548571q-5.705143-5.705143-5.705143-13.165714t5.705143-13.165714l28.598857-28.598857q5.705143-5.705143 13.165714-5.705143t13.165714 5.705143l266.313143 266.313143q5.705143 5.705143 5.705143 13.165714t-5.705143 13.165714z" p-id="1140"></path></svg>

example/demo/Basic.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date (default)</p>
+      <date-picker
+        v-model="value1"
+        format="YYYY-MM-DD"
+        type="date"
+        placeholder="Select date"
+      ></date-picker>
+    </section>
+    <section>
+      <p>month</p>
+      <date-picker v-model="value2" type="month" placeholder="Select month"></date-picker>
+    </section>
+    <section>
+      <p>year</p>
+      <date-picker v-model="value3" type="year" placeholder="Select year"></date-picker>
+    </section>
+    <section>
+      <p>datetime</p>
+      <date-picker v-model="value4" type="datetime" placeholder="Select datetime"></date-picker>
+    </section>
+    <section>
+      <p>time</p>
+      <date-picker v-model="value5" type="time" placeholder="Select time"></date-picker>
+    </section>
+    <section>
+      <p>week</p>
+      <date-picker v-model="value6" type="week" placeholder="Select week"></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      value3: null,
+      value4: null,
+      value5: null,
+      value6: null,
+    };
+  },
+};
+</script>

example/demo/ControlOpen.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      value-type="format"
+      type="time"
+      :open.sync="open"
+      placeholder="Select time"
+      @change="handleChange"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: null,
+      open: false,
+    };
+  },
+  methods: {
+    handleChange(value, type) {
+      if (type === 'second') {
+        this.open = false;
+      }
+    },
+  },
+};
+</script>

example/demo/ControlTimePanel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="box">
+    <section>
+      <date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="Select datetime"
+        :show-time-panel="showTimePanel"
+        @close="handleOpenChange"
+      >
+        <template v-slot:footer>
+          <button class="mx-btn mx-btn-text" @click="toggleTimePanel">
+            {{ showTimePanel ? 'select date' : 'select time' }}
+          </button>
+        </template>
+      </date-picker>
+    </section>
+    <section>
+      <date-picker
+        v-model="value2"
+        type="datetime"
+        placeholder="Select datetime range"
+        range
+        :show-time-panel="showTimeRangePanel"
+        @close="handleRangeClose"
+      >
+        <template v-slot:footer>
+          <button class="mx-btn mx-btn-text" @click="toggleTimeRangePanel">
+            {{ showTimeRangePanel ? 'select date' : 'select time' }}
+          </button>
+        </template>
+      </date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value1: null,
+      value2: [],
+      showTimePanel: false,
+      showTimeRangePanel: false,
+    };
+  },
+  methods: {
+    toggleTimePanel() {
+      this.showTimePanel = !this.showTimePanel;
+    },
+    toggleTimeRangePanel() {
+      this.showTimeRangePanel = !this.showTimeRangePanel;
+    },
+    handleOpenChange() {
+      this.showTimePanel = false;
+    },
+    handleRangeClose() {
+      this.showTimeRangePanel = false;
+    },
+  },
+};
+</script>

example/demo/Disabled.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="box">
+    <section>
+      <p>disabled = "true"</p>
+      <date-picker v-model="value1" disabled></date-picker>
+    </section>
+    <section>
+      <p>editable = "false"</p>
+      <date-picker v-model="value2" :editable="false"></date-picker>
+    </section>
+    <section>
+      <p>clearable = "false"</p>
+      <date-picker v-model="value3" :clearable="false"></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date(),
+      value3: new Date(),
+    };
+  },
+};
+</script>

example/demo/DisabledDateTime.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date not before today</p>
+      <date-picker v-model="value1" :disabled-date="notBeforeToday"></date-picker>
+    </section>
+    <section>
+      <p>date not after today</p>
+      <date-picker v-model="value2" :disabled-date="notAfterToday"></date-picker>
+    </section>
+    <section>
+      <p>time not before 09:00</p>
+      <date-picker
+        v-model="value3"
+        value-type="format"
+        type="time"
+        placeholder="HH:mm:ss"
+        :default-value="new Date().setHours(9, 0, 0)"
+        :disabled-time="notBeforeNine"
+      ></date-picker>
+    </section>
+    <section>
+      <p>datetime not before 2019-10-09 12:00</p>
+      <date-picker
+        v-model="value4"
+        type="datetime"
+        :disabled-date="notBeforeDate"
+        :disabled-time="notBeforeTime"
+        value-type="format"
+      ></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+export default {
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date(),
+      value3: '',
+      value4: '',
+      value5: '',
+    };
+  },
+  methods: {
+    notBeforeToday(date) {
+      return date < today;
+    },
+    notAfterToday(date) {
+      return date > today;
+    },
+    notBeforeNine(date) {
+      return date.getHours() < 9;
+    },
+    notBeforeDate(date) {
+      return date < new Date(2019, 9, 9);
+    },
+    notBeforeTime(date) {
+      return date < new Date(2019, 9, 9, 12);
+    },
+  },
+};
+</script>

example/demo/FixedTimeList.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      :time-picker-options="{
+        start: '08:30',
+        step: '00:30',
+        end: '18:30',
+      }"
+      format="hh:mm a"
+      type="time"
+      placeholder="hh:mm a"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FixedTimeList',
+  data() {
+    return {
+      value: null,
+    };
+  },
+};
+</script>

example/demo/HideSeconds.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      format="hh:mm a"
+      value-type="format"
+      type="time"
+      placeholder="hh:mm a"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>

example/demo/MinuteStep.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      :minute-step="30"
+      :hour-options="hours"
+      format="HH:mm"
+      value-type="format"
+      type="time"
+      placeholder="HH:mm"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: '',
+      hours: Array.from({ length: 10 }).map((_, i) => i + 8),
+    };
+  },
+};
+</script>

example/demo/Range.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date range</p>
+      <date-picker v-model="value1" type="date" range placeholder="Select date range"></date-picker>
+    </section>
+    <section>
+      <p>datetime range</p>
+      <date-picker
+        v-model="value2"
+        type="datetime"
+        range
+        placeholder="Select datetime range"
+      ></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Range',
+  data() {
+    return {
+      value1: [new Date(2019, 9, 8), new Date(2019, 9, 19)],
+      value2: [],
+    };
+  },
+};
+</script>

example/demo/Shortcut.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="box">
+    <section>
+      <p>shortcuts</p>
+      <date-picker v-model="value1" :shortcuts="shortcuts" placeholder="Select date"></date-picker>
+    </section>
+    <section>
+      <p>header slot</p>
+      <date-picker v-model="value2" placeholder="Select date">
+        <template v-slot:header="{ emit }">
+          <button class="mx-btn mx-btn-text" @click="emit(new Date())">Today</button>
+        </template>
+      </date-picker>
+    </section>
+    <section>
+      <p>footer slot</p>
+      <date-picker v-model="value3" range placeholder="Select date range">
+        <template v-slot:footer="{ emit }">
+          <div style="text-align: left">
+            <button class="mx-btn mx-btn-text" @click="selectNextThreeDay(emit)">
+              NextThreeDay
+            </button>
+          </div>
+        </template>
+      </date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      value3: null,
+      shortcuts: [
+        {
+          text: 'Today',
+          onClick() {
+            const date = new Date();
+            // return a Date
+            return date;
+          },
+        },
+        {
+          text: 'Yesterday',
+          onClick() {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date;
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    selectNextThreeDay(emit) {
+      const start = new Date();
+      const end = new Date();
+      end.setTime(end.getTime() + 3 * 24 * 3600 * 1000);
+      const date = [start, end];
+      emit(date);
+    },
+  },
+};
+</script>

example/demo/ValueType.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="box">
+    <section>
+      <p>format</p>
+      <date-picker v-model="value2" value-type="format" format="YYYY-MM-DD"></date-picker>
+      <p>
+        <code>v-model = {{ value2 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>date (Date Object)</p>
+      <date-picker v-model="value1" value-type="date"></date-picker>
+      <p>
+        <code>v-model = {{ value1 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>timestamp</p>
+      <date-picker v-model="value3" value-type="timestamp"></date-picker>
+      <p>
+        <code>v-model = {{ value3 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>DD/MM/YYYY</p>
+      <date-picker v-model="value4" value-type="DD/MM/YYYY" format="YYYY-MM-DD"></date-picker>
+      <p>
+        <code>v-model = {{ value4 }}</code>
+      </p>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ValueType',
+  data() {
+    return {
+      value1: new Date(2019, 9, 9),
+      value2: '2019-10-09',
+      value3: new Date(2019, 9, 9).getTime(),
+      value4: '09/10/2019',
+    };
+  },
+};
+</script>

example/en.md

@@ -0,0 +1,76 @@
+<!-- Basic -->
+
+### Basic
+
+You can select or input a date, month, year, time or datetime
+
+<!-- ValueType -->
+
+### ValueType
+
+You can set the type of the v-model value by `valueType`.
+
+- "format": return a string same as the input value.
+- "date"(default): return a Date Object.
+- "timestamp": return a Number.
+- token: a accepted format string pattern.
+
+<!-- Range -->
+
+### Range
+
+Support to select a date range.
+
+<!-- DisabledDateTime -->
+
+### DisabledDate & DisabledTime
+
+Disabled part of dates and time by `disabledDate` and `disabledTime` respectively
+
+<!-- Disabled -->
+
+### Disabled & editable
+
+- disabled: A disabled state of the DatePicker
+- editable: Whether to allow manual input
+
+<!-- Shortcut -->
+
+### Shortcut
+
+You can set `shortcuts` to improve user experience.
+You can also use the header slot or the footer slot
+
+<!-- ControlTimePanel -->
+
+### Control TimePanel visible
+
+Determing whether the time panel is displayed by `showTimePanel`.
+The time panel is displayed after the date is selected by default.
+
+<!-- ControlOpen -->
+
+### Control Open
+
+You can use the prop `open` to control the visible of popup.
+The time picker doesn't automatically close by default.
+This example automatically close the popup when the seconds is selected.
+
+<!-- HideSeconds -->
+
+### Hide Seconds & Show AM/PM
+
+The columns of the time Picker is displayed according to the value of format by default.
+You can also set `showHour` `showMinute` `showSecond` to override the default value
+
+<!-- MinuteStep -->
+
+### Interval and custom time options
+
+Show stepped options by `hourStep` `minuteStep` `secondStep` or show custom options by `hourOptions` `minuteOptions` `secondOptions`
+
+<!-- FixedTimeList -->
+
+### Select fixed time list
+
+You can provide a list of fixed time for users to choose by `timePickerOptions`

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>

example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Vue from 'vue';
+
+import DatePicker from '../src/index';
+
+// import '../src/locale/zh-cn';
+
+import '../src/style/index.scss';
+
+import App from './app';
+
+Vue.use(DatePicker);
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');