brian/activist
1
0
Fork 0
Code Activity Actions

Get color working.

Browse source
This commit is contained in:
Brian D 2024-11-17 15:01:11 -05:00
parent 1106ba403c
commit 24c00be38f
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Sticker.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import QRCode from "@/components/QRCode.vue"; import QRCode from "@/components/QRCode.vue";
import {computed} from "vue"; import {computed, reactive} from "vue";
const { const {
layout, layout, color,
message1, message2, message1, message2,
message3, message4, message3, message4,
} = defineProps([ } = defineProps([
'layout', 'layout', 'color',
'message1', 'message2', 'message1', 'message2',
'message3', 'message4', 'message3', 'message4',
]) ])
@ -63,7 +63,7 @@ const layout4Class = computed(() => ({
} }
.sticker { .sticker {
aspect-ratio: 6 / 1; aspect-ratio: 6 / 1;
background-color: darkblue; background-color: v-bind(color);
display: flex; display: flex;
overflow: hidden; overflow: hidden;
.content { .content {

14
src/views/StickerView.vue
View file

@ -14,7 +14,7 @@ import RadioButton from 'primevue/radiobutton';
import Select from 'primevue/select'; import Select from 'primevue/select';
import Sticker from '@/components/Sticker.vue'; import Sticker from '@/components/Sticker.vue';
import ToggleSwitch from 'primevue/toggleswitch'; import ToggleSwitch from 'primevue/toggleswitch';
import { ref } from 'vue'; import {computed, ref} from 'vue';
const checked = ref(true); const checked = ref(true);
const selectedCountry = ref(null); const selectedCountry = ref(null);
@ -53,6 +53,11 @@ message3.value = "m3";
const message4 = defineModel('message4'); const message4 = defineModel('message4');
message4.value = ""; message4.value = "";
const color = defineModel('background-color'); const color = defineModel('background-color');
color.value = '000088';
const color2 = computed(() => {
return '#' + color.value;
})
function onFormSubmit() { function onFormSubmit() {
return {}; return {};
@ -65,14 +70,15 @@ function onFormSubmit() {
<div id="StickerWrapper"> <div id="StickerWrapper">
<p>6-inch sticker</p> <p>6-inch sticker</p>
<Sticker <Sticker
id="Sticker1" v-bind:layout id="Sticker1"
v-bind:layout v-bind:color="color2"
v-bind:message1 v-bind:message2 v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4 v-bind:message3 v-bind:message4
/> />
<p>8-inch sticker</p> <p>8-inch sticker</p>
<Sticker <Sticker
id="Sticker2" id="Sticker2"
v-bind:layout v-bind:layout v-bind:color="color2"
v-bind:message1 v-bind:message2 v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4 v-bind:message3 v-bind:message4
/> />
@ -131,7 +137,7 @@ function onFormSubmit() {
<div class="divider" /> <div class="divider" />
<div class="col-span-12 md:col-span-6"> <div class="col-span-12 md:col-span-6">
<label for="email2">Background Color</label> <label for="email2">Background Color {{color}}</label>
<ColorPicker v-model="color" /> <ColorPicker v-model="color" />
</div> </div>
<div class="col-span-12 md:col-span-6"> <div class="col-span-12 md:col-span-6">