DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/demo-description.vue

<template>
  <view :class="displayDesc ? 'demo-description-display' : ''" class="demo-description margin-sm padding-sm radius">
    <view v-if="displayDesc" class="demo-description-text text-center">
      <text class="demo-description-content text-left"><slot></slot></text>
    </view>
    <view v-else @click="displayDesc = true" class="demo-description-tip text-center">{{ tips }}</view>
  </view>
</template>

<script>
export default {
  name: 'demo-description',

  props: {
    expand: { default: false },
    tips: { default: '显示说明' }
  },

  data() {
    return {
      displayDesc: this.expand
    }
  }
}
</script>

<style scoped>
.demo-description-display {
  background: #eeeeee;
}

.demo-description-content {
  display: inline-block;
  font-size: 1em;
}

.demo-description-tip {
  font-size: 1em;
}
</style>

<style>
:host {
  display: block;
}
</style>