my_org
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
pipipi-pikachu 2021-01-05 23:01:20 +08:00
parent 6b67e87699
commit f9cdbbeffc
1 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,27 +24,27 @@
<template #content> <template #content>
<ColorPicker v-model="richTextAttrs.color" /> <ColorPicker v-model="richTextAttrs.color" />
</template> </template>
<Button class="color-btn" style="flex: 1;"> <Button class="text-color-btn" style="flex: 1;">
<FontColorsOutlined /> <FontColorsOutlined />
<div class="color-block" :style="{ backgroundColor: richTextAttrs.color }"></div> <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button> </Button>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click">
<template #content> <template #content>
<ColorPicker v-model="richTextAttrs.backcolor" /> <ColorPicker v-model="richTextAttrs.backcolor" />
</template> </template>
<Button class="color-btn" style="flex: 1;"> <Button class="text-color-btn" style="flex: 1;">
<HighlightOutlined /> <HighlightOutlined />
<div class="color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div> <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button> </Button>
</Popover> </Popover>
<Popover trigger="click"> <Popover trigger="click">
<template #content> <template #content>
<ColorPicker v-model="fill" /> <ColorPicker v-model="fill" />
</template> </template>
<Button class="color-btn" style="flex: 1;"> <Button class="text-color-btn" style="flex: 1;">
<BgColorsOutlined /> <BgColorsOutlined />
<div class="color-block" :style="{ backgroundColor: fill }"></div> <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
</Button> </Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
@ -105,48 +105,46 @@
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">描边颜色：</div> <div style="flex: 2;">描边颜色：</div>
<Select style="flex: 3;" :value="wordSpace"> <Popover trigger="click">
<template #suffixIcon><ColumnWidthOutlined /></template> <template #content>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption> <ColorPicker v-model="fill" />
</Select> </template>
<Button class="color-btn" style="flex: 3;">
<div class="color-block"></div>
<DownOutlined class="color-btn-icon" />
</Button>
</Popover>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">描边粗细：</div> <div style="flex: 2;">描边粗细：</div>
<Select style="flex: 3;" :value="wordSpace"> <InputNumber style="flex: 3;" />
<template #suffixIcon><ColumnWidthOutlined /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption>
</Select>
</div> </div>
<Divider /> <Divider />
<div class="row"> <div class="row">
<div style="flex: 2;">水平阴影：</div> <div style="flex: 2;">水平阴影：</div>
<Select style="flex: 3;" :value="wordSpace"> <Slider :min="0" :max="1" :step="0.1" :value="opacity" style="flex: 3;" />
<template #suffixIcon><ColumnWidthOutlined /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption>
</Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">垂直阴影：</div> <div style="flex: 2;">垂直阴影：</div>
<Select style="flex: 3;" :value="wordSpace"> <Slider :min="0" :max="1" :step="0.1" :value="opacity" style="flex: 3;" />
<template #suffixIcon><ColumnWidthOutlined /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption>
</Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">模糊距离：</div> <div style="flex: 2;">模糊距离：</div>
<Select style="flex: 3;" :value="wordSpace"> <Slider :min="0" :max="1" :step="0.1" :value="opacity" style="flex: 3;" />
<template #suffixIcon><ColumnWidthOutlined /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption>
</Select>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">阴影颜色：</div> <div style="flex: 2;">阴影颜色：</div>
<Select style="flex: 3;" :value="wordSpace"> <Popover trigger="click">
<template #suffixIcon><ColumnWidthOutlined /></template> <template #content>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption> <ColorPicker v-model="fill" />
</Select> </template>
<Button class="color-btn" style="flex: 3;">
<div class="color-block"></div>
<DownOutlined class="color-btn-icon" />
</Button>
</Popover>
</div> </div>
<Divider /> <Divider />
@ -167,7 +165,7 @@ import emitter, { EmitterEvents } from '@/utils/emitter'
import { TextAttrs } from '@/prosemirror/utils' import { TextAttrs } from '@/prosemirror/utils'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import { Select, Input, Button, Divider, Slider, Popover } from 'ant-design-vue' import { Select, Input, Button, Divider, Slider, Popover, InputNumber } from 'ant-design-vue'
import { import {
FontColorsOutlined, FontColorsOutlined,
HighlightOutlined, HighlightOutlined,
@ -183,6 +181,7 @@ import {
UnorderedListOutlined, UnorderedListOutlined,
ColumnHeightOutlined, ColumnHeightOutlined,
ColumnWidthOutlined, ColumnWidthOutlined,
DownOutlined,
} from '@ant-design/icons-vue' } from '@ant-design/icons-vue'
export default defineComponent({ export default defineComponent({
@ -197,6 +196,7 @@ export default defineComponent({
Divider, Divider,
Slider, Slider,
Popover, Popover,
InputNumber,
FontColorsOutlined, FontColorsOutlined,
HighlightOutlined, HighlightOutlined,
BgColorsOutlined, BgColorsOutlined,
@ -211,6 +211,7 @@ export default defineComponent({
UnorderedListOutlined, UnorderedListOutlined,
ColumnHeightOutlined, ColumnHeightOutlined,
ColumnWidthOutlined, ColumnWidthOutlined,
DownOutlined,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore<State>()
@ -279,15 +280,30 @@ export default defineComponent({
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.color-btn { .text-color-btn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.color-block { .text-color-block {
width: 16px; width: 16px;
height: 3px; height: 3px;
margin-top: 1px; margin-top: 1px;
} }
.color-btn {
display: flex;
align-items: center;
padding: 0 !important;
}
.color-block {
width: 100px;
height: 20px;
background-color: #777;
margin: 0 8px;
}
.color-btn-icon {
font-size: 12px;
margin-top: 2px;
}
</style> </style>