Docs optimize

tpxiang · May 3, 2017 · 2facf28 · 2facf28
1 parent 17e5caa
commit 2facf28
Show file tree

Hide file tree

Showing 40 changed files with 2,752 additions and 82 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["es2015"],
-  "plugins": ["add-module-exports", "transform-es2015-modules-umd"]
+  "plugins": ["add-module-exports", "transform-es2015-modules-umd", "syntax-dynamic-import"]
 }
diff --git a/build/webpack.docs.config.js b/build/webpack.docs.config.js
@@ -1,11 +1,35 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
-  entry: './docs/main.js',
+  entry: {
+    main: 'docs/main.js',
+    libs: [
+      'vue',
+      'vue-router',
+      'prismjs',
+      'material-design-lite/material.min.js'
+    ],
+    resource: [
+      'prismjs/themes/prism-tomorrow.css',
+      'docs/fonts/iconfont.css',
+      'material-design-icons/iconfont/material-icons.css',
+      'material-design-lite/material.min.css'
+    ],
+    vendor: [
+      'docs/components/App.vue',
+      'docs/components/CateView.vue',
+      'docs/components/DocPreview.vue',
+      'docs/components/Drawer.vue',
+      'docs/components/RootFrame.vue',
+    ]
+  },
   output: {
     path: path.resolve(__dirname, '../dist'),
-    filename: 'index.js'
+    filename: '[name].[hash:8].bundle.js',
+    chunkFilename: '[name].[chunkhash:8].js'
   },
   module: {
     rules: [
@@ -45,12 +69,20 @@ module.exports = {
   resolve: {
     alias: {
       '@': path.resolve(__dirname, '../src'),
-      docs: path.resolve(__dirname, '../docs/src')
+      docs: path.resolve(__dirname, '../docs')
     }
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '../docs/template/index.html')
+      template: path.resolve(__dirname, '../docs/template/index.html'),
+      chunks: ['libs', 'vendor', 'resource', 'main']
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor', 'libs', 'resource', 'manifest'],
+      minChunks: Infinity
+    }),
+    new InlineManifestWebpackPlugin({
+        name: 'webpackManifest'
     })
   ]
 }
diff --git a/docs/components/CateView.vue b/docs/components/CateView.vue
@@ -218,7 +218,7 @@ router-view
     border none
     background transparent 
 
-  .highlight pre 
+  .highlight pre
     background-color #f8f8f8
     border 1px solid #ccc
     font-size 13px
@@ -228,7 +228,7 @@ router-view
     border-radius 3px 
 
   pre 
-    background-color #f8f8f8
+    // background-color #f8f8f8
     border 1px solid #ccc
     font-size 13px
     line-height 19px

