vue-ant-patterns/es/d-card/card.js

vue-ant-patterns

import _extends from 'babel-runtime/helpers/extends';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import cx from 'classnames';
import { Card, Tabs } from 'ant-design-vue';
var TabPane = Tabs.TabPane;


var DCard = {
  name: 'DCard',
  props: {
    prefixCls: PropTypes.string.def('depot-dcard'),
    title: PropTypes.any, // 卡片标题
    backTitle: PropTypes.string.def(''), // 卡片背面标题
    bodyStyle: PropTypes.object.def({
      padding: '8px 16px 16px'
    }), // 卡片内容样式
    headStyle: PropTypes.object.def({
      borderBottom: 0,
      padding: '16px 16px 0'
    }), // 卡片标题样式
    height: PropTypes.string.def(''), // 卡片的高度
    shadow: PropTypes.bool.def(false), // 是否有阴影
    borderRadius: PropTypes.bool.def(true), // 有圆角
    empty: PropTypes.bool.def(false), // 空卡片
    size: PropTypes.string.def('default'),
    hoverable: PropTypes.bool.def(true), // 鼠标移过时可浮起
    bordered: PropTypes.bool.def(false), // 是否有边框
    loading: PropTypes.bool.def(false), // 显示预加载
    rollingOver: PropTypes.bool.def(false), // 翻转
    tabList: PropTypes.array, // 页签标题列表
    activeTabKey: PropTypes.string, // 当前激活页签的 key
    defaultActiveTabKey: PropTypes.string // 初始化选中页签的 key，如果没有设置 activeTabKey
  },
  data: function data() {
    return {
      sVisible: false, // 鼠标滑过显示
      showBackCard: false // 是否显示卡片背面
    };
  },

  methods: {
    handleMouseOver: function handleMouseOver(e) {
      this.sVisible = true;
    },
    handleMouseOut: function handleMouseOut(e) {
      this.sVisible = false;
    },

    // 翻转卡片
    showBackCardFun: function showBackCardFun(e) {
      this.showBackCard = !this.showBackCard;
    },
    onHandleTabChange: function onHandleTabChange(key) {
      this.$emit('tabChange', key);
    }
  },
  render: function render() {
    var _cx,
        _props2,
        _this = this,
        _cx2,
        _cx3,
        _class;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $slots = this.$slots,
        $scopedSlots = this.$scopedSlots,
        $listeners = this.$listeners,
        title = this.title,
        backTitle = this.backTitle,
        bodyStyle = this.bodyStyle,
        headStyle = this.headStyle,
        hoverable = this.hoverable,
        bordered = this.bordered,
        loading = this.loading,
        shadow = this.shadow,
        borderRadius = this.borderRadius,
        empty = this.empty,
        size = this.size,
        height = this.height,
        rollingOver = this.rollingOver,
        tabList = this.tabList,
        activeTabKey = this.activeTabKey,
        defaultActiveTabKey = this.defaultActiveTabKey;
    var content = $slots.content,
        description = $slots.description,
        extra = $slots.extra,
        cover = $slots.cover,
        actions = $slots.actions;

    var children = $slots['default'];

    // tab卡片
    var hasActiveTabKey = activeTabKey !== undefined;
    var tabsProps = {
      props: _defineProperty({
        size: 'large'
      }, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey),
      on: {
        change: this.onHandleTabChange
      },
      'class': prefixCls + '-head-tabs'
    };
    var tabs = tabList && tabList.length ? h(
      Tabs,
      tabsProps,
      [tabList.map(function (item) {
        var temp = item.tab,
            _item$scopedSlots = item.scopedSlots,
            scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots;

        var name = scopedSlots.tab;
        var tab = temp !== undefined ? temp : $scopedSlots[name] ? $scopedSlots[name](item) : null;
        return h(TabPane, {
          attrs: { tab: tab, disabled: item.disabled },
          key: item.key });
      })]
    ) : null;

    var head = {
      padding: '0 16px 0',
      borderBottom: tabList && tabList.length > 0 ? '1px solid #e8e8e8' : 0
    };

    var newHeadStyle = size === 'small' ? _extends({}, headStyle, head) : _extends({}, headStyle); // 小卡片标题样式

    var cardSizeClass = size === 'default' || actions !== undefined ? prefixCls + '-default' : size === 'small' ? prefixCls + '-small' : prefixCls + '-large';
    // 正面卡片
    var wrapProps = {
      'class': cx((_cx = {}, _defineProperty(_cx, prefixCls + '-inner', 1), _defineProperty(_cx, prefixCls + '-empty', empty), _defineProperty(_cx, prefixCls + '-shadow', shadow), _defineProperty(_cx, prefixCls + '-borderRadius', borderRadius), _defineProperty(_cx, prefixCls + '-front', true), _defineProperty(_cx, prefixCls + '-loading', loading), _defineProperty(_cx, cardSizeClass, 1), _defineProperty(_cx, prefixCls + '-tabs-wrapper', tabList && tabList.length > 0), _cx)),
      style: {
        height: height
      },
      props: (_props2 = {
        // ...newPropts,
        bodyStyle: bodyStyle,
        headStyle: newHeadStyle,
        bordered: bordered,
        title: !loading ? title : null,
        hoverable: hoverable
      }, _defineProperty(_props2, 'bordered', bordered), _defineProperty(_props2, 'size', size !== 'large' ? size : 'default'), _defineProperty(_props2, 'activeTabKey', activeTabKey), _defineProperty(_props2, 'defaultActiveTabKey', defaultActiveTabKey), _props2),
      on: _extends({}, $listeners, {
        mouseenter: function mouseenter(e) {
          _this.handleMouseOver(e);
        },
        mouseleave: function mouseleave(e) {
          _this.handleMouseOut(e);
        }
      })
    };
    // 背面卡片
    var wrapPropsBack = {
      'class': cx((_cx2 = {}, _defineProperty(_cx2, prefixCls + '-inner', 1), _defineProperty(_cx2, prefixCls + '-empty', empty), _defineProperty(_cx2, prefixCls + '-shadow', shadow), _defineProperty(_cx2, prefixCls + '-borderRadius', borderRadius), _defineProperty(_cx2, prefixCls + '-back', true), _defineProperty(_cx2, cardSizeClass, 1), _cx2)),
      style: {
        height: height
      },
      props: {
        bodyStyle: bodyStyle,
        headStyle: newHeadStyle,
        bordered: bordered,
        hoverable: hoverable,
        size: size !== 'large' ? size : 'default',
        title: backTitle
      },
      on: _extends({}, $listeners, {
        mouseenter: function mouseenter(e) {
          _this.handleMouseOver(e);
        },
        mouseleave: function mouseleave(e) {
          _this.handleMouseOut(e);
        }
      })
    };
    // 内容
    var mainProps = {
      'class': prefixCls + '-content'
    };
    // 描述
    var descriptionProps = {
      'class': prefixCls + '-description'
    };
    // 右下角操作翻转卡片区域
    var rollingOverProps = {
      'class': cx((_cx3 = {}, _defineProperty(_cx3, 'right-bottom-operation', true), _defineProperty(_cx3, 'rightBottom-show', this.sVisible), _cx3)),
      on: {
        click: function click(e) {
          _this.showBackCardFun(e);
        }
      }
    };
    var outerWrapper = {
      'class': (_class = {}, _defineProperty(_class, prefixCls + '-container', true), _defineProperty(_class, prefixCls + '-showBackCard', this.showBackCard), _class)
    };
    var innerWrapper = {
      'class': _defineProperty({}, prefixCls + '-container-inner', true)
    };
    var otherWrapper = {
      'class': _defineProperty({}, prefixCls + '-container-other', true)
    };
    var loadingHeaderBlock = h(
      'div',
      { 'class': prefixCls + '-loading-header' },
      [h(
        'a-row',
        {
          attrs: { gutter: 8 }
        },
        [h(
          'a-col',
          {
            attrs: { span: 12 }
          },
          [h('div', { 'class': 'depot-dcard-loading-block' })]
        ), h(
          'a-col',
          {
            attrs: { span: 3 },
            style: 'float:right;' },
          [h('div', { 'class': 'depot-dcard-loading-block' })]
        )]
      )]
    );
    var loadingBlock = h('div', { 'class': 'depot-dcard-loading-block' });
    var loadingCover = h('div', { 'class': 'depot-dcard-loading-block', style: 'height: 140px' });
    return h(
      'div',
      outerWrapper,
      [h(
        'div',
        innerWrapper,
        [h(
          Card,
          wrapProps,
          [cover ? null : $slots.title || tabs ? h(
            'template',
            { slot: 'title' },
            [$slots.title || tabs]
          ) : null, cover ? null : h(
            'template',
            { slot: 'extra' },
            [!loading ? extra : loadingHeaderBlock]
          ), cover ? !loading ? h(
            'template',
            { slot: 'cover' },
            [h(
              'div',
              { 'class': 'cover-box' },
              [cover]
            )]
          ) : loadingCover : null, description ? h(
            'div',
            descriptionProps,
            [!loading ? description : loadingBlock]
          ) : null, h(
            'div',
            mainProps,
            [content ? !loading ? content : loadingBlock : null]
          ), children ? h(
            'div',
            otherWrapper,
            [children]
          ) : null, h(
            'template',
            { slot: 'actions' },
            [actions]
          ), rollingOver ? h('div', rollingOverProps) : null]
        ), rollingOver ? h(
          Card,
          wrapPropsBack,
          [h(
            'template',
            { slot: 'extra' },
            [extra]
          ), h(
            'div',
            mainProps,
            [$slots.backContent]
          ), rollingOver ? h('div', rollingOverProps) : null]
        ) : null]
      )]
    );
  }
};

// DCard.install = (Vue) => {
//   Vue.component(DCard.name, DCard);
//   Vue.component(Person.name, Person);
// };

export default DCard;