vue2-client 1.16.44 → 1.16.46

package/src/base-client/components/his/XTitle/XTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="x-title-container">
+  <div class="x-title-container" :class="wrapperClassObject">
     <div
       v-if="config.type === 'title'"
       class="x-title"
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, useAttrs } from 'vue'
 
 const props = defineProps({
   queryParamsName: {
@@ -50,6 +50,23 @@ const lineStyle = computed(() => {
   return style
 })
 
+// 动态样式开关：通过 $attrs 生成 xtitle-* 类（布尔开关 + size 派生类）
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const classes = {}
+  const booleanStyleKeys = [
+  'center', 'littlefont'
+  ]
+  booleanStyleKeys.forEach(key => {
+    const val = attrs[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`xtitle-${key}`] = true
+  })
+  const size = attrs.size
+  if (size && typeof size === 'string') classes[`xtitle-size-${size}`] = true
+  return classes
+})
+
 const handleClick = () => {
   if (config.value.clickName) {
     emit(config.value.clickName)
@@ -90,7 +107,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .x-title-container {
   display: flex;
   align-items: center;
@@ -99,12 +116,12 @@ onMounted(() => {
 
 .x-title {
   font-size: 18px;
-  font-weight: bold;
+  font-weight: 700;
   height: 26px;
   width: 100%;
   text-align: left;
-  font-family: "Source Han Sans", sans-serif;
-  color: #5D5C5C;
+  font-family: "Source Han Sans";
+  color: #313131;
   position: relative;
 }
 
@@ -120,4 +137,11 @@ onMounted(() => {
 .x-button-container {
   text-align: right;
 }
+.x-title-center {
+  text-align: center
+}
+.x-title-littlefont {
+  font-size: 16px
+}
+
 </style>