bjquanjiang
/
DigitalScholl

<template>
  <view v-if="type === 'default'" @click="click" :class="className" :style="style" class="action cu-bar-item">
    <slot v-if="$slots.$default"></slot>
    <template v-else>
      <l-icon :type="icon" :color="color" size="lg" class="cuIcon-cu-image" />
      <slot name="badge"></slot>
      <view :class="'text-' + color">
        <slot name="title">{{ title }}</slot>
      </view>
    </template>
  </view>

  <view v-else-if="type === 'round'" :class="className" :style="style" class="action text-gray add-action cu-bar-item">
    <slot v-if="$slots.$default"></slot>
    <template v-else>
      <button :class="['bg-' + color, 'cuIcon-' + icon]" class="cu-btn shadow"></button>
      <slot name="title">{{ title }}</slot>
    </template>
  </view>
</template>

<script>
export default {
  name: 'l-bar-item',

  props: {
    type: { default: 'default' },
    title: {},
    icon: {},
    color: { default: 'gray' }
  },

  methods: {
    click(e) {
      this.$emit('click', e)
    }
  }
}
</script>