diff --git a/docs/md/zh/baidu-map.md b/docs/md/zh/baidu-map.md
@@ -0,0 +1,285 @@
+<template lang="md">
+
+# 地图容器
+
+`BaiduMap` 百度地图容器，用于挂载百度地图核心类和一个百度地图实例。是所有地图组件的根组件。\
+地图容器的实质是一个空的 DOM 节点，它可以用于挂载 `BmView` 组件或其它 DOM 节点或组件。如果你需要二次开发或手动控制其子组件，可以使用在 `ready` 事件中使用返回的 `BMap` 类和 `map` 实例进行手动控制。
+
+## 实例属性
+
+|属性名|类型|默认值|描述|
+|------|:----:|:---:|---|
+|center|Point, String|undefined|定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度|
+|zoom|Number|undefined|缩放等级|
+|min-zoom|Number|undefined|最小缩放级别|
+|max-zoom|Number|undefined|最大缩放级别|
+|high-resolution|Boolean|true|高分屏模式 该项仅在地图组件挂载时加载一次|
+|map-click|Boolean|true|允许点击 该项仅在地图组件挂载时加载一次|
+|map-type|Number|global.BMAP_NORMAL_MAP|地图类型|
+|dragging|Boolean|true|允许拖拽|
+|scroll-wheel-zoom|Boolean|false|允许鼠标滚轮缩放|
+|double-click-zoom|Boolean|true|允许双击缩放|
+|keyboard|Boolean|true|允许键盘操作|
+|inertial-dragging|Boolean|false|允许惯性拖拽|
+|continuous-zoom|Boolean|false|允许无级缩放|
+|pinch-to-zoom|Boolean|true|允许双指缩放|
+|auto-resize|Boolean|true|允许自适应容器尺寸|
+|theme|Array|undefined|自定义主题|
+
+## 事件
+|事件名|参数|描述|
+|---|:----:|---|
+|click|{type, target, point, pixel, overlay}|左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick|
+|dblclick|{type, target, pixel, point}|鼠标双击地图时会触发此事件|
+|rightclick|{type, target, point, pixel, overlay}|右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick|
+|rightdblclick|{type, target, point, pixel, overlay}|右键双击地图时触发此事件|
+|maptypechange|{type, target}|地图类型发生变化时触发此事件|
+|mousemove|{type, target, point, pixel, overlay}|鼠标在地图区域移动过程中触发此事件|
+|mouseover|{type, target}|鼠标移入地图区域时触发此事件|
+|mouseout|{type, target}|鼠标移出地图区域时触发此事件|
+|movestart|{type, target}|地图移动开始时触发此事件|
+|moving|{type, target}|地图移动过程中触发此事件|
+|moveend|{type, target}|地图移动结束时触发此事件|
+|zoomstart|{type, target}|地图更改缩放级别开始时触发触发此事件|
+|zoomend|{type, target}|地图更改缩放级别结束时触发触发此事件|
+|addoverlay|{type, target}|当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件|
+|addcontrol|{type, target}|当使用Map.addControl()方法向地图中添加单个控件时会触发此事件|
+|removecontrol|{type, target}|当使用Map.removeControl()方法移除单个控件时会触发此事件|
+|removeoverlay|{type, target}|当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件|
+|clearoverlays|{type, target}|当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件|
+|dragstart|{type, target, pixel, point}|开始拖拽地图时触发|
+|dragging|{type, target, pixel, point}|拖拽地图过程中触发|
+|dragend|{type, target, pixel, point}|停止拖拽地图时触发|
+|addtilelayer|{type, target}|添加一个自定义地图图层时触发此事件|
+|removetilelayer|{type, target}|移除一个自定义地图图层时触发此事件|
+|load|{type, target, pixel, point, zoom}|调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块|
+|resize|{type, target, size}|地图可视区域大小发生变化时会触发此事件|
+|hotspotclick|{type, target, spots}|点击热区时触发此事件|
+|hotspotover|{type, target, spots}|鼠标移至热区时触发此事件|
+|hotspotout|{type, target, spots}|鼠标移出热区时触发此事件|
+|tilesloaded|{type, target}|当地图所有图块完成加载时触发此事件|
+|touchstart|{type, target, point,pixel}|触摸开始时触发此事件，仅适用移动设备|
+|touchmove|{type, target, point,pixel}|触摸移动时触发此事件，仅适用移动设备|
+|touchend|{type, target, point,pixel}|触摸结束时触发此事件，仅适用移动设备|
+|longpress|{type, target, point,pixel}|长按事件，仅适用移动设备|
+
+## 自定义主题
+
+百度地图实例允许用户设置自定义配色风格以配合不同风格的主题设计。
+
+> 主题数据格式请参考：[百度地图主题编辑器](http://developer.baidu.com/map/custom/)
+
+## 示例
+
+### 设置经纬度和缩放等级
+
+#### 代码
+
+```html
+<template>
+  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
+  </baidu-map>
+</template>
+```
+
+#### 预览
+<doc-preview>
+  <baidu-map slot="map" class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
+  </baidu-map>
+</doc-preview>
+
+### 开启滚轮缩放
+
+#### 代码
+
+```html
+<template>
+  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
+  </baidu-map>
+</template>
+```
+
+#### 预览
+<doc-preview>
+  <baidu-map slot="map" class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
+  </baidu-map>
+</doc-preview>
+
+### 设置自定义主题
+
+#### 代码
+
+```html
+<template>
+  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :theme="theme">
+  </baidu-map>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      theme: [
+        {
+          "featureType": "all",
+          "elementType": "geometry",
+          "stylers": {
+              "hue": "#007fff",
+              "saturation": 89
+          }
+        },
+        {
+          "featureType": "water",
+          "elementType": "all",
+          "stylers": {
+              "color": "#ffffff"
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+#### 预览
+<doc-preview>
+  <baidu-map slot="map" class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :theme="theme">
+  </baidu-map>
+</doc-preview>
+
+### 设置地图类型
+
+#### 代码
+
+```html
+<template>
+  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" mapType="BMAP_SATELLITE_MAP">
+  </baidu-map>
+</template>
+```
+
+#### 预览
+<doc-preview>
+  <baidu-map slot="map" class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" mapType="BMAP_SATELLITE_MAP">
+  </baidu-map>
+</doc-preview>
+
+### 双向绑定
+
+#### 代码
+
+```html
+<template>
+  <div>
+    <input v-model.number="center.lng">
+    <input v-model.number="center.lat">
+    <input v-model.number="zoom">
+    <baidu-map 
+        class="map"
+        :scroll-wheel-zoom="true"
+        :center="center"
+        :zoom="zoom"
+        @moving="syncCenter"
+        @moveend="syncCenter"
+        @zoomend="syncZoom">
+    </baidu-map>
+  <div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      center: {
+        lng: 116.404,
+        lat: 39.915
+      },
+      zoom: 15
+    }
+  },
+  methods: {
+    syncCenter (e) {
+      const {lng, lat} = e.target.getCenter()
+      this.center.lng = lng
+      this.center.lat = lat
+    },
+    syncZoom (e) {
+      this.zoom = e.target.getZoom()
+    }
+  }
+}
+</script>
+```
+
+#### 预览
+<doc-preview>
+  <baidu-map slot="map" class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @moving="syncCenter" @moveend="syncCenter" @zoomend="syncZoom">
+  </baidu-map>
+  <div slot="bottom" class="mdl-card__actions mdl-card--border">
+    <div class="mdl-grid">
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" v-model.number="center.lng">
+          <label class="mdl-textfield__label">经度</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"v-model.number="center.lat">
+          <label class="mdl-textfield__label">纬度</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+      <div class="mdl-cell mdl-cell--4-col">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" v-model.number="zoom">
+          <label class="mdl-textfield__label">缩放</label>
+          <span class="mdl-textfield__error">Input is not a number!</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</doc-preview>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      center: {
+        lng: 116.404,
+        lat: 39.915
+      },
+      zoom: 15,
+      theme: [
+        {
+          "featureType": "all",
+          "elementType": "geometry",
+          "stylers": {
+              "hue": "#007fff",
+              "saturation": 89
+          }
+        },
+        {
+          "featureType": "water",
+          "elementType": "all",
+          "stylers": {
+              "color": "#ffffff"
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    syncCenter (e) {
+      const {lng, lat} = e.target.getCenter()
+      this.center.lng = lng
+      this.center.lat = lat
+    },
+    syncZoom (e) {
+      this.zoom = e.target.getZoom()
+    }
+  }
+}
+</script>