美文网首页Vue
element-ui利用props特性来全局初始化默认配置

element-ui利用props特性来全局初始化默认配置

作者: littlesunn | 来源:发表于2020-08-10 10:25 被阅读0次

    在做大型项目时,我们肯定需要统一的样式,比如按钮的统一大小(size="mini"),比如表格的每一列内容居中(align="center"),只要是element提供了这个属性,我们都可以统一配置,并且不影响其在子页面的中单独再修改.
    首先我们新建一个比如叫element_default_props.js的文件

    import Vue from 'vue'; // 引入vue
    import ElementUI from 'element-ui';
    //先打印一下ElementUI,点进去看看各个组件的默认的props
    console.log(ElementUI, "我是饿了么");
    
    //这里通过修改dialog的props里的默认值,弹出框设置点击蒙版不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;
    
    //有些props 属性设置default不生效,需要这样:
    ElementUI.Table.props.stripe =  {
        type: Boolean,
        default: true
    } //表格的斑马线条纹
    
    //还有比如default是个方法
    ElementUI.Table.props.cellStyle = { //表格头部样式
        default: () => ({
            'color': '#333'
        }),
    };
    

    大致就是以上几种配置方法,前提是element提供了这些props 属性,大部分是有的,所以不必担心.
    利用这个思路,其实你自己写的组件也是可以在created里面通过修改props来达到初始化的效果.

    相关文章

      网友评论

        本文标题:element-ui利用props特性来全局初始化默认配置

        本文链接:https://www.haomeiwen.com/subject/mhvddktx.html