Vue3框架项目利用Element-Pus全局修改默认的样式，统一处理

此项目是使用的Vue3框架，Element-Plus前端组件。由于一些样式是统一的，避免在每个组件中都需要修改，特意提出一些公共的属性在main.js文件中

main.js文件中设置公共属性

// 设置全局中需要修改统一的的组件的样式
import ElementPlus, {ElDatePicker, ElDialog, ElTable, ElTableColumn} from 'element-plus'
// 获取组件的props
const TableProps = ElTable.props
const TableColumnProps = ElTableColumn.props
const ElDatePickerProps = ElDatePicker.props
const ElDialogProps = ElDialog.props

// 修改默认props：：：这些属性属于整个项目的公共属性设置
TableProps.border = {type: Boolean, default: true} // 边框线
// 全局el-table-column设置
TableColumnProps.align = {type: String, default: 'center'} // 居中
TableColumnProps.showOverflowTooltip = {type: Boolean, default: true} // 文本溢出
ElDatePickerProps.clearable = {required: false, default: false}  //是否显示清除按钮
ElDialogProps.closeOnClickModal = {required: false, default: false}  //弹窗点击空白不消失

设置布局大小：

1、首先在store文件夹中的app.js中设置size的方法并存储起来

	state: () => ({
     	 size: Cookies.get('size') || 'default'
   		 }),
     actions: {
        setSize(size) {
        this.size = size;
        Cookies.set('size', size)
      },
    }

2、在需要更改布局大小的事件中调用

const { proxy } = getCurrentInstance();
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
const size = computed(() => appStore.size);

function handleSetSize(size) {
  proxy.$modal.loading("正在设置布局大小，请稍候...");
  appStore.setSize(size);
  setTimeout("window.location.reload()", 1000);
}

3、main.js中全局设置

// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
    locale: locale,
    // 支持 large、default、small
    size: Cookies.get('size') || 'default'
})

记录平时项目中的一些方法，如有更好的方法还请多多指教！