Common Components
On this page

全局化的规范配置 ​

提供配置项使组件库符合前端开发规范.

NSpecProvider ​

NSpecProvider 使用 Vue 的 provide/inject 机制, 在应用外围包裹一层 NSpecProvider 组件即可生效.

vue
<template>
  <n-spec-provider :form="formConfig">
    <app />
  </n-spec-provider>
</template>
<script setup>
const formConfig = { labelWidth: "100px" };
</script>

可选的配置项 ​

form ​

form 配置项用于配置 NForm 组件的默认配置.

form.labelWidth ​

表单项标签宽度, 默认为 90px.

  • 类型: string, number

form.labelAlign ​

表单项标签对齐方式, 默认为 right.

  • 类型: left, right

form.colon ​

表单项标签后是否显示冒号, 默认为 true.

  • 类型: boolean

form.allowClear ​

表单项是否允许清除, 默认为 true.

  • 类型: boolean

form.maxlength ​

表单项最大长度. 只对支持的组件有效.

  • 类型: number
  • 默认值: 100

form.placeholder ​

表单项的占位符, 可以为字符串或字符串数组.

  • 类型: string, string[]

form.modifiers ​

值的修饰符

  • 类型: { trim: boolean, number: boolean, lazy: boolean }

form.field ​

单独定义某个表单项类型的配置.

  • 类型: { FormItemControlType: NSpecProviderFormItemConfig }
  • 示例:
    javascript
    const formConfig = {
  field: {
    [FormItemControlType.INPUT]: {
      allowClear: false,
      placeholder: "请输入",
      maxlength: 100,
      modifiers: { trim: true }
    }
  }
};

easyForm ​

easyForm 配置项与 form 相同但用于 NEasyForm 组件的默认配置.

easyForm.defaultExpandRowCount ​

未展开时显示的行数, 可以通过对象的方式设置不同屏幕尺寸.

  • 类型: number | { xs: number, sm: number, md: number, lg: number, xl: number, xxl: number }
  • 默认值: { lg: 1, xl: 2 }

easyForm.beforeSearch ​

表单项搜索前的钩子函数, 参考 beforeSearch.

  • 类型: (data: Record<string, any>) => boolean | Promise<boolean>>
  • 示例:
    javascript
    const config = {
  easyForm: {
    beforeSearch: (params) => {
      console.log(params);
      return true;
    }
  }
};

upload ​

upload 配置项用于配置 NUpload 组件的默认配置.

upload.limit ​

上传文件的限制条件, 参考 NUploadLimit.

upload.accept ​

上传文件的类型, 参考 accept.

  • 类型: string

upload.action ​

上传文件的地址.

  • 类型: string

upload.method ​

上传文件的方法.

  • 类型: string

upload.customRequest ​

自定义上传文件的方法, 参考 customRequest.

  • 类型: (options: UploadRequestOptions) => void

table ​

table 配置项用于配置 NTable / NEasyTable 组件的默认配置.

table.ellipsisTooltip ​

当鼠标悬浮在开启了 ellipsis 的单元格上时，是否将完整内容用 Tooltip 组件显示. 默认为 false.

  • 类型: boolean | TooltipProps 可通过传入 TooltipProps 对象来自定义 Tooltip 组件的属性.
  • 默认值: false