|
@@ -175,6 +175,31 @@
|
|
>I</t-button
|
|
>I</t-button
|
|
>
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="form-item">
|
|
|
|
+ <label>文本对齐</label>
|
|
|
|
+ <t-radio-group
|
|
|
|
+ size="small"
|
|
|
|
+ v-model="cell.textAlign"
|
|
|
|
+ default-value="center"
|
|
|
|
+ @change="changeStyles('textAlign')"
|
|
|
|
+ >
|
|
|
|
+ <t-radio-button value="left">
|
|
|
|
+ <t-tooltip content="居左" placement="top">
|
|
|
|
+ <format-vertical-align-left-icon />
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </t-radio-button>
|
|
|
|
+ <t-radio-button value="center">
|
|
|
|
+ <t-tooltip content="水平居中" placement="top">
|
|
|
|
+ <format-vertical-align-center-icon />
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </t-radio-button>
|
|
|
|
+ <t-radio-button value="right">
|
|
|
|
+ <t-tooltip content="居右" placement="top">
|
|
|
|
+ <format-vertical-align-right-icon />
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </t-radio-button>
|
|
|
|
+ </t-radio-group>
|
|
|
|
+ </div>
|
|
</t-space>
|
|
</t-space>
|
|
</div>
|
|
</div>
|
|
</t-space>
|
|
</t-space>
|
|
@@ -218,7 +243,7 @@ import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { s8 } from '@/services/random';
|
|
import { s8 } from '@/services/random';
|
|
import CodeEditor from '@/views/components/common/CodeEditor.vue';
|
|
import CodeEditor from '@/views/components/common/CodeEditor.vue';
|
|
-import { ChevronLeftDoubleIcon } from 'tdesign-icons-vue-next';
|
|
|
|
|
|
+import { ChevronLeftDoubleIcon, FormatVerticalAlignLeftIcon, FormatVerticalAlignCenterIcon, FormatVerticalAlignRightIcon } from 'tdesign-icons-vue-next';
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
pen: any;
|
|
pen: any;
|
|
@@ -303,6 +328,7 @@ const cell = ref({
|
|
fontSize: undefined,
|
|
fontSize: undefined,
|
|
fontWeight: undefined,
|
|
fontWeight: undefined,
|
|
fontStyle: undefined,
|
|
fontStyle: undefined,
|
|
|
|
+ textAlign: undefined,
|
|
});
|
|
});
|
|
|
|
|
|
const getPenData = (data: any) => {
|
|
const getPenData = (data: any) => {
|
|
@@ -322,12 +348,14 @@ const getPenData = (data: any) => {
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
|
|
+ cell.value.textAlign = props.pen.styles[found].textAlign;
|
|
} else {
|
|
} else {
|
|
cell.value.background = undefined;
|
|
cell.value.background = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
|
|
+ cell.value.textAlign = undefined;
|
|
}
|
|
}
|
|
} else if (props.pen.calculative.activeRow !== undefined) {
|
|
} else if (props.pen.calculative.activeRow !== undefined) {
|
|
cell.value.col = undefined;
|
|
cell.value.col = undefined;
|
|
@@ -342,12 +370,14 @@ const getPenData = (data: any) => {
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
|
|
+ cell.value.textAlign = props.pen.styles[found].textAlign;
|
|
} else {
|
|
} else {
|
|
cell.value.background = undefined;
|
|
cell.value.background = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
|
|
+ cell.value.textAlign = undefined;
|
|
}
|
|
}
|
|
} else if (props.pen.calculative.activeCell) {
|
|
} else if (props.pen.calculative.activeCell) {
|
|
cell.value.col = props.pen.calculative.activeCell.col;
|
|
cell.value.col = props.pen.calculative.activeCell.col;
|
|
@@ -361,12 +391,14 @@ const getPenData = (data: any) => {
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontSize = props.pen.styles[found].fontSize;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontWeight = props.pen.styles[found].fontWeight;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
cell.value.fontStyle = props.pen.styles[found].fontStyle;
|
|
|
|
+ cell.value.textAlign = props.pen.styles[found].textAlign;
|
|
} else {
|
|
} else {
|
|
cell.value.background = undefined;
|
|
cell.value.background = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.textColor = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
|
|
+ cell.value.textAlign = undefined;
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
cell.value.col = undefined;
|
|
cell.value.col = undefined;
|
|
@@ -376,6 +408,7 @@ const getPenData = (data: any) => {
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontSize = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontWeight = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
cell.value.fontStyle = undefined;
|
|
|
|
+ cell.value.textAlign = undefined;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -397,6 +430,7 @@ const changeStyles = (key) => {
|
|
[key]: cell.value[key],
|
|
[key]: cell.value[key],
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
+ meta2d.render();
|
|
};
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|