bodyStyle Modal body 样式 object {}model body样式怎么修改

要在Vue项目中全局修改`DragModal`的模态框（Modal）主体（Body）的样式，你需要进入`main.js`中引入组件的位置。`DragModal`的模态身体风格通常是在`@/components/DragModal.vue`文件内的`style`标签中定义。要更改这些样式，你可以按照下面的方式操作：

1. 找到`DragModal`文件的对应模板 (`<template>`部分)，通常`bodyStyle`会作为其CSS类的一个属性或者直接作为一个`v-bind`指令应用样式。

如果是在`script`标签里的组件选项(`components`部分)里设置样式，请查阅`style`标签或者查找相关的内联样式（例如 `v-bind:class="{ style: bodyStyle }"`），在那里找到`.modal-body`的选择器或其他用于标记modal主体的相应选择器。

<template>
  ...
  <div v-bind:class="{ bodyClass: bodyStyle }"> <!-- 这里 bodyClass 代表内部样式与传递的bodyStyle绑定 -->
    ...
  </div>
</template>

<style scoped> <!-- 或者是 scoped 类似这样 -->
.modal-body { /* 修改这里的 CSS 样式 */
  ...
}
</style>
...
export default {
  props: {
    bodyStyle: {
      type: Object,
      // 可以为每个键值对设置单独的内联样式，
      // 示例：`type: Object，default: {'font-size': '16px', 'color': '#333'}`
      default: () => ({}),
    },
  },
  data() {
    return {
      bodyClass: {}, // 初始化此变量，用于动态绑定类名
    };
  },
  ...
</script>

2. 如果上面提到的方式不适用（例如未见于组件的模板元素内），可能在父组件或应用全局主题文件中有直接修改的地方，那么你可以在适当位置更新全局的主题样式，如Vue的`mixins`、Vuex状态管理或自定义插件里修改。

// 按需引入主题配置
const customTheme = { modalBody: { your: 'modified', styles: ... } };

...

import DragModal from '@/components/DragModal';

Vue.mixin({ // 添加混合物 (mixin)
  styles: customTheme, // 将配置合并到全局样式的默认配置中
});

Vue.component(
  'DragModal',
  {
    extends: DragModal,
    computed: { // 计算出最终要使用的类
      bodyStyles: {
        get() {
          return { /* 基于customTheme的自定义 */
            ...Object.entries(customTheme.modalBody).reduce((acc, [key, value]) => ({
              ...acc,
              [`-${key}-style`]: typeof value === 'object' ? value : `${value}px`, // 内部样式
            }), {}),
          },
        },
      },
    },
  }
);

完成上述步骤后，可以通过向父组件或Vue实例中的`this.bodyStyle`对象传递一个新的风格对象来调整`Modal`主体的样式，或者使用已配置的全局默认样式。

注意，确保你在修改样式后保存并刷新查看效果。记得对组件文档或全局样式的更改保持版本控制以便追踪修改历史。如果你有更具体的修改需求（例如某个元素或条件下的特定样），请提供更多上下文以便进一步指导。