diff --git a/src/pages.json b/src/pages.json index 134b8453e..086b4d6c3 100644 --- a/src/pages.json +++ b/src/pages.json @@ -303,6 +303,11 @@ "style": { "navigationBarTitleText": "瀑布流" } + }, { + "path": "card/card", + "style": { + "navigationBarTitleText": "卡片" + } }] }, { "root": "pages/componentsC", diff --git a/src/pages/componentsB/card/card.vue b/src/pages/componentsB/card/card.vue new file mode 100644 index 000000000..18b74f6cf --- /dev/null +++ b/src/pages/componentsB/card/card.vue @@ -0,0 +1,107 @@ + + + + + \ No newline at end of file diff --git a/src/pages/example/components.config.js b/src/pages/example/components.config.js index 1020c1e95..23d31abec 100644 --- a/src/pages/example/components.config.js +++ b/src/pages/example/components.config.js @@ -258,6 +258,11 @@ export default [{ icon: 'line', title: 'Line 线条', title_en: 'Line' + }, { + path: '/pages/componentsB/card/card', + icon: 'empty', + title: 'Card 卡片', + title_en: 'Card' }, { path: '/pages/componentsA/overlay/overlay', icon: 'mask', @@ -304,6 +309,11 @@ export default [{ icon: 'divider', title: 'Divider 分割线', title_en: 'Divider' + }, { + path: '/pages/componentsD/box/box', + icon: 'box', + title: 'Box 盒子', + title_en: 'Box' } ] }, diff --git a/src/static/uview/demo/box.png b/src/static/uview/demo/box.png new file mode 100644 index 000000000..d53c64294 Binary files /dev/null and b/src/static/uview/demo/box.png differ diff --git a/src/static/uview/demo/card.png b/src/static/uview/demo/card.png new file mode 100644 index 000000000..fb6ecfea3 Binary files /dev/null and b/src/static/uview/demo/card.png differ diff --git a/src/uni_modules/uview-plus/components/u-card/props.js b/src/uni_modules/uview-plus/components/u-card/props.js new file mode 100644 index 000000000..23ae8e9e2 --- /dev/null +++ b/src/uni_modules/uview-plus/components/u-card/props.js @@ -0,0 +1,128 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const propsCard = defineMixin({ + props: { + // 与屏幕两侧是否留空隙 + full: { + type: Boolean, + default: false + }, + // 标题 + title: { + type: String, + default: '' + }, + // 标题颜色 + titleColor: { + type: String, + default: '#303133' + }, + // 标题字体大小，单位rpx + titleSize: { + type: [Number, String], + default: '30' + }, + // 副标题 + subTitle: { + type: String, + default: '' + }, + // 副标题颜色 + subTitleColor: { + type: String, + default: '#909399' + }, + // 副标题字体大小，单位rpx + subTitleSize: { + type: [Number, String], + default: '26' + }, + // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) + border: { + type: Boolean, + default: true + }, + // 用于标识点击了第几个 + index: { + type: [Number, String, Object], + default: '' + }, + // 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" + margin: { + type: String, + default: '30rpx' + }, + // card卡片的圆角 + borderRadius: { + type: [Number, String], + default: '16' + }, + // 头部自定义样式，对象形式 + headStyle: { + type: Object, + default() { + return {}; + } + }, + // 主体自定义样式，对象形式 + bodyStyle: { + type: Object, + default() { + return {}; + } + }, + // 底部自定义样式，对象形式 + footStyle: { + type: Object, + default() { + return {}; + } + }, + // 头部是否下边框 + headBorderBottom: { + type: Boolean, + default: true + }, + // 底部是否有上边框 + footBorderTop: { + type: Boolean, + default: true + }, + // 标题左边的缩略图 + thumb: { + type: String, + default: '' + }, + // 缩略图宽高，单位rpx + thumbWidth: { + type: [String, Number], + default: '60' + }, + // 缩略图是否为圆形 + thumbCircle: { + type: Boolean, + default: false + }, + // 给head，body，foot的内边距 + padding: { + type: [String, Number], + default: '30' + }, + // 是否显示头部 + showHead: { + type: Boolean, + default: true + }, + // 是否显示尾部 + showFoot: { + type: Boolean, + default: true + }, + // 卡片外围阴影，字符串形式 + boxShadow: { + type: String, + default: 'none' + } + } +}) diff --git a/src/uni_modules/uview-plus/components/u-card/u-card.vue b/src/uni_modules/uview-plus/components/u-card/u-card.vue new file mode 100644 index 000000000..c07c019e0 --- /dev/null +++ b/src/uni_modules/uview-plus/components/u-card/u-card.vue @@ -0,0 +1,185 @@ + + + + +