docs: 文档完善

FEMessage · May 29, 2019 · 1237a89 · 1237a89
1 parent 12aaf0c
commit 1237a89
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -11,21 +11,18 @@
 
 ![view](./assets/view.png)
 
-## Table of Contents
-
-* **[Introduction](#introduction)**
-* **[Feature](#feature)**
-* **[Demo](#demo)**
-* **[Pre install](#pre-install)**
-* **[Install](#install)**
-* **[Quick Start](#quick-start)**
-* **[Props](#props)**
-* **[Methods](#methods)**
-* **[Events](#events)**
-* **[Slots](#slots)**
-* **[Dev](#dev)**
-* **[License](#license)**
-* **[Contributors](#contributors)**
+## Table of Contents <!-- omit in toc -->
+
+* [Introduction](#introduction)
+  * [组件大小](#组件大小)
+  * [OSS 文件上传](#oss-文件上传)
+* [Feature](#feature)
+* [Demo](#demo)
+* [Install](#install)
+* [Quick start](#quick-start)
+* [Dev](#dev)
+* [License](#license)
+* [Contributors](#contributors)
 
 ## Introduction
 
@@ -62,42 +59,32 @@
 
 [⬆ Back to Top](#table-of-contents)
 
-## Pre install
-
-```
-yarn add @femessage/upload-to-ali
-```
-
-[⬆ Back to Top](#table-of-contents)
-
 ## Install
 
-```
-yarn add @femessage/v-editor
+```sh
+# 上传图片功能依赖upload-to-ali组件
+yarn add @femessage/upload-to-ali @femessage/v-editor
 ```
 
 [⬆ Back to Top](#table-of-contents)
 
 ## Quick start
 
-```
+```vue
 //step1 确保oss配置
-
 //step2 在需要使用该渲染器的.vue文件中
 <template>
   <v-editor v-model="content"/>
 </template>
-
 <script>
 import VEditor from '@femessage/v-editor'
 export default {
-  name: 'my-page',
   components: {
     VEditor
   },
-  data(){
+  data() {
     return {
-      content:''
+      content: ''
     }
   }
 }
@@ -106,70 +93,13 @@ export default {
 
 [⬆ Back to Top](#table-of-contents)
 
-## Props
-
-| 参数          | 说明                                                                    | 类型    | 默认值                                            |
-| ------------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| uploadOptions | 可自定义[upload-to-ali]上的所有属性                                     | Object  | {}                                                |
-| editorOptions | 可自定义[wangEditor] 部分参数，例子如下：{debug:false, menus: ['head']} | Object  | **[defaultEditorOptions](#defaultEditorOptions)** |
-| disabled      | 编辑器是否可编辑                                                        | Boolean | false                                             |
-| height        | 编辑器高度，单位**px**                                                  | Number  | 400                                               |
-
-### defaultEditorOptions（默认编辑器参数）
-
-| 参数            | 说明                                                    | 类型    | 默认值                                                                                                                                                                  |
-| --------------- | ------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| debug           | debug 模式下，有 JS 错误会以 throw Error 方式提示出来。 | Boolean | false                                                                                                                                                                   |
-| onchangeTimeout | 自定义 onchange 触发的延迟时间，单位 **ms**             | Number  | 200                                                                                                                                                                     |
-| menus           | 默认菜单配置                                            | Array   | ["head","bold","fontSize","fontName","italic","underline","strikeThrough","foreColor","backColor","link","list","justify","quote","image","table","code","undo","redo"] |
-
-[⬆ Back to Top](#table-of-contents)
-
-## Methods
-
-| 方法      | 说明                                                           | 返回值      |
-| --------- | -------------------------------------------------------------- | ----------- |
-| getEditor | 返回的是 wangEditor 对象，用于调用[wangEditor api][wangeditor] | editor 对象 |
-
-[⬆ Back to Top](#table-of-contents)
-
-## Events
-
-| 事件           | 说明                             | 回调参数   |
-| -------------- | -------------------------------- | ---------- |
-| upload-loading | 可监听并增加上传 loading 交互    | 是否加载中 |
-| upload-error   | 可监听并增加上传错误时的提醒交互 | -          |
-
-[⬆ Back to Top](#table-of-contents)
-
-## Slots
-
-| 插槽    | 说明           |
-| ------- | -------------- |
-| loading | 自定义上传文本 |
-
-[⬆ Back to Top](#table-of-contents)
-
 ## Dev
 
-install dependency
-
-```
+```sh
+# install dependency
 yarn
-
-yarn add @femessage/upload-to-ali -P
-```
-
-run dev story
-
-```
-yarn story
-```
-
-publish to npm
-
-```
-npm publish --access public
+# run vue-styleguidist
+yarn dev
 ```
 
 [⬆ Back to Top](#table-of-contents)

diff --git a/docs/basic.md b/docs/basic.md
@@ -2,12 +2,8 @@
 
 ```vue
 <template>
-  <div>
-    <v-editor v-model="content"/>
-    <input v-model="content"/>
-  </div>
+  <v-editor v-model="content" />
 </template>
-
 <script>
 export default {
   data() {

diff --git a/docs/dialog.md b/docs/dialog.md
@@ -6,15 +6,14 @@
     <el-button type="text" @click="dialogFormVisible = true">点击打开 Dialog</el-button>
     <input v-model="content"/>
     <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
-    <v-editor v-model="content"/>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-    </div>
+      <v-editor v-model="content"/>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -31,4 +30,4 @@ export default {
   }
 }
 </script>
-```
+```
diff --git a/docs/disabled.md b/docs/disabled.md
@@ -3,13 +3,10 @@
 ```vue
 <template>
   <div>
-    <v-editor v-model="content" :disabled="disabled" :height="height"></v-editor>
-    <div>
-      <button @click="disabled=!disabled">禁用:{{disabled}}</button>
-    </div>
+    <v-editor v-model="content" :disabled="disabled" :height="height" />
+    <button @click="disabled=!disabled">禁用:{{disabled}}</button>
   </div>
 </template>
-
 <script>
 export default {
   data() {

diff --git a/docs/editor-options.md b/docs/editor-options.md
@@ -2,9 +2,8 @@
 
 ```vue
 <template>
-  <v-editor v-model="content" :editorOptions="editorOptions"/>
+  <v-editor v-model="content" :editor-options="editorOptions"/>
 </template>
-
 <script>
 export default {
   data() {

diff --git a/docs/height.md b/docs/height.md
@@ -2,9 +2,8 @@
 
 ```vue
 <template>
-  <v-editor v-model="content" :height="height"></v-editor>
+  <v-editor v-model="content" :height="height" />
 </template>
-
 <script>
 export default {
   data() {

diff --git a/docs/loading.md → docs/slot-loading.md b/docs/loading.md → docs/slot-loading.md
@@ -6,7 +6,6 @@
     <template slot="loading">hello imgs...</template>
   </v-editor>
 </template>
-
 <script>
 export default {
   data() {

diff --git a/src/v-editor.vue b/src/v-editor.vue
@@ -3,6 +3,7 @@
     <div class="loading-mask"
          v-if="showLoading">
       <div class="loading-content">
+        <!-- @slot 自定义上传文本 -->
         <slot name="loading">
           <p>文件上传中...</p>
         </slot>
@@ -40,8 +41,7 @@ export default {
   },
   props: {
     /**
-     * upload-to-ali的参数:
-     * 文档参看upload-to-ali;
+     * upload-to-ali的参数，参考[upload-to-ali文档](https://femessage.github.io/upload-to-ali)
      */
     uploadOptions: {
       type: Object,
@@ -59,8 +59,8 @@ export default {
       }
     },
     /**
-     * editor默认配置
-     * 文档查看 https://github.com/wangfupeng1988/wangEditor;
+     * editor配置，参考[wangEditor文档](https://github.com/wangfupeng1988/wangEditor)；
+     * [默认配置](https://github.com/FEMessage/v-editor/blob/dev/src/defaultEditorOptions.js)
      */
     editorOptions: {
       type: Object,
@@ -69,17 +69,14 @@ export default {
       }
     },
     /**
-     * 编辑器的高度
-     * 默认高度为400px
+     * 编辑器的高度，单位px
      */
     height: {
       type: Number,
       default: 400
     },
     /**
-     * 编辑器是否可编辑:
-     * false 可以编辑
-     * true 不可以编辑
+     * 编辑器是否可编辑
      */
     disabled: {
       type: Boolean,
@@ -176,6 +173,10 @@ export default {
     this.editor = editor
   },
   methods: {
+    /**
+     * 返回内部的wangEditor对象
+     * @public
+     */
     getEditor() {
       //暴露当前编辑器，可以在外部调用编辑器的功能
       return this.editor
@@ -202,11 +203,17 @@ export default {
           )
         })
       } else {
-        //外部监听upload-error，增加错误上传的处理
+        /**
+         * 可监听并增加上传错误时的提醒交互
+         */
         this.$emit('upload-error')
       }
       //外部监听upload-loading，增加显示loading ui 逻辑
       this.showLoading = false
+      /**
+       * 可监听并增加上传 loading 交互
+       * @property {boolean} loading - 是否加载中
+       */
       this.$emit('upload-loading', false)
     },
     paste(e) {