mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
chore(Watermark): rename default slot to content (#11755)
This commit is contained in:
neverland
GitHub
parent
8bc6169ae1
commit
d876b1f8be
@ -76,13 +76,15 @@ Use the `full-page` prop to control the display range of the watermark.
|
||||
|
||||
### HTML Watermark
|
||||
|
||||
Use the `default` slot to pass HTML directly. Inline styles are supported, and self-closing tags are not supported.
|
||||
Use the `content` slot to pass HTML as watermark. Only supports inline styles, and self-closing tags are not supported.
|
||||
|
||||
```html
|
||||
<van-watermark :width="150">
|
||||
<div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
|
||||
<p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
|
||||
</div>
|
||||
<template #content>
|
||||
<div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
|
||||
<p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
|
||||
</div>
|
||||
</template>
|
||||
</van-watermark>
|
||||
```
|
||||
|
||||
@ -98,8 +100,8 @@ Use the `default` slot to pass HTML directly. Inline styles are supported, and s
|
||||
| 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_ | - |
|
||||
| full-page | Whether to display the watermark in full screen | _boolean_ | `true` |
|
||||
| gapX | Horizontal spacing between watermarks | _number_ | `0` |
|
||||
| gapY | Vertical spacing between watermarks | _number_ | `0` |
|
||||
| gap-x | Horizontal spacing between watermarks | _number_ | `0` |
|
||||
| gap-y | Vertical spacing between watermarks | _number_ | `0` |
|
||||
| text-color | Color of text watermark | _string_ | `#dcdee0` |
|
||||
| opacity | Opacity of watermark | _number \| string_ | - |
|
||||
|
||||
@ -107,7 +109,7 @@ Use the `default` slot to pass HTML directly. Inline styles are supported, and s
|
||||
|
||||
| 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` props is passed |
|
||||
| content | Content of HTML watermark. Only supports inline styles, and self-closing tags are not supported. The priority is higher than `content` or `image` props |
|
||||
|
||||
### Types
|
||||
|
||||
|
||||
@ -76,13 +76,15 @@ app.use(Watermark);
|
||||
|
||||
### HTML 水印
|
||||
|
||||
通过默认插槽可以直接传入 HTML，HTML 样式仅支持行内样式同时不支持传入自闭合标签。
|
||||
通过 `content` 插槽可以直接传入 HTML 作为水印。HTML 中的样式仅支持行内样式，同时不支持传入自闭合标签。
|
||||
|
||||
```html
|
||||
<van-watermark :width="150">
|
||||
<div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
|
||||
<p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
|
||||
</div>
|
||||
<template #content>
|
||||
<div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
|
||||
<p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
|
||||
</div>
|
||||
</template>
|
||||
</van-watermark>
|
||||
```
|
||||
|
||||
@ -98,8 +100,8 @@ app.use(Watermark);
|
||||
| content | 文字水印的内容 | _string_ | - |
|
||||
| image | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_ | - |
|
||||
| full-page | 水印是否全屏显示 | _boolean_ | `false` |
|
||||
| gapX | 水印之间的水平间隔 | _number_ | `0` |
|
||||
| gapY | 水印之间的垂直间隔 | _number_ | `0` |
|
||||
| gap-x | 水印之间的水平间隔 | _number_ | `0` |
|
||||
| gap-y | 水印之间的垂直间隔 | _number_ | `0` |
|
||||
| text-color | 文字水印的颜色 | _string_ | `#dcdee0` |
|
||||
| opacity | 水印的透明度 | _number \| string_ | - |
|
||||
|
||||
@ -107,7 +109,7 @@ app.use(Watermark);
|
||||
|
||||
| 名称 | 说明 |
|
||||
| --- | --- |
|
||||
| default | HTML 水印的内容，仅支持行内样式同时不支持传入自闭合标签，存在 `content` 或 `image` 属性时，此插槽无效 |
|
||||
| content | HTML 水印的内容，仅支持行内样式，同时不支持传入自闭合标签，优先级高于 `content` 或 `image` 属性 |
|
||||
|
||||
### 类型定义
|
||||
|
||||
|
||||
@ -47,8 +47,13 @@ export default defineComponent({
|
||||
const watermarkUrl = ref('');
|
||||
const imageBase64 = ref('');
|
||||
const renderWatermark = () => {
|
||||
const rotateStyle = {
|
||||
transformOrigin: 'center',
|
||||
transform: `rotate(${props.rotate}deg)`,
|
||||
};
|
||||
|
||||
const svgInner = () => {
|
||||
if (props.image) {
|
||||
if (props.image && !slots.content) {
|
||||
return (
|
||||
<image
|
||||
href={imageBase64.value}
|
||||
@ -56,11 +61,8 @@ export default defineComponent({
|
||||
y="0"
|
||||
width={props.width}
|
||||
height={props.height}
|
||||
style={{
|
||||
transformOrigin: 'center',
|
||||
transform: `rotate(${props.rotate}deg)`,
|
||||
}}
|
||||
></image>
|
||||
style={rotateStyle}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -69,20 +71,12 @@ export default defineComponent({
|
||||
<div
|
||||
// @ts-ignore
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
style={{
|
||||
transform: `rotate(${props.rotate}deg)`,
|
||||
}}
|
||||
style={rotateStyle}
|
||||
>
|
||||
{props.content ? (
|
||||
<span
|
||||
style={{
|
||||
color: props.textColor,
|
||||
}}
|
||||
>
|
||||
{props.content}
|
||||
</span>
|
||||
{slots.content ? (
|
||||
slots.content()
|
||||
) : (
|
||||
slots?.default?.()
|
||||
<span style={{ color: props.textColor }}>{props.content}</span>
|
||||
)}
|
||||
</div>
|
||||
</foreignObject>
|
||||
@ -181,7 +175,7 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
<div class={bem({ full: props.fullPage })} style={style}>
|
||||
<div style={{ display: 'none' }} ref={svgElRef}>
|
||||
<div class={bem('wrapper')} ref={svgElRef}>
|
||||
{renderWatermark()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -88,11 +88,17 @@ const fullPage = ref(false);
|
||||
<demo-block :title="t('htmlWatermark')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<van-watermark :width="150" :full-page="false">
|
||||
<div
|
||||
style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)"
|
||||
>
|
||||
<p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
|
||||
</div>
|
||||
<template #content>
|
||||
<div
|
||||
style="
|
||||
background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
|
||||
"
|
||||
>
|
||||
<p style="mix-blend-mode: difference; color: #fff">
|
||||
Vant watermark
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</van-watermark>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
background-repeat: repeat;
|
||||
pointer-events: none;
|
||||
|
||||
&__wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--full {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`watermark should render content 1`] = `
|
||||
<div class="van-watermark van-watermark--full"
|
||||
style="background-image: url();"
|
||||
>
|
||||
<div style="display: none;">
|
||||
<div class="van-watermark__wrapper">
|
||||
<svg viewbox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
@ -17,7 +17,7 @@ exports[`watermark should render content 1`] = `
|
||||
height="100"
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
style="transform: rotate(-22deg);"
|
||||
style="transform-origin: center; transform: rotate(-22deg);"
|
||||
>
|
||||
<span style="color: red;">
|
||||
Vant
|
||||
@ -33,7 +33,7 @@ exports[`watermark should render html 1`] = `
|
||||
<div class="van-watermark van-watermark--full"
|
||||
style="background-image: url();"
|
||||
>
|
||||
<div style="display: none;">
|
||||
<div class="van-watermark__wrapper">
|
||||
<svg viewbox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
@ -46,7 +46,7 @@ exports[`watermark should render html 1`] = `
|
||||
height="100"
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
style="transform: rotate(-22deg);"
|
||||
style="transform-origin: center; transform: rotate(-22deg);"
|
||||
>
|
||||
vant watermark test
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ exports[`watermark should render image 1`] = `
|
||||
<div class="van-watermark van-watermark--full"
|
||||
style="background-image: url();"
|
||||
>
|
||||
<div style="display: none;">
|
||||
<div class="van-watermark__wrapper">
|
||||
<svg viewbox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
@ -84,7 +84,7 @@ exports[`watermark test false value fullPage 1`] = `
|
||||
<div class="van-watermark"
|
||||
style="background-image: url();"
|
||||
>
|
||||
<div style="display: none;">
|
||||
<div class="van-watermark__wrapper">
|
||||
<svg viewbox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
@ -97,7 +97,7 @@ exports[`watermark test false value fullPage 1`] = `
|
||||
height="100"
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
style="transform: rotate(-22deg);"
|
||||
style="transform-origin: center; transform: rotate(-22deg);"
|
||||
>
|
||||
vant watermark test
|
||||
</div>
|
||||
@ -111,7 +111,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
|
||||
<div class="van-watermark van-watermark--full"
|
||||
style="background-image: url(); z-index: 200;"
|
||||
>
|
||||
<div style="display: none;">
|
||||
<div class="van-watermark__wrapper">
|
||||
<svg viewbox="0 0 20 20"
|
||||
width="20"
|
||||
height="20"
|
||||
@ -124,7 +124,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
|
||||
height="20"
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
style="transform: rotate(20deg);"
|
||||
style="transform-origin: center; transform: rotate(20deg);"
|
||||
>
|
||||
vant watermark test
|
||||
</div>
|
||||
|
||||
@ -70,7 +70,7 @@ describe('watermark', () => {
|
||||
test('should render html', () => {
|
||||
const wrapper = mount(Watermark, {
|
||||
slots: {
|
||||
default: () => 'vant watermark test',
|
||||
content: () => 'vant watermark test',
|
||||
},
|
||||
});
|
||||
|
||||
@ -86,7 +86,7 @@ describe('watermark', () => {
|
||||
zIndex: 200,
|
||||
},
|
||||
slots: {
|
||||
default: () => 'vant watermark test',
|
||||
content: () => 'vant watermark test',
|
||||
},
|
||||
});
|
||||
|
||||
@ -99,7 +99,7 @@ describe('watermark', () => {
|
||||
fullPage: false,
|
||||
},
|
||||
slots: {
|
||||
default: () => 'vant watermark test',
|
||||
content: () => 'vant watermark test',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user