captain-ui/es/filter-bar/src/main.js

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
var SORT_ASCEND = 'ascend';
var SORT_DESCEND = 'descend';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('ul', {
      staticClass: "cap-filter-bar"
    }, [_vm._l(_vm.commonFilters, function (filter, index) {
      return [_vm.filters.length > 0 ? _c('li', {
        key: index,
        staticClass: "cap-filter-bar__item",
        class: {
          'cap-filter-bar__item--sort': filter.type === 'sort',
          'cap-filter-bar__item--active': index === _vm.currentFilter
        },
        style: {
          color: index === _vm.currentFilter ? _vm.color : ''
        },
        on: {
          "click": function click($event) {
            _vm.handleClick(_extends({}, filter), index);
          }
        }
      }, [_vm._v("\n      " + _vm._s(filter.title) + "\n      "), filter.type === 'sort' ? _c('div', {
        staticClass: "cap-filter-bar__sort-icon",
        class: (_obj = {}, _obj["cap-filter-bar__sort-icon--" + _vm.sortDirections[index]] = _vm.sortDirections[index], _obj)
      }, [_c('div', {
        staticClass: "cap-filter-bar__sort-icon__ascend",
        style: {
          borderColor: index === _vm.currentFilter && _vm.sortDirections[index] === _vm.SORT_ASCEND ? _vm.color : ''
        }
      }), _c('div', {
        staticClass: "cap-filter-bar__sort-icon__descend",
        style: {
          borderColor: index === _vm.currentFilter && _vm.sortDirections[index] === _vm.SORT_DESCEND ? _vm.color : ''
        }
      })]) : _vm._e()]) : _vm._e()];

      var _obj;
    }), _vm.filters.length === 0 ? _vm._t("default") : _vm._e()], 2);
  },
  name: 'cap-filter-bar',
  props: {
    filters: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    defaultFilter: {
      type: [Number, String],
      default: 0
    },
    color: {
      type: String,
      default: '#ff4e4d'
    }
  },
  data: function data() {
    return {
      SORT_ASCEND: SORT_ASCEND,
      SORT_DESCEND: SORT_DESCEND,
      commonFilters: this.filters.map(function (filter) {
        return _extends({}, filter);
      }),
      currentFilter: parseInt(this.defaultFilter, 10)
    };
  },
  computed: {
    sortDirections: function sortDirections() {
      return this.commonFilters.map(function (_ref) {
        var _ref$sortDirection = _ref.sortDirection,
            sortDirection = _ref$sortDirection === void 0 ? '' : _ref$sortDirection;
        return sortDirection;
      });
    }
  },
  mounted: function mounted() {
    if (this.filters.length > 0) {
      return;
    }

    this.commonFilters = this.$children.map(function (_ref2) {
      var title = _ref2.title,
          type = _ref2.type,
          defaultDirection = _ref2.defaultDirection;
      return type === 'sort' ? {
        title: title,
        type: type,
        defaultDirection: defaultDirection
      } : {
        title: title,
        type: type
      };
    });
  },
  methods: {
    handleClick: function handleClick(filter, index) {
      if (filter.type !== 'sort' && this.currentFilter === index) {
        return;
      } // 判断升序 or 降序


      if (filter.type === 'sort') {
        if (this.currentFilter !== index) {
          this.resetSortDirection(filter, index);
        } else if (filter.sortDirection === SORT_DESCEND) {
          filter.sortDirection = SORT_ASCEND;
          this.commonFilters.splice(index, 1, filter); // this.sortDirections.splice(index, 1, SORT_ASCEND);
        } else {
          filter.sortDirection = SORT_DESCEND;
          this.commonFilters.splice(index, 1, filter); // this.sortDirections.splice(index, 1, SORT_DESCEND);
        }
      } // 更新 filter index


      this.currentFilter = index;
      this.$emit('change', _extends({}, filter), index);
    },
    resetSortDirection: function resetSortDirection(filter, index) {
      filter.sortDirection = filter.defaultDirection || SORT_ASCEND;
      this.commonFilters.splice(index, 1, filter); // this.sortDirections[this.currentFilter] = this.commonFilters[this.currentFilter].defaultDirection || SORT_ASCEND;
    }
  }
};