update

vbenjs · Oct 23, 2020 · 6a4ec97 · 6a4ec97
1 parent af15331
commit 6a4ec97
Show file tree

Hide file tree

Showing 22 changed files with 1,036 additions and 41 deletions.
diff --git a/deploy.sh b/deploy.sh
@@ -4,14 +4,17 @@ set -e
 
 npm run build
 
-cd docs/.vuepress/dist
+cd dist
 
 touch .nojekyll
 
 git init
+git config --local user.email "vben"
+git config --local user.name "[email protected]"
 git add -A
 git commit -m 'deploy'
 
+
 git push -f "https://github.com/anncwb/vue-vben-admin-doc.git" master:gh-pages
 
 cd -
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  base: '/vue-vben-admin-doc/',
+  base: '/doc-next/',
   title: 'Vue vben admin 2.0',
   description: 'Vue Vben Admin 开发文档,持续更新中....',
   dest: './dist',
@@ -20,11 +20,11 @@ module.exports = {
       title: 'Vue vben admin 2.0',
       description: 'Vue Vben Admin 2.0项目文档，持续更新中....',
     },
-    '/en/': {
-      lang: 'en-US',
-      title: 'Vue vben admin 2.0',
-      description: 'Vue Vben Admin Docs',
-    },
+    // '/en/': {
+    //   lang: 'en-US',
+    //   title: 'Vue vben admin 2.0',
+    //   description: 'Vue Vben Admin Docs',
+    // },
   },
   themeConfig: {
     logo: '/img/logo.png',
@@ -37,7 +37,7 @@ module.exports = {
         nav: [
           { text: '指南', link: '/guide/' },
           {
-            text: '组件/Hook',
+            text: '组件/Hook(更新中...)',
             items: [
               {
                 text: '组件',
@@ -79,17 +79,17 @@ module.exports = {
         sidebar: {
           '/guide/': [
             {
-              title: '基础',
+              title: '基础(更新中...)',
               collapsable: false,
               children: getGuide(),
             },
             {
-              title: '深入',
+              title: '深入(更新中...)',
               collapsable: false,
               children: getDeps(),
             },
             {
-              title: '其他',
+              title: '其他(更新中...)',
               collapsable: false,
               children: ['/guide/qa/'],
             },
@@ -154,6 +154,18 @@ function getGlobComp(type = '') {
 }
 
 function getComp(type = '') {
-  const arr = ['/comp/auth'];
+  const arr = [
+    '/comp/basic',
+    '/comp/auth',
+    '/comp/modal',
+    '/comp/click-out-side',
+    '/comp/rich-editor',
+    '/comp/strengthMeter',
+    '/comp/qrcode',
+    '/comp/verify',
+    '/comp/markdown',
+    '/comp/virtual-scroll',
+    '/comp/count-to',
+  ];
   return arr.map((item) => type + item);
 }
diff --git a/src/comp/README.md b/src/comp/README.md
@@ -1,5 +1,6 @@
 # 介绍
 
+
 该项目的组件大部分没有进行全局注册。采用了哪里使用哪里注册的方式,如下
 
 ```vue
@@ -65,3 +66,19 @@ export function registerGlobComp(app: App<Element>) {
   });
 }
 ```
+
+
+
+::: tip 如果需要全局注册
+  在 [/@/setup/ant-design-vue/index.ts](https://github.com/anncwb/vue-vben-admin/tree/main/src/setup/ant-design-vue/index.ts)内将代码改成如下即可
+
+  ```ts
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+
+export function setupAntd(app: App<Element>) {
+  app.use(Antd);
+}
+
+  ```
+:::
diff --git a/src/comp/auth.md b/src/comp/auth.md
@@ -1,27 +1,29 @@
-# 权限组件
+# Authority 权限组件
 
 用于项目权限的组件，一般用于按钮级等细粒度权限管理
 
 ## 使用
 
-```tsx
+```vue
+<template>
+ <div>
+    <Authority :value="RoleEnum.ADMIN">
+      <a-button type="primary" block>
+        只有admin角色可见
+      </a-button>
+    </Authority>
+ </div>
+</template>
+<script>
 import  Authority from '/@/components/Authority/index';
-import { defineComponent } from 'compatible-vue';
+import { defineComponent } from 'vue';
 export default defineComponent({
+  components: { Authority },
   setup() {
-    return () => {
-      return (
-        <div>
-          <Authority value={RoleEnum.ADMIN}>
-            <Button type="primary" block>
-              只有admin角色可见
-            </Button>
-          </Authority>
-        </div>
-      );
-    };
+    return {};
   },
 });
+</script>
 ```
 
 ## Props

diff --git a/src/comp/basic.md b/src/comp/basic.md
@@ -0,0 +1,107 @@
+# Basic 基础组件
+
+一些比较基础的通用组件
+
+## BasicTitle
+
+用于显示标题
+
+### 使用
+
+```vue
+<template>
+ <div>
+    <BasicTitle helpMessage="提示1">标题</BasicTitle>
+    <BasicTitle :helpMessage="['提示1','提示2']">标题</BasicTitle>
+ </div>
+</template>
+<script>
+import  { BasicTitle } from '/@/components/Baisc/index';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: { BasicTitle },
+  setup() {
+    return {};
+  },
+});
+</script>
+```
+
+### Props
+
+| 属性     | 类型                   | 默认值            | 说明                                                         |
+| -------- | ---------------------- | ----------------- | ------------------------------------------------------------ |
+| helpMessage    | `string｜string[]` | -                 | 标题右侧帮助按钮信息
+| showSpan    | `boolean` | `true`               | 是否显示标题左侧蓝色色块
+
+### Slots
+
+| 名称    | 说明     |
+| ------- | -------- |
+| default | 标题文本 |
+
+
+## BasicArrow
+
+箭头组件,带动画
+
+### 使用
+
+```vue
+<template>
+ <div>
+    <BasicArrow :expand="false"/>
+ </div>
+</template>
+<script>
+import  { BaseArrow } from '/@/components/Baisc/index';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: { BasicArrow },
+  setup() {
+    return {};
+  },
+});
+</script>
+```
+
+### Props
+
+| 属性     | 类型                   | 默认值            | 说明                                                         |
+| -------- | ---------------------- | ----------------- | ------------------------------------------------------------ |
+| expand    | `boolean` | `true`               | 箭头展开状态
+
+## BasicHelp
+
+帮助按钮组件
+
+### 使用
+
+```vue
+<template>
+ <div>
+    <BaseHelp text="['提示1', '提示2']" />
+    <BaseHelp text="提示" />
+ </div>
+</template>
+<script>
+import  { BasicHelp } from '/@/components/Baisc/index';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: { BasicHelp },
+  setup() {
+    return {};
+  },
+});
+</script>
+```
+
+### Props
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+| --- | --- | --- | --- | --- |
+| fontSize | `string` | `14px` | - | 字体大小 |
+| color | `string` | #fff | - | 颜色 |
+| text | `string｜string[]` | - | - | 文本列表 |
+| showIndex | `boolean` | true | - | 是否显示序号,在 text 为 string[]情况下生效 |
+| maxWidth | `string` | `600px` | - | 最大宽度 |
+| icon | `string` | `info-circle` | - | 图标 |
diff --git a/src/comp/click-out-side.md b/src/comp/click-out-side.md
@@ -0,0 +1,42 @@
+# ClickOutSide 组件
+
+用于监听包裹的元素点击外部触发事件
+
+## 使用
+
+```vue
+<template>
+  <div>
+    <ClickOutSide @clickOutside="() => (showRef.value = false)">
+      <div class="click-out-side-demo-content" @click="() => (showRef.value = true)">
+        {{showRef ? '鼠标点击那部（点击边框外可以恢复）' : '点击该区域状态(初始状态)'}}
+      </div>
+    </ClickOutSide>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from 'vue';
+import { ClickOutSide } from '@/components/ClickOutSide/index.vue';
+export default defineComponent({
+  components:{ClickOutSide},
+  setup() {
+    const showRef = ref(false);
+    return  {
+      showRef
+    };
+  },
+});
+</script>
+```
+
+## events
+
+| 事件         | 回调参数   | 说明                     |
+| ------------ | ---------- | ------------------------ |
+| clickOutside | `Function` | 点击包裹元素外部区域触发 |
+
+## slots
+
+| 名称    | 说明         |
+| ------- | ------------ |
+| default | 被包裹的元素 |
diff --git a/src/comp/count-to.md b/src/comp/count-to.md
@@ -0,0 +1,25 @@
+# CountTo 数字动画组件
+
+该组件只是对于 [vue-countTo](https://github.com/PanJiaChen/vue-countTo) 进行调整，改造成适配vue3语法的组件。
+
+```vue
+<template>
+  <div class="p-4 count-to-demo">
+    <CountTo prefix="$" :startVal="1" :endVal="200000" :duration="8000" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { CountTo } from '/@/components/CountTo/index';
+  export default defineComponent({
+    components: {
+      CountTo,
+    },
+    setup() {
+      return {};
+    },
+  });
+</script>
+```
+
+相关**Props**及**Methods**请查看 [vue-countTo](https://github.com/PanJiaChen/vue-countTo)
diff --git a/src/comp/glob/button.md b/src/comp/glob/button.md
@@ -1,6 +1,6 @@
-# 按钮
+# button 按钮
 
-保持 [anvt button](https://2x.antdv.com/components/button-cn/) 原有功能的情况下扩展以下属性
+**保持** [anvt button](https://2x.antdv.com/components/button-cn/) **原有功能**的情况下扩展以下属性
 
 ::: tip
 1. 按钮不需要 import ,已经全局注册，直接使用 a-button 标签即可

diff --git a/src/comp/glob/icon.md b/src/comp/glob/icon.md
@@ -1,4 +1,4 @@
-# 图标组件
+# icon 图标组件
 
 用于项目内组件的展示,基本支持所有图标库
 
@@ -16,7 +16,7 @@ icon的值可以在[Iconify](https://iconify.design) 上面查询
 ```vue
 
 <template>
-<icon icon="gg:loadbar-doc"></icon>
+  <icon icon="gg:loadbar-doc"></icon>
 </template>
 ```