testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs(button-edit): finish api document of button edit

This commit is contained in:
Sagi 2022-10-05 16:33:19 +08:00
parent 574c805aac
commit c9420ea44e
1 changed files with 118 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
packages/ui-vue/docs/components/button-edit/index.md
View File

@ -24,6 +24,38 @@ const text = ref('');
## 对齐方式
:::demo
```vue
<script setup lang="ts">
import { ref } from 'vue';
const text = ref('Button Edit 按钮输入框');
const alignLeft = ref('left');
const alignCenter = ref('center');
const alignRight = ref('right');
</script>
<template>
<div class="my-2">
<span>缺省对齐: </span>
</div>
<f-button-edit v-model="text"></f-button-edit>
<div class="my-2">
<span>居左对齐: </span>
</div>
<f-button-edit :text-align="alignLeft" v-model="text"></f-button-edit>
<div class="my-2">
<span>居中对齐: </span>
</div>
<f-button-edit :text-align="alignCenter" v-model="text"></f-button-edit>
<div class="my-2">
<span>居右对齐: </span>
</div>
<f-button-edit :text-align="alignRight" v-model="text"></f-button-edit>
</template>
```
:::
## 状态
:::demo
@ -60,6 +92,38 @@ const readonly = ref(true);
## 按钮
:::demo
```vue
<script setup lang="ts">
import { ref } from 'vue';
const text = ref('');
const textButtonContent = ref('查询');
const searchIconContent = ref('<i class="f-icon f-icon-search"></i>');
const passwordIconContent = ref('<i class="f-icon f-icon-eye"></i>');
</script>
<template>
<div class="my-2">
<span>缺省按钮: </span>
</div>
<f-button-edit v-model="text"></f-button-edit>
<div class="my-2">
<span>文本按钮: </span>
</div>
<f-button-edit :button-content="textButtonContent" v-model="text"></f-button-edit>
<div class="my-2">
<span>查询按钮: </span>
</div>
<f-button-edit :button-content="searchIconContent" v-model="text"></f-button-edit>
<div class="my-2">
<span>密码按钮: </span>
</div>
<f-button-edit :button-content="passwordIconContent" v-model="text"></f-button-edit>
</template>
```
:::
## 清空按钮
:::demo 使用清空按钮可以快速置空文本框。
@ -91,8 +155,61 @@ const enableClear = ref(true);
## 文本标签
:::demo
```vue
<script setup lang="ts">
import { ref } from 'vue';
const text = ref('Button Edit 按钮输入框');
const enableTitle = ref(true);
</script>
<template>
<div class="my-2">
<span>鼠标悬停在输入框上方，查看文本标签: </span>
</div>
<f-button-edit :enable-title="enableTitle" v-model="text"></f-button-edit>
</template>
```
:::
## 提示信息
:::demo 使用清空按钮可以快速置空文本框。
```vue
<script setup lang="ts">
import { ref } from 'vue';
const text = ref('');
const buttonEditPlaceholder = ref('请输入...');
const forcePlaceholder = ref(true);
</script>
<template>
<div class="my-2">
<span>缺省情况: </span>
</div>
<f-button-edit :placeholder="buttonEditPlaceholder" v-model="text"></f-button-edit>
<div class="my-2">
<span>在缺省情况下，只读状态不显示提示信息: </span>
</div>
<f-button-edit :placeholder="buttonEditPlaceholder" readonly v-model="text"></f-button-edit>
<div class="my-2">
<span>在缺省情况下，禁用状态不显示提示信息: </span>
</div>
<f-button-edit :placeholder="buttonEditPlaceholder" disable v-model="text"></f-button-edit>
<div class="my-2">
<span>在只读状态下显示提示信息: </span>
</div>
<f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" readonly v-model="text"></f-button-edit>
<div class="my-2">
<span>在禁用状态下显示提示信息: </span>
</div>
<f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" disable v-model="text"></f-button-edit>
</template>
```
:::
## 类型
```typescript
@ -142,3 +259,4 @@ type TextAlignment = 'left' | 'center' | 'right';
::: tip
暂无内容
:::
Í