You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppBox.vue 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="box" @click="$emit('click')">
  3. <!-- Photo -->
  4. <div v-if="showPhoto" class="box__photo">
  5. <slot name="photo">
  6. <div class="box__photo__preview" :class="photo" />
  7. </slot>
  8. </div>
  9. <!-- Header -->
  10. <div v-if="showHeader" class="box__header">
  11. <slot name="header">
  12. <h2 class="title">
  13. {{ title }}
  14. </h2>
  15. <h3 v-if="subtitle" class="subtitle">
  16. {{ subtitle }}
  17. </h3>
  18. </slot>
  19. </div>
  20. <!-- Content -->
  21. <div v-if="content" class="box__content" v-html="prettyContent" />
  22. <div v-else class="box__content">
  23. <slot />
  24. </div>
  25. <!-- Footer -->
  26. <slot name="footer" />
  27. </div>
  28. </template>
  29. <script>
  30. import MarkdownIt from 'markdown-it'
  31. const md = new MarkdownIt()
  32. export default {
  33. props: {
  34. photo: {
  35. type: [String, Array],
  36. default: null,
  37. },
  38. title: {
  39. type: String,
  40. default: null,
  41. },
  42. subtitle: {
  43. type: String,
  44. default: null,
  45. },
  46. content: {
  47. type: String,
  48. default: null,
  49. },
  50. },
  51. computed: {
  52. showPhoto() {
  53. return this.photo || this.$slots.photo
  54. },
  55. showHeader() {
  56. return this.title || this.$slots.header
  57. },
  58. prettyContent() {
  59. return md.render(this.content)
  60. },
  61. },
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. </style>