[vue] link 내용 요약본

<template lang="pug">
  .main
    .content-loader(v-if="!state.title") Loading..
    .link-meta(
      v-else
      @mouseover="handleMetaMouseover"
      @mouseleave="handleMetaMouseleave"
    )
      .close-btn
        i(
          class="icon-cancel-1"
          :class="{hidden: !state.mouseover}"
          @click="handleClose"
        )
      .vertival-bar
      .meta(:class="{bgcolor: state.mouseover}")
        .title(@click="handleClick") {{state.title}}
        .desc(@click="handleClick")  {{state.desc}}
        .image
          img(:src="state.image")
</template>
<script lang="ts">
import {createComponent, onMounted, reactive} from '@vue/composition-api'
import {getUrlMeta} from '~/_common/get-url-meta'

export default createComponent({
  props: ['url'],
  setup(initProps, {emit}) {
    const state = reactive({
      title: '',
      desc: '',
      image: '',
      mouseover: false,
    })
    const mounted = async () => {
      const meta = await getUrlMeta(initProps.url)
      Object.assign(state, meta)
    }
    const handleMetaMouseover = () => {
      state.mouseover = true
    }
    const handleMetaMouseleave = () => {
      state.mouseover = false
    }
    const handleClose = () => {
      emit('close')
    }
    const handleClick = () => {
      window.open(initProps.url, '_blank', 'width=1000,height=700')
    }
    onMounted(mounted)
    return {
      state,
      handleMetaMouseover,
      handleMetaMouseleave,
      handleClose,
      handleClick,
    }
  },
})
</script>
<style lang="stylus" scoped>
  .hidden
    visibility hidden

  .bgcolor
    background-color #fafafa

  .link-meta
    margin 5px 0
    display flex
    .close-btn
      color var(--ft-lightGray)
      i
        cursor pointer
        &:hover
          color black
    .vertival-bar
      flex-grow 0
      flex-shrink 0
      flex-basis 3px
      background-color var(--iconGray)
    .meta
      margin-left 10px
      display flex
      flex-direction column
      .title
        cursor pointer
        margin-bottom 10px
        text-align left
      .desc
        cursor pointer
        font-size 14px
        margin-bottom 10px
        color var(--ft-lightGray)
      .image
        width 300px
</style>