图片组件新增填充方式属性

hakubox · 小小鲁班
1 parent 69d21501
Showing 1 changed file with 19 additions and 2 deletions
front-end/h5/src/components/plugins/lbp-picture.js
@@ -4,10 +4,27 @@ import placeholderImg from &#39;./lbp-picture-placeholder.png&#39; // issue #34
 export default {
   name: 'lbp-picture',
   render () {
-    return <img src={this.imgSrc || placeholderImg} alt="" srcset="" width="100%" />
+    return <img src={this.imgSrc || placeholderImg} style={{ objectFit: this.fillType }} alt="" srcset="" width="100%" />
   },
   props: {
-    imgSrc: PropTypes.image()
+    imgSrc: PropTypes.image(),
+    fillType: {
+      type: String,
+      default: 'contain',
+      editor: {
+        type: 'a-select',
+        label: '填充方式',
+        props: {
+          options: [
+            { label: 'contain 短边缩放', value: 'contain' },
+            { label: 'cover 长边缩放', value: 'cover' },
+            { label: 'fill 拉伸', value: 'fill' },
+            { label: 'none 原始', value: 'none' },
+            { label: 'scale-down 弹性缩放', value: 'scale-down' }
+          ]
+        }
+      }
+    }
   },
   data: () => ({
     placeholderImg