blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: add component version tip

Browse Source
This commit is contained in:
chenjiahan 2023-04-05 21:15:46 +08:00
parent 69b113717f
commit c43a6406ea
5 changed files with 33 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/text-ellipsis/README.md
View File

@ -2,7 +2,7 @@
### Intro
Display ellipsis for long text and support for expanding or collapsing text. Please upgrade to >= v4.1.0 before using this component.
Display ellipsis for long text and support for expanding or collapsing text. Please upgrade `vant` to >= v4.1.0 before using this component.
### Install

2
packages/vant/src/text-ellipsis/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍
对长文本进行省略，支持展开/收起。请升级到 >= 4.1.0 版本来使用该组件。
对长文本进行省略，支持展开/收起。请升级 `vant` 到 >= 4.1.0 版本来使用该组件。
### 引入

20
packages/vant/src/watermark/README.md
View File

@ -2,7 +2,7 @@
### Intro
Add watermark for page.
Add specific text or patterns on the page as watermarks, which can be used to prevent information theft. Please upgrade `vant` to >= v4.2.0 before using this component.
### Install
@ -93,22 +93,22 @@ Use the `default slot` to pass HTML directly. Inline styles are supported, and s
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| width | Watermark width | _number_ | 100 |
| height | Watermark height | _number_ | 100 |
| zIndex | Watermark's z-index | _number_ | 100 |
| width | Watermark width | _number_ | `100` |
| height | Watermark height | _number_ | `100` |
| zIndex | Watermark's z-index | _number_ | `100` |
| content | Text watermark content | _string_ | - |
| image | Image watermark content. If `content` and `image` are passed at the same time, use the `image` watermark first | _string_ | - |
| fullPage | Whether to display the watermark in full screen | _boolean_ | true |
| gapX | Horizontal spacing between watermarks | _number_ | 0 |
| gapY | Vertical spacing between watermarks | _number_ | 0 |
| fontColor | Color of text watermark | _string_ | #dcdee0 |
| opacity | opacity of watermark | _number_ | 1 |
| fullPage | Whether to display the watermark in full screen | _boolean_ | `true` |
| gapX | Horizontal spacing between watermarks | _number_ | `0` |
| gapY | Vertical spacing between watermarks | _number_ | `0` |
| fontColor | Color of text watermark | _string_ | `#dcdee0` |
| opacity | opacity of watermark | _number_ | `1` |
### Slots
| Attribute | Description |
| --- | --- |
| default | Content of HTML watermark. Inline styles are supported, and self-closing tags are not supported. This slot is invalid if `content` or `image` is passed |
| default | Content of HTML watermark. Inline styles are supported, and self-closing tags are not supported. This slot is invalid if `content` or `image` props is passed |
### Types

22
packages/vant/src/watermark/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍
页面上添加特定的文字或图案，可用于防止信息盗用
在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。请升级 `vant` 到 >= 4.2.0 版本来使用该组件。
### 引入
@ -30,7 +30,7 @@ app.use(Watermark);
### 自定义间隔
通过 `gapX` `gapY` 属性来控制重复水印之间的间隔。
通过 `gapX` 和 `gapY` 属性来控制多个重复水印之间的间隔。
```html
<van-watermark
@ -93,22 +93,22 @@ app.use(Watermark);
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 水印宽度 | _number_ | 100 |
| height | 水印高度 | _number_ | 100 |
| zIndex | 水印的 z-index | _number_ | 100 |
| width | 水印宽度 | _number_ | `100` |
| height | 水印高度 | _number_ | `100` |
| zIndex | 水印的 z-index | _number_ | `100` |
| content | 文字水印的内容 | _string_ | - |
| image | 图片水印的内容，如果与 content 同时传入，优先使用图片水印 | _string_ | - |
| fullPage | 水印是否全屏显示 | _boolean_ | false |
| gapX | 水印水平间隔 | _number_ | 0 |
| gapY | 水印垂直间隔 | _number_ | 0 |
| fontColor | 文字水印的颜色 | _string_ | #dcdee0 |
| opacity | 水印的透明度 | _number_ | 1 |
| fullPage | 水印是否全屏显示 | _boolean_ | `false` |
| gapX | 水印水平间隔 | _number_ | `0` |
| gapY | 水印垂直间隔 | _number_ | `0` |
| fontColor | 文字水印的颜色 | _string_ | `#dcdee0` |
| opacity | 水印的透明度 | _number_ | `1` |
### Slots
| 名称 | 说明 |
| --- | --- |
| default | HTML 水印的内容，仅支持行内样式同时不支持传入自闭合标签，存在 content 或 image 时此插槽无效 |
| default | HTML 水印的内容，仅支持行内样式同时不支持传入自闭合标签，存在 `content` 或 `image` 属性时，此插槽无效 |
### 类型定义

33
packages/vant/src/watermark/demo/index.vue
View File

@ -6,6 +6,7 @@ import { useTranslate } from '../../../docs/site';
const t = useTranslate({
'zh-CN': {
switch: '切换',
customOpacity: '自定义透明度',
customGap: '自定义间隔',
customImage: '自定义图片',
@ -14,9 +15,9 @@ const t = useTranslate({
htmlWatermark: 'HTML 水印',
textWatermark: '文字水印',
imageWatermark: '图片水印',
switch: '切换',
},
'en-US': {
switch: 'Switch',
customOpacity: 'Custom opacity',
customGap: 'Custom Gap',
customRotate: 'Custom Rotate',
@ -24,7 +25,6 @@ const t = useTranslate({
htmlWatermark: 'HTML Watermark',
textWatermark: 'Text Watermark',
imageWatermark: 'Image Watermark',
switch: 'Swtich',
},
});
const baseWatermarkFlag = ref<'text' | 'image'>('text');
@ -35,23 +35,16 @@ const fullPage = ref(false);
<demo-block :title="t('basicUsage')">
<div class="demo-watermark-wrapper">
<div style="position: relative; z-index: 9999">
<van-button type="primary" @click="baseWatermarkFlag = 'text'">
{{ t('textWatermark') }}
</van-button>
<van-button
@click="
() => {
baseWatermarkFlag = 'text';
}
"
>{{ t('textWatermark') }}</van-button
>
<van-button
@click="
() => {
baseWatermarkFlag = 'image';
}
"
type="primary"
style="margin: 0 var(--van-padding-md)"
>{{ t('imageWatermark') }}</van-button
@click="baseWatermarkFlag = 'image'"
>
{{ t('imageWatermark') }}
</van-button>
</div>
<van-watermark
content="Vant"
@ -100,13 +93,7 @@ const fullPage = ref(false);
<demo-block :title="t('displayRange')">
<div class="demo-watermark-wrapper">
<van-button
@click="
() => {
fullPage = !fullPage;
}
"
>
<van-button @click="fullPage = !fullPage">
{{ t('switch') }}
</van-button>
<van-watermark