diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index efb7c649aa2..bf0535aa2e8 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -4,6 +4,10 @@ ### Feats +- `n-form`,`n-form-item` 支持 require-mark-placement 属性,关闭 [#171](https://github.com/TuSimple/naive-ui/issues/171) + +### Feats + - `n-dropdown` 支持 class 属性,关闭 [#180](https://github.com/TuSimple/naive-ui/issues/180) ## 2.12.0 (2020-06-16) diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md index 0058c28c0e0..1b9bc03f2ed 100644 --- a/src/form/demos/zhCN/index.demo-entry.md +++ b/src/form/demos/zhCN/index.demo-entry.md @@ -32,6 +32,7 @@ validator-debug | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array \| FormRules }` | `{}` | 验证表项的规则 | | show-feedback | `boolean` | `true` | | | show-require-mark | `boolean` | `true` | 是否展示必填的星号 | +| require-mark-placement | `'start' \| 'end' ` | `end` | 必填的星号所在位置 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | #### FormItemRule Type @@ -61,6 +62,7 @@ validator-debug | rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定,使用表项的 `path` 代替 | | show-feedback | `boolean` | `true` | | | show-require-mark | `boolean` | `true` | 是否展示必填的星号。如果没有被设定,使用外层 `n-form` 的 `show-require-mark` | +| require-mark-placement | `'start' \| 'end' ` | `end` | 必填的星号所在位置。如果没有被设定,使用外层 `n-form` 的 `require-mark-placement` | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | | validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时,会覆盖规则验证的结果 | diff --git a/src/form/src/Form.tsx b/src/form/src/Form.tsx index 0884822d321..61429f8a7dd 100644 --- a/src/form/src/Form.tsx +++ b/src/form/src/Form.tsx @@ -43,6 +43,10 @@ const formProps = { type: Boolean as PropType, default: undefined }, + requireMarkPlacement: { + type: String as PropType<'start' | 'end'>, + default: 'end' + }, showFeedback: { type: Boolean, default: true diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx index 6fc914c1b8a..76f19831df1 100644 --- a/src/form/src/FormItem.tsx +++ b/src/form/src/FormItem.tsx @@ -69,6 +69,10 @@ export const formItemProps = { type: Boolean as PropType, default: undefined }, + requireMarkPlacement: { + type: String as PropType<'start' | 'end'>, + default: undefined + }, showFeedback: { type: Boolean as PropType, default: undefined @@ -386,6 +390,8 @@ export default defineComponent({ }, render () { const { $slots, mergedClsPrefix } = this + console.log(this.mergedrequireMarkPlacement) + return (
{this.label || $slots.label ? ( - + this.mergedrequireMarkPlacement === 'end' ? ( + + ) : ( + + ) ) : null}
{ + const { requireMarkPlacement } = props + if (requireMarkPlacement !== undefined) return requireMarkPlacement + if (NForm?.requireMarkPlacement !== undefined) { + return NForm.requireMarkPlacement + } + return undefined + }) const validationErroredRef = ref(false) const mergedValidationStatusRef = computed(() => { const { validationStatus } = props @@ -81,6 +89,7 @@ export function formItemMisc (props: FormItemSetupProps) { mergedLabelPlacement: mergedLabelPlacementRef, mergedLabelAlign: mergedLabelAlignRef, mergedShowRequireMark: mergedShowRequireMarkRef, + mergedrequireMarkPlacement: mergedrequireMarkPlacementRef, mergedValidationStatus: mergedValidationStatusRef, mergedShowFeedback: mergedShowFeedbackRef }