designer-hub/packages/app/src/pages/home/components/article.vue

<script setup lang="ts">
import dayjs from 'dayjs'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
import view from '@designer-hub/assets/src/libs/assets/view'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  author: {
    type: Object,
    default: () => ({ name: '匿名' }),
  },
  createdAt: {
    type: Date,
    default: () => new Date(),
  },
  viewNum: {
    type: Number,
    default: 0,
  },
  content: {
    type: String,
    default: '<div>1111</div>',
  },
})
</script>
<template>
  <div class="px-3.5 bg-white flex-grow">
    <div class="text-black text-xl font-normal font-['PingFang_SC'] leading-loose">
      {{ title }}
    </div>
    <div class="flex items-center my-5">
      <div class="w-7 h-7 overflow-hidden roudnded-full">
        <slot name="avatar"></slot>
      </div>
      <div class="flex-1 ml-1">
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          {{ author.name }}
        </div>
        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
          编辑于
          {{ dayjs(createdAt).format('YYYY/MM/DD') }}
        </div>
      </div>
      <div class="flex items-center gap-1">
        <slot name="viewLeft"></slot>
        <!-- <wd-icon name="view" size="18" color="rgba(0,0,0,.45)"></wd-icon> -->
        <wd-img :src="view" width="18" height="18"></wd-img>
        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
          {{ viewNum || 0 }}
        </div>
      </div>
    </div>
    <!-- <u-parse :content="content"></u-parse> -->
    <!-- <div class="content" v-html="content"></div> -->
    <mpHtml :content="content"></mpHtml>
  </div>
</template>
<style lang="scss"></style>