first

node_modules/vant/es/sku/components/SkuRow.js

@@ -0,0 +1,117 @@
+// Utils
+import { createNamespace } from '../../utils';
+import { BORDER_BOTTOM } from '../../utils/constant'; // Mixins
+
+import { ParentMixin } from '../../mixins/relation';
+import { BindEventMixin } from '../../mixins/bind-event';
+
+var _createNamespace = createNamespace('sku-row'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export { bem };
+export default createComponent({
+  mixins: [ParentMixin('vanSkuRows'), BindEventMixin(function (bind) {
+    if (this.scrollable && this.$refs.scroller) {
+      bind(this.$refs.scroller, 'scroll', this.onScroll);
+    }
+  })],
+  props: {
+    skuRow: Object
+  },
+  data: function data() {
+    return {
+      progress: 0
+    };
+  },
+  computed: {
+    scrollable: function scrollable() {
+      return this.skuRow.largeImageMode && this.skuRow.v.length > 6;
+    }
+  },
+  methods: {
+    onScroll: function onScroll() {
+      var _this$$refs = this.$refs,
+          scroller = _this$$refs.scroller,
+          row = _this$$refs.row;
+      var distance = row.offsetWidth - scroller.offsetWidth;
+      this.progress = scroller.scrollLeft / distance;
+    },
+    genTitle: function genTitle() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('title')
+      }, [this.skuRow.k, this.skuRow.is_multiple && h("span", {
+        "class": bem('title-multiple')
+      }, ["\uFF08", t('multiple'), "\uFF09"])]);
+    },
+    genIndicator: function genIndicator() {
+      var h = this.$createElement;
+
+      if (this.scrollable) {
+        var style = {
+          transform: "translate3d(" + this.progress * 20 + "px, 0, 0)"
+        };
+        return h("div", {
+          "class": bem('indicator-wrapper')
+        }, [h("div", {
+          "class": bem('indicator')
+        }, [h("div", {
+          "class": bem('indicator-slider'),
+          "style": style
+        })])]);
+      }
+    },
+    genContent: function genContent() {
+      var h = this.$createElement;
+      var nodes = this.slots();
+
+      if (this.skuRow.largeImageMode) {
+        var top = [];
+        var bottom = [];
+        nodes.forEach(function (node, index) {
+          var group = Math.floor(index / 3) % 2 === 0 ? top : bottom;
+          group.push(node);
+        });
+        return h("div", {
+          "class": bem('scroller'),
+          "ref": "scroller"
+        }, [h("div", {
+          "class": bem('row'),
+          "ref": "row"
+        }, [top]), bottom.length ? h("div", {
+          "class": bem('row')
+        }, [bottom]) : null]);
+      }
+
+      return nodes;
+    },
+    centerItem: function centerItem(selectSkuId) {
+      if (!this.skuRow.largeImageMode || !selectSkuId) {
+        return;
+      }
+
+      var _this$children = this.children,
+          children = _this$children === void 0 ? [] : _this$children;
+      var _this$$refs2 = this.$refs,
+          scroller = _this$$refs2.scroller,
+          row = _this$$refs2.row;
+      var child = children.find(function (it) {
+        return +it.skuValue.id === +selectSkuId;
+      });
+
+      if (scroller && row && child && child.$el) {
+        var target = child.$el;
+        var to = target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2;
+        scroller.scrollLeft = to;
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": [bem(), BORDER_BOTTOM]
+    }, [this.genTitle(), this.genContent(), this.genIndicator()]);
+  }
+});