github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 颜色按钮支持透明度

Browse Source
This commit is contained in:
pipipi-pikachu 2022-05-14 14:49:44 +08:00
parent 6a7e172140
commit f9568edb21
5 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -212,7 +212,7 @@ export default defineComponent({
watch(handleElement, () => { watch(handleElement, () => {
if (!handleElement.value || handleElement.value.type !== 'chart') return if (!handleElement.value || handleElement.value.type !== 'chart') return
fill.value = handleElement.value.fill || '#000' fill.value = handleElement.value.fill || 'transparent'
if (handleElement.value.options) { if (handleElement.value.options) {
const { const {

4
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
View File

@ -148,10 +148,10 @@ export default defineComponent({
'80px', '88px', '96px', '104px', '112px', '120px', '80px', '88px', '96px', '104px', '112px', '120px',
] ]
const fill = ref('#000') const fill = ref('transparent')
const outline = ref<PPTElementOutline>({ const outline = ref<PPTElementOutline>({
width: 0, width: 0,
color: '#000', color: 'transparent',
style: 'solid', style: 'solid',
}) })

2
src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
View File

@ -233,7 +233,7 @@ export default defineComponent({
watch(handleElement, () => { watch(handleElement, () => {
if (!handleElement.value || handleElement.value.type !== 'shape') return if (!handleElement.value || handleElement.value.type !== 'shape') return
fill.value = handleElement.value.fill || '#000' fill.value = handleElement.value.fill || 'transparent'
gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] } gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
fillType.value = handleElement.value.gradient ? 'gradient' : 'fill' fillType.value = handleElement.value.gradient ? 'gradient' : 'fill'
textAlign.value = handleElement.value?.text?.align || 'middle' textAlign.value = handleElement.value?.text?.align || 'middle'

30
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -71,20 +71,6 @@
</Button> </Button>
</Tooltip> </Tooltip>
</Popover> </Popover>
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="fill"
@update:modelValue="value => updateFill(value)"
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
<Button class="text-color-btn" style="flex: 1;">
<IconFill />
<div class="text-color-block" :style="{ backgroundColor: fill }"></div>
</Button>
</Tooltip>
</Popover>
</ButtonGroup> </ButtonGroup>
<CheckboxButtonGroup class="row"> <CheckboxButtonGroup class="row">
@ -225,6 +211,18 @@
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption> <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
</Select> </Select>
</div> </div>
<div class="row">
<div style="flex: 2;">文本框填充：</div>
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="fill"
@update:modelValue="value => updateFill(value)"
/>
</template>
<ColorButton :color="fill" style="flex: 3;" />
</Popover>
</div>
<Divider /> <Divider />
<ElementOutline /> <ElementOutline />
@ -248,6 +246,7 @@ import { message } from 'ant-design-vue'
import ElementOpacity from '../common/ElementOpacity.vue' import ElementOpacity from '../common/ElementOpacity.vue'
import ElementOutline from '../common/ElementOutline.vue' import ElementOutline from '../common/ElementOutline.vue'
import ElementShadow from '../common/ElementShadow.vue' import ElementShadow from '../common/ElementShadow.vue'
import ColorButton from '../common/ColorButton.vue'
const presetStyles = [ const presetStyles = [
{ {
@ -330,6 +329,7 @@ export default defineComponent({
ElementOpacity, ElementOpacity,
ElementOutline, ElementOutline,
ElementShadow, ElementShadow,
ColorButton,
}, },
setup() { setup() {
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
@ -349,7 +349,7 @@ export default defineComponent({
watch(handleElement, () => { watch(handleElement, () => {
if (!handleElement.value || handleElement.value.type !== 'text') return if (!handleElement.value || handleElement.value.type !== 'text') return
fill.value = handleElement.value.fill || '#000' fill.value = handleElement.value.fill || 'transparent'
lineHeight.value = handleElement.value.lineHeight || 1.5 lineHeight.value = handleElement.value.lineHeight || 1.5
wordSpace.value = handleElement.value.wordSpace || 0 wordSpace.value = handleElement.value.wordSpace || 0
}, { deep: true, immediate: true }) }, { deep: true, immediate: true })

12
src/views/Editor/Toolbar/common/ColorButton.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<Button class="color-btn"> <Button class="color-btn">
<div <div class="color-block">
class="color-block" <div class="content" :style="{ backgroundColor: color }"></div>
:style="{ backgroundColor: color }" </div>
></div>
<IconPlatte class="color-btn-icon" /> <IconPlatte class="color-btn-icon" />
</Button> </Button>
</template> </template>
@ -34,6 +33,11 @@ export default defineComponent({
margin-left: 8px; margin-left: 8px;
flex: 1; flex: 1;
outline: 1px dashed rgba($color: #666, $alpha: .12); outline: 1px dashed rgba($color: #666, $alpha: .12);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
}
.content {
width: 100%;
height: 100%;
} }
.color-btn-icon { .color-btn-icon {
width: 30px; width: 30px;