Skip to content

Commit 3a5871f

Browse files
xrkffggxrkffgg
committed
feat: add shadeColor
1 parent 5004e4a commit 3a5871f

File tree

6 files changed

+48
-9
lines changed

6 files changed

+48
-9
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Vue.component('image-dangling', ImageDangling)
3838
| hoverScale | The hover scale of the image. Require `>= 1 && <=5`. | number | ✖ | 1.6 | 1.0.0 |
3939
| hoverSlope | The hover slope of the image. Require `>= 10 && <=90`. | number | ✖ | 60 | 1.0.0 |
4040
| radius | The border radius of the component. | number | ✖ | 8 | 1.0.0 |
41+
| shadeColor | To set the mixed background color when use `blendMode`. | string | ✖ | `#000` | 1.1.0 |
4142
| src | The src of the image. | string | ✔ | - | 1.0.0 |
4243
| width | The width of the image. | number | ✖ | 300 | 1.0.0 |
4344

‎docs/.vuepress/components/demo/3.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="demo">
33
<image-dangling :src="src1" blend-mode></image-dangling>
4-
<image-dangling :src="src2" blend-mode="saturation"></image-dangling>
4+
<image-dangling :src="src2" blend-mode="hard-light"></image-dangling>
55
</div>
66
</template>
77

‎docs/README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ A Vue image component. Dangling interaction effect.
66

77
## 📚 Example
88

9-
Online: [https://image-component.github.io/vue-image-dangling/](https://image-component.github.io/vue-image-dangling/)
9+
Online: https://image-component.github.io/vue-image-dangling/
1010

1111
## 🌀 Template
1212

13-
[https://github.com/one-template/vue-component-template](https://github.com/one-template/vue-component-template)
13+
https://github.com/one-template/vue-component-template
1414

1515
## 📦 Install
1616

@@ -33,11 +33,12 @@ Vue.component('image-dangling', ImageDangling)
3333
| Property | Description | Type | Required | Default | Version |
3434
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------- | ------- |
3535
| alt | The alt of the image. | string | ✖ | - | 1.0.0 |
36-
| blendMode | Whether to enable `mix-blend-mode`.<br/><br/> When set `true`, the default is `soft-light`. More see [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). | boolean \| string | ✖ | false | 1.0.0 |
36+
| blendMode | Whether to enable `mix-blend-mode`.<br/> When set `true`, the default is `soft-light`. More see [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). | boolean \| string | ✖ | false | 1.0.0 |
3737
| className | Component extra class. | string | ✖ | - | 1.0.0 |
3838
| hoverScale | The hover scale of the image. Require `>= 1 && <=5`. | number | ✖ | 1.6 | 1.0.0 |
3939
| hoverSlope | The hover slope of the image. Require `>= 10 && <=90`. | number | ✖ | 60 | 1.0.0 |
4040
| radius | The border radius of the component. | number | ✖ | 8 | 1.0.0 |
41+
| shadeColor | To set the mixed background color when use `blendMode`. | string | ✖ | `#000` | 1.1.0 |
4142
| src | The src of the image. | string | ✔ | - | 1.0.0 |
4243
| width | The width of the image. | number | ✖ | 300 | 1.0.0 |
4344

‎docs/changelog.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# 🔖 Changelog
22

3+
## 1.1.0
4+
5+
`2020-12-16`
6+
7+
- feat: add `shadeColor`.
8+
39
## 1.0.0
410

511
`2020-12-15`

‎docs/demo.md

+31-3
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,22 @@ Use `hoverScale` `hoverSlope` to achieve different hover effects.
6363
</highlight-code>
6464
</demo-code>
6565

66+
For comfort. Suggest
67+
68+
- `1 <= hoverScale <= 5`
69+
- `10 <= hoverSlope <= 90`
70+
6671
## BlendMode
6772

6873
Use `blendMode` to achieve different background blending effects.
6974

70-
When set `true`, the default is `soft-light`. More see [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).
71-
7275
<demo-code>
7376
<demo-3></demo-3>
7477
<highlight-code slot="codeText" lang="vue">
7578
<template>
7679
<div class="demo">
7780
<image-dangling :src="src1" blend-mode></image-dangling>
78-
<image-dangling :src="src2" blend-mode="saturation"></image-dangling>
81+
<image-dangling :src="src2" blend-mode="hard-light"></image-dangling>
7982
</div>
8083
</template>
8184

@@ -91,3 +94,28 @@ When set `true`, the default is `soft-light`. More see [mix-blend-mode](https://
9194
</script>
9295
</highlight-code>
9396
</demo-code>
97+
98+
When set `true`, the default is `soft-light`. At the same time, you can use `shadeColor` to set the mixed background color, it default is `#000`.
99+
100+
More see [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). Or refer to the following list:
101+
102+
### `mix-blend-mode`
103+
104+
| Name | Chinese Name |
105+
| ------------- | ------------ |
106+
| ` normal` | 正常 |
107+
| `multiply ` | 正片叠底 |
108+
| `screen ` | 滤色 |
109+
| `overlay ` | 叠加 |
110+
| `darken; ` | 变暗 |
111+
| `lighten ` | 变亮 |
112+
| `color-dodge` | 颜色减淡 |
113+
| `color-burn ` | 颜色加深 |
114+
| ` hard-light` | 强光 |
115+
| ` soft-light` | 柔光 |
116+
| ` difference` | 差值 |
117+
| `exclusion` | 排除 |
118+
| `hue ` | 色相 |
119+
| `saturation` | 饱和度 |
120+
| `color ` | 颜色 |
121+
| ` luminosity` | 亮度 |

‎src/app.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ export default {
4848
blendMode: {
4949
type: [Boolean, String],
5050
default: false,
51+
},
52+
shadeColor: {
53+
type: String,
54+
default: '#000'
5155
}
5256
},
5357
@@ -106,14 +110,13 @@ export default {
106110
const lightConstrain = Math.min(Math.max(relY, 0.3), 0.7);
107111
const lightOpacity = this.scale(lightConstrain, 0.3, 1, 1, 0) * 255;
108112
const lightShade = `rgba(${lightOpacity}, ${lightOpacity}, ${lightOpacity}, 1)`;
109-
const lightShadeBlack = `rgba(0, 0, 0, 1)`;
110113
if (this.blendMode) {
111114
if(typeof(this.blendMode) == 'string') {
112115
card.style.mixBlendMode = this.blendMode;
113116
} else {
114117
card.style.mixBlendMode = 'soft-light';
115118
}
116-
card.style.backgroundImage = `radial-gradient(circle at ${lightX}% ${lightY}%, ${lightShade} 20%, ${lightShadeBlack})`;
119+
card.style.backgroundImage = `radial-gradient(circle at ${lightX}% ${lightY}%, ${lightShade} 20%, ${this.shadeColor})`;
117120
}
118121
},
119122

0 commit comments

Comments
 (0)