From 0ffc96d2390d49ec2dcff1ae949e42f13e49bfac Mon Sep 17 00:00:00 2001 From: njl Date: Sun, 28 Nov 2021 11:41:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=AE=9A=E4=B9=89=E5=B1=9E?= =?UTF-8?q?=E6=80=A7type=E7=B1=BB=E5=9E=8B=EF=BC=8C=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BC=A0=E5=85=A5=E5=B1=9E=E6=80=A7=E4=B9=9F?= =?UTF-8?q?=E5=8F=AF=E7=94=9F=E6=95=88=E7=9A=84=E6=8F=92=E6=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/comment/index.ts | 4 +-- .../devui/comment/src/comment-types.ts | 30 +++++++++++-------- .../devui-vue/devui/comment/src/comment.tsx | 23 ++++---------- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts index a7d19182..c41659b2 100644 --- a/packages/devui-vue/devui/comment/index.ts +++ b/packages/devui-vue/devui/comment/index.ts @@ -10,8 +10,8 @@ export { Comment } export default { title: 'Comment 评论', category: '数据展示', - status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '55%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { - app.use(Comment as any) + app.use(Comment as any) } } diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts index 520f1e16..fda8f09b 100644 --- a/packages/devui-vue/devui/comment/src/comment-types.ts +++ b/packages/devui-vue/devui/comment/src/comment-types.ts @@ -1,23 +1,29 @@ -import type { PropType, ExtractPropTypes } from 'vue' +import type { PropType, ExtractPropTypes, VNode } from 'vue' +export interface commentPropsITF { + [prop: string]: any +} export const commentProps = { actions: { - - }, + type:Object as PropType, + default:null + }, author: { - + type:Object as PropType, + default:null + }, + avatar: { + type:Object as PropType, + default:null }, - avatar: {}, - content: { - - } , - prefixCls: { - + type:Object as PropType, + default:null }, datetime: { - - } + type:Object as PropType, + default:null + }, } as const diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx index 0c6e8d0c..b31dac83 100644 --- a/packages/devui-vue/devui/comment/src/comment.tsx +++ b/packages/devui-vue/devui/comment/src/comment.tsx @@ -9,30 +9,19 @@ export default defineComponent({ slots: ['actions', 'author', 'avatar', 'content', 'datetime'], setup(props, { slots }) { return () => { - const getSlots = function (className: string) { - return ( -
- {slots[className]?.()} -
- ) - } - const setSlot = function (vnode: any) { - let vnodeEnum = Object.keys(vnode) - vnodeEnum.forEach((item: any) => { - getSlots(item) - }) - } const actions = props.actions ?? slots.actions?.(); const author = props.author ?? slots.author?.(); const avatar = props.avatar ?? slots.avatar?.(); const content = props.content ?? slots.content?.(); const datetime = props.datetime ?? slots.datetime?.(); - + const avatarDom = ( +
+ {typeof avatar === 'string' ? comment-avatar : avatar} +
+ ); return (
-
- {avatar} -
+ {avatarDom}
-- Gitee From 961f4f93e368ea57d726643ad2006c2768756a34 Mon Sep 17 00:00:00 2001 From: njl Date: Sun, 5 Dec 2021 14:10:31 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9comment=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E5=91=BD=E5=90=8D=EF=BC=8C=E6=96=B0=E5=A2=9Eactions?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=BB=84=E5=8F=AF=E7=9B=B4=E6=8E=A5=E4=BC=A0?= =?UTF-8?q?=E5=85=A5vnode=E6=95=B0=E7=BB=84=E5=86=99=E6=B3=95=EF=BC=8C?= =?UTF-8?q?=E6=96=B0=E5=A2=9Ecomment.md=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/comment/index.ts | 2 +- .../devui/comment/src/comment-types.ts | 12 +-- .../devui-vue/devui/comment/src/comment.scss | 1 + .../devui-vue/devui/comment/src/comment.tsx | 15 +++- .../docs/components/comment/index.md | 78 +++++++++++++++++++ 5 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 packages/devui-vue/docs/components/comment/index.md diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts index c41659b2..d9fb1203 100644 --- a/packages/devui-vue/devui/comment/index.ts +++ b/packages/devui-vue/devui/comment/index.ts @@ -10,7 +10,7 @@ export { Comment } export default { title: 'Comment 评论', category: '数据展示', - status: '55%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '70%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(Comment as any) } diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts index fda8f09b..4c9ad684 100644 --- a/packages/devui-vue/devui/comment/src/comment-types.ts +++ b/packages/devui-vue/devui/comment/src/comment-types.ts @@ -1,27 +1,27 @@ import type { PropType, ExtractPropTypes, VNode } from 'vue' -export interface commentPropsITF { +export interface IcommentProps { [prop: string]: any } export const commentProps = { actions: { - type:Object as PropType, + type:Object as PropType, default:null }, author: { - type:Object as PropType, + type:Object as PropType, default:null }, avatar: { - type:Object as PropType, + type:Object as PropType, default:null }, content: { - type:Object as PropType, + type:Object as PropType, default:null }, datetime: { - type:Object as PropType, + type:Object as PropType, default:null }, diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss index 5fa8c85f..fb2752bd 100644 --- a/packages/devui-vue/devui/comment/src/comment.scss +++ b/packages/devui-vue/devui/comment/src/comment.scss @@ -25,6 +25,7 @@ font-size: $devui-text; } &-actions{ + list-style-type: none; margin: 12px 0 0; } } diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx index b31dac83..aeec79fe 100644 --- a/packages/devui-vue/devui/comment/src/comment.tsx +++ b/packages/devui-vue/devui/comment/src/comment.tsx @@ -9,7 +9,15 @@ export default defineComponent({ slots: ['actions', 'author', 'avatar', 'content', 'datetime'], setup(props, { slots }) { return () => { + const getAction = (actions:any) => { + if (!actions || !actions.length) { + return null; + } + const actionList = actions.map((action:any, index:number) =>
  • {action}
    • ); + return actionList; + }; const actions = props.actions ?? slots.actions?.(); + const author = props.author ?? slots.author?.(); const avatar = props.avatar ?? slots.avatar?.(); const content = props.content ?? slots.content?.(); @@ -19,6 +27,9 @@ export default defineComponent({ {typeof avatar === 'string' ? comment-avatar : avatar}
    ); + const actionDom = actions ? ( +
      {getAction(Array.isArray(actions) ? actions : [actions])}
    + ) : null; return (
    {avatarDom} @@ -34,9 +45,7 @@ export default defineComponent({
    {content}
    -
    - {actions} -
    + {actionDom}
    ) diff --git a/packages/devui-vue/docs/components/comment/index.md b/packages/devui-vue/docs/components/comment/index.md new file mode 100644 index 00000000..db76b12e --- /dev/null +++ b/packages/devui-vue/docs/components/comment/index.md @@ -0,0 +1,78 @@ +# comment 评论 + +用于评论展示。 + +### 何时使用 + +需要显示图标时。 + + +### 基本用法 + +:::demo 通过template插槽，指定评论模块的位置。 + +```vue + + + + + + + +``` + +::: + +### 不使用插槽修改头像 + +:::demo 通过`avatar`属性指定图片路径。 + +```vue + + + + + + +``` + +::: + + + + + +### API + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +|-------------|----------|-----------|-----------------------|---------------------------------| +| avatar | `String` | -- | 非必选，avatar 图片路径 | [基本用法](#基本用法) | + -- Gitee From 2f7d9cd38fe48184e1b68328ecee675af2fa2df5 Mon Sep 17 00:00:00 2001 From: lsy Date: Mon, 6 Dec 2021 13:53:29 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4comment=E6=96=87?= =?UTF-8?q?=E6=A1=A3(=E6=9C=89=E5=86=B2=E7=AA=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/comment/index.md | 78 ------------------- 1 file changed, 78 deletions(-) delete mode 100644 packages/devui-vue/docs/components/comment/index.md diff --git a/packages/devui-vue/docs/components/comment/index.md b/packages/devui-vue/docs/components/comment/index.md deleted file mode 100644 index db76b12e..00000000 --- a/packages/devui-vue/docs/components/comment/index.md +++ /dev/null @@ -1,78 +0,0 @@ -# comment 评论 - -用于评论展示。 - -### 何时使用 - -需要显示图标时。 - - -### 基本用法 - -:::demo 通过template插槽，指定评论模块的位置。 - -```vue - - - - - - - -``` - -::: - -### 不使用插槽修改头像 - -:::demo 通过`avatar`属性指定图片路径。 - -```vue - - - - - - -``` - -::: - - - - - -### API - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -|-------------|----------|-----------|-----------------------|---------------------------------| -| avatar | `String` | -- | 非必选，avatar 图片路径 | [基本用法](#基本用法) | - -- Gitee