Просмотр исходного кода

docs: add InputPassword and Footer demo

kailong321200875 3 лет назад
Родитель
Сommit
be049d862f
4 измененных файлов с 57 добавлено и 2 удалено
  1. 8 0
      .vitepress/config.js
  2. 18 0
      components/footer.md
  3. 30 0
      components/input-password.md
  4. 1 2
      hooks/useWatermark.md

+ 8 - 0
.vitepress/config.js

@@ -217,6 +217,14 @@ function createSidebar() {
             text: 'Error 缺省组件',
             link: '/components/error',
           },
+          {
+            text: 'InputPassword 密码输入框组件',
+            link: '/components/input-password',
+          },
+          {
+            text: 'Footer 页脚组件',
+            link: '/components/footer',
+          },
         ],
       },
       {

+ 18 - 0
components/footer.md

@@ -0,0 +1,18 @@
+# Footer 页脚
+
+为整个项目提供页脚信息,自动适应,内容高度不够时,会一直保持在最底部,内容超出则跟随在内容后面。
+
+Footer 组件位于 [src/components/Footer](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Footer) 内,如果需要修改页脚信息,可在组件内自定义修改。
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { Footer } from '@/components/Footer'
+</script>
+
+<template>
+  <Footer />
+</template>
+
+```

+ 30 - 0
components/input-password.md

@@ -0,0 +1,30 @@
+# InputPassword 密码输入框
+
+对 `element-plus` 的 `Input` 组件进行封装。
+
+InputPassword 组件位于 [src/components/InputPassword](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/InputPassword) 内
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { InputPassword } from '@/components/InputPassword'
+import { ref } from 'vue'
+
+const password = ref('')
+</script>
+
+<template>
+  <InputPassword v-model="password" strength />
+</template>
+
+```
+
+## InputPassword 属性
+
+除以下参数外,还支持 `element-plus` 的 `Input` 所有属性,[详见](https://element-plus.org/zh-CN/component/input.html#autocomplete-%E5%B1%9E%E6%80%A7)
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| strength | 是否显示强度校验 | `boolean` | - | false |
+| modelValue | 选中项绑定值,支持v-model | `string` | - | - |

+ 1 - 2
hooks/useWatermark.md

@@ -28,6 +28,7 @@ onBeforeUnmount(() => {
 
 ```ts
 const { setWatermark, clear } = useWatermark()
+```
 
 **setWatermark**
 
@@ -36,5 +37,3 @@ const { setWatermark, clear } = useWatermark()
 **clear**
 
 `clear` 用于清除水印
-
-```