This commit is contained in:
pipipi-pikachu 2021-01-07 09:58:52 +08:00
parent 9bafe1ef32
commit 19cf9a8761
4 changed files with 15 additions and 10 deletions

View File

@ -17,3 +17,6 @@
.ant-select-item-option-content { .ant-select-item-option-content {
font-size: 13px !important; font-size: 13px !important;
} }
.ant-radio-button-wrapper {
text-align: center;
}

View File

@ -88,7 +88,7 @@ export const getTextAttrs = (view: EditorView) => {
const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000' const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000'
const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '12px' const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '12px'
const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑' const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑'
const align = getAttrValueInSelection(view, 'align') const align = getAttrValueInSelection(view, 'align') || 'left'
const isBulletList = isActiveOfParentNodeType('bullet_list', view.state) const isBulletList = isActiveOfParentNodeType('bullet_list', view.state)
const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state) const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state)
const isBlockquote = isActiveOfParentNodeType('blockquote', view.state) const isBlockquote = isActiveOfParentNodeType('blockquote', view.state)

View File

@ -66,11 +66,11 @@
<Divider /> <Divider />
<ButtonGroup class="row"> <RadioGroup class="row" button-style="solid" :value="richTextAttrs.align">
<Button style="flex: 1;" :type="richTextAttrs.align === 'left' || '' ? 'primary' : 'default'"><AlignLeftOutlined /></Button> <RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
<Button style="flex: 1;" :type="richTextAttrs.align === 'center' ? 'primary' : 'default'"><AlignCenterOutlined /></Button> <RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
<Button style="flex: 1;" :type="richTextAttrs.align === 'right' ? 'primary' : 'default'"><AlignRightOutlined /></Button> <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
</ButtonGroup> </RadioGroup>
<ButtonGroup class="row"> <ButtonGroup class="row">
<Button style="flex: 1;" :type="richTextAttrs.bulletList ? 'primary' : 'default'"><UnorderedListOutlined /></Button> <Button style="flex: 1;" :type="richTextAttrs.bulletList ? 'primary' : 'default'"><UnorderedListOutlined /></Button>
@ -83,14 +83,14 @@
<div style="flex: 2;">行间距</div> <div style="flex: 2;">行间距</div>
<Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)"> <Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
<template #suffixIcon><ColumnHeightOutlined /></template> <template #suffixIcon><ColumnHeightOutlined /></template>
<SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}</SelectOption> <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}</SelectOption>
</Select> </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" @change="value => updateWordSpace(value)"> <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
<template #suffixIcon><ColumnWidthOutlined /></template> <template #suffixIcon><ColumnWidthOutlined /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption> <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
</Select> </Select>
</div> </div>
@ -121,7 +121,7 @@ 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 ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import { Select, Input, Button, Divider, Popover } from 'ant-design-vue' import { Select, Input, Button, Divider, Popover, Radio } from 'ant-design-vue'
import { import {
FontColorsOutlined, FontColorsOutlined,
HighlightOutlined, HighlightOutlined,
@ -150,6 +150,8 @@ export default defineComponent({
ButtonGroup: Button.Group, ButtonGroup: Button.Group,
Divider, Divider,
Popover, Popover,
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
FontColorsOutlined, FontColorsOutlined,
HighlightOutlined, HighlightOutlined,
BgColorsOutlined, BgColorsOutlined,

View File

@ -122,6 +122,6 @@ export default defineComponent({
.content { .content {
padding: 12px; padding: 12px;
font-size: 13px; font-size: 13px;
overflow: auto; overflow: overlay;
} }
</style> </style>