feat: add docs project by vuepress

lq782655835 · May 5, 2020 · 0c1eecb · 0c1eecb
1 parent 1abc7aa
commit 0c1eecb
Show file tree

Hide file tree

Showing 5 changed files with 2,218 additions and 61 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,42 @@
+module.exports = {
+    title: 'el-table-plus',
+    themeConfig: {
+      repo: 'https://github.com/lq782655835/vuele',
+      docsRepo: 'https://github.com/lq782655835/vuele',
+      docsDir: 'docs',
+      docsBranch: 'master',
+    },
+    plugins: [
+      'leo-demo-block',
+    ],
+    chainWebpack: (config) => {
+      // ts loader rule
+      config.resolve.extensions.prepend('.ts').prepend('.tsx')
+      config.resolve.alias.set('@', require('path').join(__dirname, '../../src'))
+
+      const tsRule = config.module.rule('ts').test(/\.ts$/)
+      const tsxRule = config.module.rule('jsx').test(/\.jsx$/)
+
+      // add a loader to both *.ts & vue<lang="ts">
+      const addLoader = ({ name, loader, options }) => {
+        tsRule
+          .use(name)
+          .loader(loader)
+          .options(options)
+        tsxRule
+          .use(name)
+          .loader(loader)
+          .options(options)
+      }
+      addLoader({
+        name: 'babel-loader',
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: ['@vue/app']
+        },
+      })
+
+
+    },
+  }
+
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,14 @@
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+import ElTablePlus from '../../src/components/index'
+
+export default ({
+    Vue, // VuePress 正在使用的 Vue 构造函数
+    options, // 附加到根实例的一些选项
+    router, // 当前应用的路由实例
+    siteData // 站点元数据
+  }) => {
+    Vue.use(ElementUI);
+    Vue.use(ElTablePlus)
+  }
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,106 @@
+# el-table-plus
+
+## 基本用法
+
+ `data` 和 `columns` 两个属性
+
+## 全属性和事件支持
+
+自动集成el-table 和el-table-column所有属性和事件
+
+## 格式化列
+
+element-ui字段列中有 [formatter] (https://element.eleme.cn/#/zh-CN/component/table) - Function(row, column, cellValue, index) 属性支持格式化，这里el-table-plus兼容该写法。
+
+同时为简便函数参数，同时提供fn - (cellValue, row, column, index)属性
+
+:::demo
+``` vue
+<template>
+    <el-table-plus
+      :data="list"
+      :columns="columns"
+    />
+</template>
+
+<script>
+const  listData = JSON.parse(
+        `{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
+      ).data
+export default {
+  data() {
+    return {
+      list: listData,
+      columns: [
+        { label: 'ID', prop: 'id', width: '80px' },
+        { label: '存储卷名', prop: 'name', type: 'copy' },
+        { label: '总容量', prop: 'storage', fn: val => `${val}G` },
+        { label: '邮箱', prop: 'member.email' },
+        { label: '创建时间', prop: 'gmtCreate' }
+      ]
+    };
+  }
+};
+</script>
+```
+:::
+
+## 自定义渲染
+
+customRender
+
+
+:::demo
+``` vue
+<template>
+    <el-table-plus
+      :data="list"
+      :columns="columns"
+    />
+</template>
+
+<script>
+const  listData = JSON.parse(
+        `{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
+      ).data
+export default {
+  data() {
+    return {
+      list: listData,
+      columns: [
+        { label: 'ID', prop: 'id', width: '80px' },
+        { label: '存储卷名', prop: 'name', type: 'copy' },
+        { label: '总容量', prop: 'storage', fn: val => `${val}G` },
+        { label: '邮箱', prop: 'member.email' },
+        { label: '创建时间', prop: 'gmtCreate' },
+        { label: '操作', fixed: 'right',  prop: 'handle', customRender: (h, val, row, column, index) => {
+          return (<div>
+            <el-button type="primary" onClick={() => this.detailHandle(row)}>查看详情</el-button>
+            <el-button type="danger" onClick={() => this.delHandle(row)}>删除</el-button>
+          </div>)
+        } }
+      ]
+    };
+  },
+  methods: {
+    detailHandle({ name }) {
+      this.$message.success(`${name} 详情`);
+    },
+    delHandle({ name }) {
+      this.$message.error(`删除 ${name}`);
+    }
+  }
+};
+</script>
+```
+:::
+
+## sort
+
+## expand
+
+## slot支持
+
+column header、default等
+
+## 集成pagination
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "serve": "vue-cli-service serve",
     "build:publish": "vue-cli-service build --dest demo && node ./scripts/demo.js",
     "build:bundle": "vue-cli-service build --target lib --name el-table-plus ./src/components/index.js",
+    "dev:docs": "vuepress dev docs",
+    "build:docs": "vuepress build docs",
     "lint": "vue-cli-service lint",
     "format": "prettier --write './**/*.{js,ts,vue,json}'"
   },
@@ -38,7 +40,9 @@
     "gh-pages": "^2.1.1",
     "prettier": "^1.19.1",
     "shelljs": "^0.8.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "vuepress": "^1.4.1",
+    "vuepress-plugin-leo-demo-block": "^0.1.1"
   },
   "eslintConfig": {
     "root": true,