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，即可全局默认设置快捷选项，如果某个场景的组件需要定制，重新设置即可覆盖此默认值。
精彩内容
您阅读本篇文章共花了：
发表评论