123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _constant = require("../utils/constant");
- var _relation = require("../mixins/relation");
- var _icon = _interopRequireDefault(require("../icon"));
- var _createNamespace = (0, _utils.createNamespace)('step'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default = createComponent({
- mixins: [(0, _relation.ChildrenMixin)('vanSteps')],
- computed: {
- status: function status() {
- if (this.index < this.parent.active) {
- return 'finish';
- }
- if (this.index === +this.parent.active) {
- return 'process';
- }
- },
- active: function active() {
- return this.status === 'process';
- },
- lineStyle: function lineStyle() {
- if (this.status === 'finish') {
- return {
- background: this.parent.activeColor
- };
- }
- return {
- background: this.parent.inactiveColor
- };
- },
- titleStyle: function titleStyle() {
- if (this.active) {
- return {
- color: this.parent.activeColor
- };
- }
- if (!this.status) {
- return {
- color: this.parent.inactiveColor
- };
- }
- }
- },
- methods: {
- genCircle: function genCircle() {
- var h = this.$createElement;
- var _this$parent = this.parent,
- activeIcon = _this$parent.activeIcon,
- activeColor = _this$parent.activeColor,
- finishIcon = _this$parent.finishIcon,
- inactiveIcon = _this$parent.inactiveIcon;
- if (this.active) {
- return this.slots('active-icon') || h(_icon.default, {
- "class": bem('icon', 'active'),
- "attrs": {
- "name": activeIcon,
- "color": activeColor
- }
- });
- }
- var finishIconSlot = this.slots('finish-icon');
- if (this.status === 'finish' && (finishIcon || finishIconSlot)) {
- return finishIconSlot || h(_icon.default, {
- "class": bem('icon', 'finish'),
- "attrs": {
- "name": finishIcon,
- "color": activeColor
- }
- });
- }
- var inactiveIconSlot = this.slots('inactive-icon');
- if (inactiveIcon || inactiveIconSlot) {
- return inactiveIconSlot || h(_icon.default, {
- "class": bem('icon'),
- "attrs": {
- "name": inactiveIcon
- }
- });
- }
- return h("i", {
- "class": bem('circle'),
- "style": this.lineStyle
- });
- },
- onClickStep: function onClickStep() {
- this.parent.$emit('click-step', this.index);
- }
- },
- render: function render() {
- var _ref;
- var h = arguments[0];
- var status = this.status,
- active = this.active;
- var direction = this.parent.direction;
- return h("div", {
- "class": [_constant.BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
- }, [h("div", {
- "class": bem('title', {
- active: active
- }),
- "style": this.titleStyle,
- "on": {
- "click": this.onClickStep
- }
- }, [this.slots()]), h("div", {
- "class": bem('circle-container'),
- "on": {
- "click": this.onClickStep
- }
- }, [this.genCircle()]), h("div", {
- "class": bem('line'),
- "style": this.lineStyle
- })]);
- }
- });
- exports.default = _default;
|