属性配置

为了避免重复配置属性、默认属性不统一等问题，框架支持配置组件属性，推荐在全局配置好组件的默认属性，可以有效统一页面风格并提高开发效率。

全局配置

通过应用的provide方法可以进行组件属性的全局配置，它将作用于应用的所有子组件及后代组件。

import { createApp } from 'vue';
import {
  DATA_DESCRIPTIONS_KEY,
  DATA_FORM_KEY,
  DATA_PAGINATION_KEY,
  DATA_TABLE_KEY,
  DICT_SELECT_KEY,
  GRID_CASCADER_KEY,
} from 'liv-web';
import App from './src/App.vue';

const app = createApp(App);

// 字典选择器组件属性全局配置
app.provide(DICT_SELECT_KEY, {
  placeholder: '请选择字典',
  idKey: 'dictId',
  labelKey: 'dictName',
  valueKey: 'dictCode',
  // others props...
});

// 网格选择器组件属性全局配置
app.provide(GRID_CASCADER_KEY, {
  placeholder: '请选择网格',
  clearable: true,
  showAllLevels: true,
  collapseTags: true,
  collapseTagsTooltip: true,
  separator: '/',
  props: {
    id: 'gridId',
    label: 'gridName',
    value: 'gridCode',
    leaf: 'leaf',
    children: 'children',
    disabled: 'disabled',
  },
  // others props...
});

// 数据表格组件属性全局配置
app.provide(DATA_TABLE_KEY, {
  showButtonCount: 3,
  border: false,
  stripe: true,
  headerCellStyle: {
    backgroundColor: '#FAFAFA',
  },
  // others props...
});

// 数据分页组件属性全局配置
app.provide(DATA_PAGINATION_KEY, {
  currentKey: 'current',
  sizeKey: 'size',
  // others props...
});

// 数据表单组件属性全局配置
app.provide(DATA_FORM_KEY, {
  labelWidth: 'auto',
  labelPosition: 'right',
  // others props...
});

// 数据描述项列表属性全局配置
app.provide(DATA_DESCRIPTIONS_KEY, {
  border: true,
  column: 2,
  // others props...
});

// 全局配置更多组件属性...

更多可配置组件及属性请参考组件文档。

局部配置

在组件中使用provide可以进行局部配置，它将作用于该组件的所有子组件及后代组件。

<template>
  <liv-data-table :data="data" :fields="fields"> </liv-data-table>
  <router-view></router-view>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue';
import { DATA_TABLE_KEY, type DataTableFields } from 'liv-web';

// 将作用于当前组件的所有子组件及后代组件
provide(DATA_TABLE_KEY, {
  showButtonCount: 2,
  border: true,
  stripe: false,
  // others props...
});

interface TableData {
  // ...
}

const data = ref<TableData[]>([
  // ...
]);

const fields: DataTableFields<TableData> = [
  // ...
];
</script>