feat: 优化piui-listitem右侧图标展示方式

sadais-org · Nov 13, 2020 · a732210 · a732210
1 parent 18059f8
commit a732210
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/components/pi-list-item/index.vue b/components/pi-list-item/index.vue
@@ -138,11 +138,52 @@ export default {
         return listItem.showRightIcon
       }
     },
-    // 右侧icon样式
-    rightIcon: {
-      type: Object,
+    // 右侧icon名称
+    rightIconName: {
+      type: String,
+      // 'right'
+      default() {
+        return listItem.rightIconName
+      }
+    },
+    // 是否显示图标右上角小红点，默认值 false
+    rightIconDot: {
+      type: Boolean,
+      // false
+      default() {
+        return listItem.rightIconDot
+      }
+    },
+    // 图标右上角徽标的内容
+    rightIconBadge: {
+      type: Boolean,
+      // ''
+      default() {
+        return listItem.rightIconBadge
+      }
+    },
+    // 图标颜色
+    rightIconColor: {
+      type: Boolean,
+      // #cccccc
+      default() {
+        return listItem.rightIconColor
+      }
+    },
+    // 图标字体大小，单位rpx
+    rightIconSize: {
+      type: Boolean,
+      // ''
+      default() {
+        return listItem.rightIconSize
+      }
+    },
+    // 类名前缀，用于使用自定义图标，默认为（pi-icon-）
+    rightIconClassPrefix: {
+      type: Boolean,
+      // 'pi-icon-'
       default() {
-        return listItem.rightIcon
+        return listItem.rightIconClassPrefix
       }
     },
     // 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

diff --git a/config/listItem.js b/config/listItem.js
@@ -12,14 +12,12 @@ export default {
   border: true, // 是否显示边框
   padding: '24rpx 32rpx', // padding
   showRightIcon: true, // 是否显示右边icon，默认是箭头（可以自定义设置成其他图标）
-  rightIcon: {
-    name: 'right', // 图标名称或图片链接
-    dot: false, // 是否显示图标右上角小红点，默认值 false
-    badge: '', // 图标右上角徽标的内容
-    color: '#cccccc', // 图标颜色
-    size: '', // 图标字体大小，单位rpx
-    classPrefix: 'pi-icon-' // 类名前缀，用于使用自定义图标，默认为（pi-icon-）
-  },
+  rightIconName: 'right' , // 图标名称或图片链接
+  rightIconDot: false, // 是否显示图标右上角小红点，默认值 false
+  rightIconBadge: '', // 图标右上角徽标的内容
+  rightIconColor: '#cccccc', // 图标颜色
+  rightIconSize: '', // 图标字体大小，单位rpx
+  rightIconClassPrefix: 'pi-icon-', // 类名前缀，用于使用自定义图标，默认为（pi-icon-）
   hoverClass: 'pi-hover-class', // 宫格按压时的样式类，"none"为无效果
   hoverStartTime: 10, // 按住后多久出现点击态，单位毫秒
   hoverStayTime: 100 // 手指松开后点击态保留时间，单位毫秒

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sadais-piui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "piui组件库",
   "main": "index.js",
   "scripts": {