Skip to content

Commit d3e592f

Browse files
alonehoveralonehover
committed
fix: fix gradient color bar
1 parent b090d5f commit d3e592f

File tree

5 files changed

+87
-43
lines changed

5 files changed

+87
-43
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite App</title>
7+
<title>Vue3 ColorPicker</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎packages/ColorPicker.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<template>
22
<div
3-
:class="['vc-color-wrap', 'transparent', { round: shape === 'circle' }]"
3+
class="vc-color-wrap transparent"
4+
:class="{ round: shape === 'circle' }"
45
v-if="!isWidget"
56
ref="colorCubeRef"
67
>
78
<div class="current-color" :style="getBgColorStyle" @click="onShowPicker"></div>
89
</div>
10+
911
<WrapContainer
1012
v-model:active-key="state.activeKey"
1113
v-if="isWidget"
@@ -60,7 +62,9 @@
6062
type: [String, Object] as PropType<ColorInputWithoutInstance>,
6163
default: "#000000",
6264
},
63-
gradientColor: propTypes.string.def("#000"),
65+
gradientColor: propTypes.string.def(
66+
"linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"
67+
),
6468
format: {
6569
type: String as PropType<ColorFormat>,
6670
default: "rgb",
@@ -117,12 +121,15 @@
117121
gradientColor: props.gradientColor,
118122
});
119123
124+
console.log("gradientColor", props.gradientColor);
125+
120126
// Ref
121127
const showPicker = ref(false);
122128
const colorCubeRef = ref<HTMLElement | null>(null);
123129
const pickerRef = ref<HTMLElement | null>(null);
124130
125131
const getBgColorStyle = computed(() => {
132+
console.log(state.activeKey);
126133
const bgColor =
127134
state.activeKey !== "gradient"
128135
? tinycolor(state.pureColor).toRgbString()
@@ -211,15 +218,15 @@
211218
gradientState.angle = Number(colorNode.orientation?.value) || 0;
212219
213220
const [r, g, b, a] = startColorVal.value;
214-
const [r1, g1, b1, a1] = startColorVal.value;
221+
const [r1, g1, b1, a1] = endColorVal.value;
215222
216223
gradientState.startColor = new Color({
217224
r: Number(r),
218225
g: Number(g),
219226
b: Number(b),
220227
a: Number(a),
221228
});
222-
gradientState.startColor = new Color({
229+
gradientState.endColor = new Color({
223230
r: Number(r1),
224231
g: Number(g1),
225232
b: Number(b1),

‎packages/gradient/GradientColorPicker.vue‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,21 @@
1111
<div class="vc-background" :style="gradientBg"></div>
1212
<div class="vc-gradient__stop__container">
1313
<div
14-
:class="[
15-
'vc-gradient__stop',
16-
{
17-
'vc-gradient__stop--current': state.startActive,
18-
},
19-
]"
14+
class="vc-gradient__stop"
15+
:class="{
16+
'vc-gradient__stop--current': state.startActive,
17+
}"
2018
ref="startGradientRef"
2119
:title="lang === 'ZH-cn' ? '开始' : 'Start'"
2220
:style="{ left: getStartColorLeft + 'px' }"
2321
>
2422
<span class="vc-gradient__stop--inner"></span>
2523
</div>
2624
<div
27-
:class="[
28-
'vc-gradient__stop',
29-
{
30-
'vc-gradient__stop--current': !state.startActive,
31-
},
32-
]"
25+
class="vc-gradient__stop"
26+
:class="{
27+
'vc-gradient__stop--current': !state.startActive,
28+
}"
3329
ref="stopGradientRef"
3430
:title="lang === 'ZH-cn' ? '结束' : 'End'"
3531
:style="{ left: getEndColorLeft + 'px' }"
@@ -66,7 +62,7 @@
6662
</template>
6763

6864
<script lang="ts">
69-
import { computed, defineComponent, inject, reactive, ref } from "vue";
65+
import { computed, defineComponent, inject, reactive, ref, watch } from "vue";
7066
import propTypes from "vue-types";
7167
import { Angle } from "vue3-angle";
7268
import Alpha from "../common/Alpha.vue";
@@ -133,6 +129,15 @@
133129
const stopGradientRef = ref<HTMLElement>();
134130
const colorRangeRef = ref<HTMLElement>();
135131
132+
watch(
133+
() => [props.startColor, props.endColor, props.angle],
134+
(val: any[]) => {
135+
state.startColor = val[0];
136+
state.endColor = val[1];
137+
state.angle = val[2];
138+
}
139+
);
140+
136141
const currentColor = computed({
137142
get: () => {
138143
return state.startActive ? state.startColor : state.endColor;

‎packages/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { App, Plugin } from "vue";
22

33
import "./styles/index.scss";
44
import ColorPicker from "./ColorPicker.vue";
5-
import type { ColorPickerProps } from "./ColorPicker.vue";
5+
import type ColorPickerProps from "./ColorPicker.vue";
66

77
const Vue3ColorPicker: Plugin = {
88
install: (app: App) => {

‎src/App.vue‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,69 @@
1-
<script setup lang="ts">
2-
// This starter template is using Vue 3 <script setup> SFCs
3-
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
4-
import { ref } from "vue";
5-
import { ColorInput } from "tinycolor2";
6-
import { ColorPicker } from "../packages";
1+
<template>
2+
<div :style="bg" class="bg">{{ color }}</div>
73

8-
const color = ref<ColorInput>("red");
4+
<div :style="bgline" class="bg"> {{ gradientColor }} </div>
95

10-
const color1 = ref<ColorInput>("green");
6+
<div class="main">
7+
<div class="color-pickers">
8+
<ColorPicker v-model:pureColor="color" />
9+
<ColorPicker v-model:pureColor="color" shape="circle" />
10+
<ColorPicker v-model:gradientColor="gradientColor" useType="gradient" />
11+
</div>
1112

12-
setTimeout(() => (color.value = "431893"), 100);
13-
</script>
13+
<div class="color-pickers">
14+
<ColorPicker v-model:pureColor="color" is-widget />
15+
<ColorPicker v-model:pureColor="color" is-widget pickerType="chrome" />
16+
<ColorPicker
17+
v-model:pureColor="color"
18+
v-model:gradientColor="gradientColor"
19+
is-widget
20+
useType="both"
21+
/>
1422

15-
<template>
16-
<img alt="Vue logo" src="./assets/logo.png" />
17-
{{ color }}
18-
<div>
19-
<div style="display: inline-block">
20-
<ColorPicker v-model:color="color" format="rgb" id="a1" round />
21-
</div>
22-
<div style="display: inline-block; margin-left: 30px">
23-
<ColorPicker v-model:color="color1" picker-type="chrome" format="rgb" id="a2" />
23+
<ColorPicker v-model:gradientColor="gradientColor" is-widget useType="gradient" />
2424
</div>
2525
</div>
2626
</template>
2727

28+
<script setup lang="ts">
29+
import { computed, ref } from "vue";
30+
31+
const color = ref("blue");
32+
const gradientColor = ref(
33+
"linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"
34+
);
35+
36+
const bg = computed(() => {
37+
return { background: color.value };
38+
});
39+
const bgline = computed(() => {
40+
return { background: gradientColor.value };
41+
});
42+
</script>
43+
2844
<style>
29-
#app {
45+
body,
46+
html {
47+
margin: 0;
48+
padding: 0;
3049
font-family: Avenir, Helvetica, Arial, sans-serif;
31-
-webkit-font-smoothing: antialiased;
32-
-moz-osx-font-smoothing: grayscale;
3350
text-align: center;
34-
color: #2c3e50;
35-
margin-top: 60px;
51+
}
52+
53+
.main {
54+
padding: 40px 10%;
55+
}
56+
57+
.color-pickers {
58+
display: flex;
59+
flex-wrap: wrap;
60+
gap: 10px;
61+
margin-bottom: 20px;
62+
}
63+
64+
.bg {
65+
color: #fff;
66+
font-size: 24px;
67+
padding: 40px 0;
3668
}
3769
</style>

0 commit comments

Comments
 (0)