bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view v-if="type !== 'default'" class="cu-bar bg-white cu-title">
    <!-- 下划线标题(普通/变色) -->
    <view v-if="type === 'underline' || type === 'colorfulUnderline'" class="action border-title">
      <text :class="['text-' + color, blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
      <text v-if="type === 'underline'" :class="'bg-' + color" style="width:2rem"></text>
      <text v-else-if="type === 'colorfulUnderline'" class="bg-gradual-blue" style="width:3rem"></text>
    </view>

    <!-- 扩散型下划线标题 -->
    <view v-else-if="type === 'blurUnderline'" class="action sub-title">
      <text :class="['text-' + color, blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
      <text :class="'bg-' + color"></text>
    </view>

    <!-- 扩散型副标题 -->
    <view v-else-if="type === 'blurSubtitle'" class="action sub-title">
      <text :class="[' text-' + color, blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
      <text :class="[' text-' + color]" class="text-ABC">
        <slot name="subtitle">{{ subtitle }}</slot>
      </text>
    </view>

    <!-- 后缀型副标题 -->
    <view v-else-if="type === 'nextSubtitle'" class="action title-style-3">
      <text :class="['text-' + color, blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
      <text :class="'text-' + color" class="text-Abc self-end margin-left-sm light">
        <slot name="subtitle">{{ subtitle }}</slot>
      </text>
    </view>
  </view>

  <!-- 普通标题(圆点/长圆点) -->
  <view @click="$emit('click', $event)" v-else :class="[border ? 'solid-bottom' : '']" class="cu-bar bg-white cu-title">
    <view class="action" style="vertical-align: middle;">
      <text
        :class="[subColor ? 'text-' + subColor : '', long ? 'cuIcon-titles' : 'cuIcon-title']"
        class="margin-right-xs"
      ></text>
      <text :class="[blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
    </view>
  </view>
</template>

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

  props: {
    type: { default: 'default' },
    color: { default: 'black' },
    subColor: { default: 'blue' },
    long: {},
    subtitle: {},
    blod: {},
    border: {}
  }
}
</script>