Element UI 组件全局设置默认配置_element 全局配置组件

Element UI 组件库有时候想全局设置一些默认配置，避免重复代码。

以vue项目为例，把以下js引入到main.js即可

import Vue from 'vue'
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  TimeSelect,
  Popover,
  Tooltip,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Cascader,
  Container,
  Image,
  Backtop,
  Loading,
  MessageBox,
  Message,
  Notification,
  Drawer,
  Empty,
  Descriptions,
  DescriptionsItem,
  Divider,
  Scrollbar,
  Header,
  Main,
  Footer
} from 'element-ui'
import DatePicker from './date-picker'
 
// ElementUI默认配置
Dialog.props.closeOnClickModal.default = false
Table.props.border = { type: Boolean, default: true }
Table.props.highlightCurrentRow = { type: Boolean, default: true }
Tooltip.props.openDelay = { type: Number, default: 700 }
 
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Autocomplete)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(DatePicker)
Vue.use(TimeSelect)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Icon)
Vue.use(Row)
Vue.use(Col)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Cascader)
Vue.use(Container)
Vue.use(Image)
Vue.use(Backtop)
Vue.use(Drawer)
Vue.use(Empty)
Vue.use(Descriptions)
Vue.use(DescriptionsItem)
Vue.use(Loading.directive)
Vue.use(Divider)
Vue.use(Scrollbar)
Vue.use(Header)
Vue.use(Main)
Vue.use(Footer)
 
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
 

对于部分组件，会把配置default值暴露到props，就可以直接修改来设置，如下：

// ElementUI默认配置
Dialog.props.closeOnClickModal.default = false
Table.props.border = { type: Boolean, default: true }
Table.props.highlightCurrentRow = { type: Boolean, default: true }
Tooltip.props.openDelay = { type: Number, default: 700 }

对于没有暴露出default属性的组件，如果要全局设置其默认值，可以通过extends继承原组件，再重新封装来设置，比如，可以通过以下方式设置日期组件的快捷按钮：

import { DatePicker } from 'element-ui'
 
const DatePickerPatched = {
  extends: DatePicker,
  props: {
    pickerOptions: { // 全局设置时间日期选择组件的快捷选项
      type: Object,
      default: () => {
        return {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近半年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    }
  }
}
 
export default {
  install(Vue) {
    Vue.component(DatePicker.name, DatePickerPatched)
  }
}

再引入这个封装后的date-picker替换原先的el-date-picker，即可全局默认设置快捷选项，如果某个场景的组件需要定制，重新设置即可覆盖此默认值。