File size: 3,571 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<template>
<div class="element-shadow">
<div class="row">
<div style="width: 40%;">启用阴影：</div>
<div class="switch-wrapper" style="width: 60%;">
<Switch :value="hasShadow" @update:value="value => toggleShadow(value)" />
</div>
</div>
<template v-if="hasShadow && shadow">
<div class="row">
<div style="width: 40%;">水平阴影：</div>
<Slider
style="width: 60%;"
:min="-10"
:max="10"
:step="1"
:value="shadow.h"
@update:value="value => updateShadow({ h: value as number })"
/>
</div>
<div class="row">
<div style="width: 40%;">垂直阴影：</div>
<Slider
style="width: 60%;"
:min="-10"
:max="10"
:step="1"
:value="shadow.v"
@update:value="value => updateShadow({ v: value as number })"
/>
</div>
<div class="row">
<div style="width: 40%;">模糊距离：</div>
<Slider
style="width: 60%;"
:min="1"
:max="20"
:step="1"
:value="shadow.blur"
@update:value="value => updateShadow({ blur: value as number })"
/>
</div>
<div class="row">
<div style="width: 40%;">阴影颜色：</div>
<Popover trigger="click" style="width: 60%;">
<template #content>
<ColorPicker
:modelValue="shadow.color"
@update:modelValue="value => updateShadow({ color: value })"
/>
</template>
<ColorButton :color="shadow.color" />
</Popover>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import type { PPTElementShadow } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from '@/components/ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue'
import Slider from '@/components/Slider.vue'
import Popover from '@/components/Popover.vue'
const slidesStore = useSlidesStore()
const { theme } = storeToRefs(slidesStore)
const { handleElement } = storeToRefs(useMainStore())
const shadow = ref<PPTElementShadow>()
const hasShadow = ref(false)
watch(handleElement, () => {
if (!handleElement.value) return
shadow.value = 'shadow' in handleElement.value ? handleElement.value.shadow : undefined
hasShadow.value = !!shadow.value
}, { deep: true, immediate: true })
const { addHistorySnapshot } = useHistorySnapshot()
const updateShadow = (shadowProps: Partial<PPTElementShadow>) => {
if (!handleElement.value || !shadow.value) return
const _shadow = { ...shadow.value, ...shadowProps }
slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
addHistorySnapshot()
}
const toggleShadow = (checked: boolean) => {
if (!handleElement.value) return
if (checked) {
const _shadow: PPTElementShadow = theme.value.shadow
slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
}
else {
slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'shadow' })
}
addHistorySnapshot()
}
</script>
<style lang="scss" scoped>
.row {
width: 100%;
height: 30px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.switch-wrapper {
text-align: right;
}
</style> |