# 全局配置


xcrud 内置了一个全局配置,用户还可在注册 xcrud 组件时自定义全局配置,用户自定义配置会覆盖全局配置,使用如下:

Vue.use(Xcrud, {
    // your global theme config
});

首先把插件在全局进行注册,同时可以在此处对插件进行全局主题配置。例如当前项目使用 mini 大小的按钮,按钮颜色,表格是否需要条纹,border 等,以下是组件的默认配置,你的配置将会覆盖默认的配置。

const globalConfig = {
  input: {
    disabled: false,
    type: 'text',
    valueKey: 'value',
    debounce: 300,
    placement: 'bottom-start',
    triggerOnFocus: true,
    selectWhenUnmatched: false,
    maxlength: null,
    minlength: null,
    showWordLimit: false,
    placeholder: null,
    clearable: false,
    size: 'medium',
    rows: 3,
    autosize: false,
    autocomplete: 'off',
    resize: 'none',
    validateEvent: true,
    hideLoading: false,
    popperAppendToBody: true,
    highlightFirstItem: false
  },
  autocomplete: {
    disabled: false,
    placeholder: null,
    valueKey: 'value',
    debounce: 300,
    placement: 'bottom-start',
    fetchSuggestions: null,
    popperClass: null,
    triggerOnFocus: true,
    name: null,
    selectWhenUnmatched: false,
    label: null,
    prefixIcon: null,
    suffixIcon: null,
    hideLoading: false,
    popperAppendToBody: true,
    highlightFirstItem: false,
    maxlength: null,
    minlength: null,
    clearable: false,
    size: 'medium',
    rows: 3,
    autosize: false,
    autocomplete: 'off',
    resize: 'none',
    validateEvent: true
  },
  select: {
    disabled: false,
    multiple: false,
    valueKey: 'value',
    size: 'medium',
    clearable: false,
    collapseTags: false,
    multipleLimit: 0,
    autocomplete: 'off',
    placeholder: '请选择',
    filterable: false,
    allowCreate: false,
    remote: false,
    loading: false,
    loadingText: '加载中',
    noMatchText: '无匹配数据',
    noDataText: '无数据',
    reserveKeyword: false,
    defaultFirstOption: false,
    popperAppendToBody: true,
    automaticDropdown: false
  },
  datePicker: {
    disabled: false,
    readonly: false,
    editable: true,
    clearable: true,
    size: '',
    placeholder: '请选择日期',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    type: 'date',
    format: '',
    align: 'left',
    pickerOptions: {},
    rangeSeparator: ':',
    valueFormat: '',
    unlinkPanels: false,
    prefixIcon: 'el-icon-date',
    clearIcon: 'el-icon-circle-close',
    validateEvent: true
  },
  checkbox: {
    disabled: false,
    size: 'medium',
    min: undefined,
    max: undefined,
    textColor: '#ffffff',
    fill: '#409EFF',
    border: false
  },
  radio: {
    disabled: false,
    border: false,
    size: 'medium',
    textColor: '#ffffff',
    fill: '#409EFF'
  },
  cascader: {
    disabled: false,
    size: 'medium',
    placeholder: '请选择',
    clearable: false,
    showAllLevels: true,
    collapseTags: false,
    separator: ' / ',
    debounce: 300
  },
  switch: {
    disabled: false,
    width: 40,
    activeValue: true,
    inactiveValue: false,
    activeColor: '#409EFF',
    inactiveColor: '#C0CCDA',
    validateEvent: true
  },
  inputNumber: {
    disabled: false,
    min: '-Infinity',
    max: 'Infinity',
    step: 1,
    stepStrictly: false,
    precision: null,
    size: 'medium',
    controls: true,
    controlsPosition: null,
    placeholder: null
  },
  slider: {
    disabled: false,
    min: 0,
    max: 100,
    step: 1,
    showInput: false,
    showInputControls: true,
    inputSize: 'small',
    showStops: false,
    showTooltip: true,
    range: false,
    vertical: false,
    height: null,
    label: null,
    debounce: 300,
    marks: null
  },
  timePicker: {
    disabled: false,
    editable: true,
    clearable: true,
    size: 'medium',
    placeholder: '',
    align: 'left',
    startPlaceholder: '',
    endPlaceholder: '',
    isRange: false,
    arrowControl: false,
    pickerOptions: {},
    rangeSeparator: ':',
    valueFormat: '',
    prefixIcon: 'el-icon-time',
    clearIcon: 'el-icon-circle-close',

    selectableRange: null,
    format: 'HH:mm:ss'
  },
  timeSelect: {
    disabled: false,
    editable: true,
    clearable: true,
    size: 'medium',
    placeholder: '',
    align: 'left',
    startPlaceholder: '',
    endPlaceholder: '',
    isRange: false,
    arrowControl: false,
    pickerOptions: {},
    rangeSeparator: ':',
    valueFormat: '',
    prefixIcon: 'el-icon-time',
    clearIcon: 'el-icon-circle-close',

    start: '09:00',
    end: '18:00',
    step: '00:30',
    minTime: '00:00',
    maxTime: null
  },
  rate: {
    disabled: false,
    max: 5,
    texts: ['极差', '失望', '一般', '满意', '惊喜'],
    colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
    allowHalf: false,
    lowThreshold: 2,
    highThreshold: 4,
    voidColor: '#C6D1DE',
    iconClasses: ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'],
    showText: false,
    showScore: false,
    textColor: '#1F2D3D',
    scoreTemplate: '{value}',
    disabledVoidColor: '#EFF2F7',
    voidIconClass: 'el-icon-star-off',
    disabledVoidIconClass: 'el-icon-star-on'
  },
  colorPicker: {
    disabled: false,
    size: 'medium',
    predefine: null,
    showAlpha: false,
    colorFormat: 'hex'
  },
  transfer: {
    disabled: false,
    filterable: false,
    filterPlaceholder: '请输入搜索内容',
    targetOrder: 'original',
    titles: ['列表 1', '列表 2'],
    buttonTexts: [],
    format: { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' },
    props: null
  },
  xtable: {
    table: {
      height: null,
      maxHeight: null,
      stripe: false,
      border: false,
      size: 'medium',
      fit: true,
      showHeader: true,
      highlightCurrentRow: false,
      rowClassName: null,
      rowStyle: null,
      cellClassName: null,
      cellStyle: null,
      headerRowClassName: null,
      headerRowStyle: null,
      headerCellClassName: null,
      headerCellStyle: null,
      emptyText: '暂无数据',
      defaultExpandAll: false,
      defaultSort: { order: 'ascending' },
      tooltipEffect: 'dark',
      showSummary: false,
      sumText: '合计',
      selectOnIndeterminate: true,
      indent: 16,
      treeProps: { hasChildren: 'hasChildren', children: 'children' }
    },
    column: {
      width: null,
      minWidth: null,
      fixed: false,
      sortable: false,
      sortOrders: ['ascending', 'descending', null],
      resizable: true,
      showOverflowTooltip: false,
      align: 'center',
      headerAlign: 'center',
      className: null,
      labelClassName: null,
      reserveSelection: false,
      filterPlacement: null,
      filterMultiple: true
    },
    search: {
      form: {
        inline: true,
        labelPosition: 'right',
        labelWidth: 'auto',
        labelSuffix: undefined,
        hideRequiredAsterisk: false,
        showMessage: true,
        inlineMessage: false,
        statusIcon: false,
        validateOnRuleChange: true,
        size: 'medium',
        disabled: false,
        itemStyle: 'width: 200px;'
      },
      btn: {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: null,
        autofocus: false,
        nativeType: 'button',
        searchBtn: {
          // circle: false,
          // round: false,
          // plain: false,
          // type: 'primary',
          show: true,
          text: '搜索',
          icon: 'el-icon-search'
        },
        resetBtn: {
          // circle: false,
          // round: false,
          // plain: false,
          // type: 'primary',
          show: true,
          text: '重置',
          icon: 'el-icon-refresh-right'
        }
      }
    },
    operate: {
      column: {
        label: '操作'
        // width: null,
        // minWidth: null,
        // fixed: false
        // renderHeader: null,
        // resizable: null,
        // align: null,
        // headerAlign: null,
        // className: null,
        // labelClassName: null
      },
      btn: {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: null,
        autofocus: false,
        nativeType: 'button'
      },
      dropdown: {
        className: 'asdf',  // 自定义class
        text: '更多',  //自定义显示文字
        placement: 'bottom-end',
        trigger: 'hover',
        hideOnClick: true,
        showTimeout: 250,
        hideTimeout: 150,
        tabindex: 0,
        divided: false,
      }
    }
  },
  xform: {
    form: {
      inline: false,
      labelPosition: 'right',
      labelWidth: '120px',
      labelSuffix: undefined,
      hideRequiredAsterisk: false,
      showMessage: true,
      inlineMessage: false,
      statusIcon: false,
      validateOnRuleChange: true,
      size: 'medium',
      disabled: false,
      itemStyle: 'max-width: 300px; width: 100%;',
      tooltip: {
        effect: 'dark',
        placement: 'top-start',
        iconName: 'el-icon-info',
        iconStyle: 'color: #409EFF'
      },
      tabs: {
        type: 'border-card',
        closable: false,
        addable: false,
        editable: false,
        tabPosition: 'top',
        stretch: false,
        table: {
          height: null,
          maxHeight: null,
          stripe: false,
          border: true,
          size: 'medium',
          fit: true,
          showHeader: true,
          highlightCurrentRow: false,
          rowClassName: null,
          rowStyle: null,
          cellClassName: null,
          cellStyle: null,
          headerRowClassName: null,
          headerRowStyle: null,
          headerCellClassName: null,
          headerCellStyle: null,
          emptyText: '暂无数据',
          defaultExpandAll: false,
          defaultSort: { order: 'ascending' },
          tooltipEffect: 'dark',
          showSummary: false,
          sumText: '合计',
          selectOnIndeterminate: true,
          indent: 16,
          treeProps: { hasChildren: 'hasChildren', children: 'children' },
          column: {
            width: null,
            minWidth: null,
            showOverflowTooltip: false,
            align: 'center',
            headerAlign: 'center',
            className: null
          },
          operate: {
            show: true,
            label: '操作',
            width: '60px',
            headerAlign: 'center',
            align: 'center',
            btn: [
              {
                type: 'danger',
                icon: 'el-icon-close',
                size: 'mini',
                circle: true,
                style: '',
                className: '',
                click: (arr, index, fun) => {
                  if (fun) {
                    fun(arr, index)
                    return
                  }
                  arr.splice(index, 1)
                }
              }
            ]
          }
        }
      }
    },
    operate: {
      btn: {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: null,
        autofocus: false,
        nativeType: 'button'
      }
    }
  }
}