Browse Source

feat:tablePlus文本对齐

ananzhusen 9 months ago
parent
commit
741094acc7
1 changed files with 35 additions and 1 deletions
  1. 35 1
      src/views/components/Custom.vue

+ 35 - 1
src/views/components/Custom.vue

@@ -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(() => {