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 2023-10-13 14:14:21 +08:00
parent 27210e57f4
commit e3aef88a58
8 changed files with 109 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Button.vue
View File

@ -9,6 +9,8 @@
'checkbox': !disabled && type === 'checkbox', 'checkbox': !disabled && type === 'checkbox',
'radio': !disabled && type === 'radio', 'radio': !disabled && type === 'radio',
'small': size === 'small', 'small': size === 'small',
'first': first,
'last': last,
}" }"
@click="handleClick()" @click="handleClick()"
> >
@ -22,11 +24,15 @@ const props = withDefaults(defineProps<{
disabled?: boolean disabled?: boolean
type?: 'default' | 'primary' | 'checkbox' | 'radio' type?: 'default' | 'primary' | 'checkbox' | 'radio'
size?: 'small' | 'normal' size?: 'small' | 'normal'
first?: boolean
last?: boolean
}>(), { }>(), {
checked: false, checked: false,
disabled: false, disabled: false,
type: 'default', type: 'default',
size: 'normal', size: 'normal',
first: false,
last: false,
}) })
const emit = defineEmits<{ const emit = defineEmits<{

83
src/components/ButtonGroup.vue
View File

@ -1,36 +1,85 @@
<template> <template>
<div class="button-group"> <div class="button-group" :class="{ 'passive': passive }" ref="groupRef">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
withDefaults(defineProps<{
passive?: boolean
}>(), {
passive: false,
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.button-group { .button-group {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #d9d9d9;
border-right: 0;
border-radius: $borderRadius;
overflow: hidden;
::v-deep(.button) { ::v-deep(button.button) {
border-radius: 0; border-radius: 0;
border: 0; border-left-width: 1px;
border-right-width: 0;
display: inline-block; display: inline-block;
position: relative; }
&::after { &:not(.passive) {
content: ''; ::v-deep(button.button) {
width: 1px; &:not(:last-child, .radio, .checkbox):hover {
height: 100%; position: relative;
background-color: #d9d9d9;
position: absolute; &::after {
top: 0; content: '';
right: 0; width: 1px;
height: calc(100% + 2px);
background-color: $themeColor;
position: absolute;
top: -1px;
right: -1px;
}
}
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-left-width: 1px;
}
&:last-child {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-right-width: 1px;
}
}
}
&.passive {
::v-deep(button.button) {
&:not(.last, .radio, .checkbox):hover {
position: relative;
&::after {
content: '';
width: 1px;
height: calc(100% + 2px);
background-color: $themeColor;
position: absolute;
top: -1px;
right: -1px;
}
}
&.first {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-left-width: 1px;
}
&.last {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-right-width: 1px;
}
} }
} }
} }

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

@ -105,7 +105,7 @@
</div> </div>
</Popover> </Popover>
</div> </div>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;"> <Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
<template #content> <template #content>
<div class="preset-themes"> <div class="preset-themes">
@ -123,10 +123,10 @@
</div> </div>
</div> </div>
</template> </template>
<Button class="no-padding" style="width: 100%;">推荐主题</Button> <Button first style="width: 100%;">推荐主题</Button>
</Popover> </Popover>
<Button <Button
class="no-padding" last
:disabled="themeColor.length >= 10" :disabled="themeColor.length >= 10"
style="width: 60%;" style="width: 60%;"
@click="addThemeColor()" @click="addThemeColor()"

6
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -7,8 +7,8 @@
<ElementFlip /> <ElementFlip />
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button> <Button first style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
<Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);"> <Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
<template #content> <template #content>
<div class="clip"> <div class="clip">
@ -37,7 +37,7 @@
</template> </template>
</div> </div>
</template> </template>
<Button class="popover-btn" style="width: 100%;"><IconDown /></Button> <Button last class="popover-btn" style="width: 100%;"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>

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

@ -77,7 +77,7 @@
</template> </template>
</Select> </Select>
</SelectGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;"> <Popover trigger="click" style="width: 30%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
@ -85,7 +85,7 @@
@update:modelValue="value => updateFontStyle('color', value)" @update:modelValue="value => updateFontStyle('color', value)"
/> />
</template> </template>
<TextColorButton :color="richTextAttrs.color" v-tooltip="'文字颜色'"> <TextColorButton first :color="richTextAttrs.color" v-tooltip="'文字颜色'">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -106,7 +106,8 @@
v-tooltip="'增大字号'" v-tooltip="'增大字号'"
@click="updateFontStyle('fontsize-add', '2')" @click="updateFontStyle('fontsize-add', '2')"
><IconFontSize />+</Button> ><IconFontSize />+</Button>
<Button <Button
last
class="font-size-btn" class="font-size-btn"
style="width: 20%;" style="width: 20%;"
v-tooltip="'减小字号'" v-tooltip="'减小字号'"

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

@ -124,7 +124,7 @@
</Select> </Select>
</SelectGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;"> <Popover trigger="click" style="width: 30%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
@ -132,7 +132,7 @@
@update:modelValue="value => emitRichTextCommand('color', value)" @update:modelValue="value => emitRichTextCommand('color', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color"> <TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -153,7 +153,8 @@
v-tooltip="'增大字号'" v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')" @click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button> ><IconFontSize />+</Button>
<Button <Button
last
class="font-size-btn" class="font-size-btn"
style="width: 20%;" style="width: 20%;"
v-tooltip="'减小字号'" v-tooltip="'减小字号'"

6
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -28,7 +28,7 @@
</Select> </Select>
</SelectGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 50%;"> <Popover trigger="click" style="width: 50%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
@ -36,7 +36,7 @@
@update:modelValue="value => updateTextAttrs({ color: value })" @update:modelValue="value => updateTextAttrs({ color: value })"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color"> <TextColorButton first v-tooltip="'文字颜色'" :color="textAttrs.color">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -47,7 +47,7 @@
@update:modelValue="value => updateTextAttrs({ backcolor: value })" @update:modelValue="value => updateTextAttrs({ backcolor: value })"
/> />
</template> </template>
<TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor"> <TextColorButton last v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
<IconFill /> <IconFill />
</TextColorButton> </TextColorButton>
</Popover> </Popover>

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

@ -41,7 +41,7 @@
</Select> </Select>
</SelectGroup> </SelectGroup>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<Popover trigger="click" style="width: 30%;"> <Popover trigger="click" style="width: 30%;">
<template #content> <template #content>
<ColorPicker <ColorPicker
@ -49,7 +49,7 @@
@update:modelValue="value => emitRichTextCommand('color', value)" @update:modelValue="value => emitRichTextCommand('color', value)"
/> />
</template> </template>
<TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color"> <TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
<IconText /> <IconText />
</TextColorButton> </TextColorButton>
</Popover> </Popover>
@ -70,7 +70,8 @@
v-tooltip="'增大字号'" v-tooltip="'增大字号'"
@click="emitRichTextCommand('fontsize-add')" @click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button> ><IconFontSize />+</Button>
<Button <Button
last
class="font-size-btn" class="font-size-btn"
style="width: 20%;" style="width: 20%;"
v-tooltip="'减小字号'" v-tooltip="'减小字号'"
@ -132,8 +133,9 @@
><IconQuote /></CheckboxButton> ><IconQuote /></CheckboxButton>
</ButtonGroup> </ButtonGroup>
<ButtonGroup class="row"> <ButtonGroup class="row" passive>
<CheckboxButton <CheckboxButton
first
style="flex: 1;" style="flex: 1;"
v-tooltip="'清除格式'" v-tooltip="'清除格式'"
@click="emitRichTextCommand('clear')" @click="emitRichTextCommand('clear')"
@ -155,6 +157,7 @@
</div> </div>
</template> </template>
<CheckboxButton <CheckboxButton
last
style="width: 100%;" style="width: 100%;"
:checked="!!richTextAttrs.link" :checked="!!richTextAttrs.link"
v-tooltip="'超链接'" v-tooltip="'超链接'"
@ -177,9 +180,10 @@
<RadioButton value="justify" v-tooltip="'两端对齐'" style="flex: 1;"><IconAlignTextBoth /></RadioButton> <RadioButton value="justify" v-tooltip="'两端对齐'" style="flex: 1;"><IconAlignTextBoth /></RadioButton>
</RadioGroup> </RadioGroup>
<div class="row"> <div class="row" passive>
<ButtonGroup style="flex: 1;"> <ButtonGroup style="flex: 1;">
<Button <Button
first
:type="richTextAttrs.bulletList ? 'primary' : 'default'" :type="richTextAttrs.bulletList ? 'primary' : 'default'"
style="flex: 1;" style="flex: 1;"
v-tooltip="'项目符号'" v-tooltip="'项目符号'"
@ -198,12 +202,13 @@
</ul> </ul>
</div> </div>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button last class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;"> <ButtonGroup style="flex: 1;" passive>
<Button <Button
first
:type="richTextAttrs.orderedList ? 'primary' : 'default'" :type="richTextAttrs.orderedList ? 'primary' : 'default'"
style="flex: 1;" style="flex: 1;"
v-tooltip="'编号'" v-tooltip="'编号'"
@ -222,29 +227,29 @@
</ul> </ul>
</div> </div>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button last class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
</div> </div>
<div class="row"> <div class="row">
<ButtonGroup style="flex: 1;"> <ButtonGroup style="flex: 1;" passive>
<Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button> <Button first style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
<Popover trigger="click" v-model:value="indentLeftPanelVisible"> <Popover trigger="click" v-model:value="indentLeftPanelVisible">
<template #content> <template #content>
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem> <PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button last class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<ButtonGroup style="flex: 1;"> <ButtonGroup style="flex: 1;" passive>
<Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button> <Button first style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
<Popover trigger="click" v-model:value="indentRightPanelVisible"> <Popover trigger="click" v-model:value="indentRightPanelVisible">
<template #content> <template #content>
<PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem> <PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
</template> </template>
<Button class="popover-btn"><IconDown /></Button> <Button last class="popover-btn"><IconDown /></Button>
</Popover> </Popover>
</ButtonGroup> </ButtonGroup>
</div> </div>