current position:Home>Actual combat of vue3 project --- Zhihu daily --- details page

Actual combat of vue3 project --- Zhihu daily --- details page

2022-04-29 06:49:16Front end childe Jia

Catalog

Component cache

Network request

Details page

$nextTick&& scoped


Component cache

When the home page jumps to the details page, it should be cached

vue2

  <keep-alive include="Home">
    <router-view></router-view>
  </keep-alive>

vue3

<!--  Component  Components rendered for  is Control whether -->
  <router-view v-slot="{ Component }">
    <keep-alive include="Home">
      <component :is="Component" />
    </keep-alive>
  </router-view>

Network request

import axios from './http'
// Get news details 
export const NewsInfo = id => {
    return axios.get('/api/news_info', {
        params: {
            id
        }
    })
}

// Get news comments 
export const StoryExtra = id => {
    return axios.get('/api/story_extra', {
        params: {
            id
        }
    })

}

Details page

  • The styles are data Identification is not required /deep/              There is no need to add... For component library style
  • v-text Don't recognize tags ,v-html Can identify labels
  • route The route instance object controls the route jump   router.back() Return to level one
  • route Routing information object , Get path parameters  route.params.id Get path parameters
  • Before destruction    remove link Labels avoid style conflicts
  • After the page is updated, you can get dom Add pictures ( Be similar to -$nextTick)

js Create elements && Add tags

  • document.createElement('link')
  •  document.head.append(link) establish dom Elements
  •  document.head.removeChild(link) remove dom Elements
  •   let img = document.querySelector('.img-place-holder')
  •  img.innerHTML += `<img src="${state.NewsInfo.image}" alt="">` Additive elements

link label

  • HTML External resource link elements  (<link>) Specifies the relationship between the current document and external resources . This element is most commonly used to link Style sheets , It can also be used to create site icons ( such as PC Terminal “favicon” Icons and icons on mobile devices for display on the home screen ) .
  • href: This attribute specifies the name of the linked resource URL. URL It can be absolute , It can also be relative .
  • rel  It's necessary . Define the relationship between the current document and the linked document . stylesheet Style sheets
<template>
  <van-skeleton title :row="5" v-if="NewsInfo === null" />
  <div class="content" v-html="NewsInfo.body" v-else> </div>
  <div class="nav-box">
    <van-icon name="arrow-left" @click="handle" />
    <van-icon name="comment-o" :badge="comments" />
    <van-icon name="good-job-o" :badge="popularity" />
    <van-icon name="star-o" color="#1989fa" />
    <van-icon name="share-o" color="#ccc" />
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { reactive, toRefs, onBeforeMount, onBeforeUnmount, onUpdated } from 'vue'
import { NewsInfo, StoryExtra } from '../api/index'
export default {
  name: "Detail",
  setup() {
    let state = reactive({
      comments: 0,// The total number of comments 
      popularity: 0,// Number of likes 
      NewsInfo: null
    })

    // The route instance object controls the route jump 
    const router = useRouter()
    // Routing information object , Get path parameters 
    const route = useRoute()
    // Click jump to return to the previous level 
    const handle = (() => {
      router.back()
    })
    // get data 
    onBeforeMount(async () => {
      let id = route.params.id
      let result = await NewsInfo(id)
      state.NewsInfo = result
      let { comments, popularity } = await StoryExtra(id)
      state.comments = comments
      state.popularity = popularity

      // Dynamically create css
      let link = document.createElement('link')
      link.id = 'link'
      link.rel = 'stylesheet'
      link.href = state.NewsInfo.css[0]
      document.head.append(link)
    })

    // After data update , Can be obtained dom  Add pictures 
    onUpdated(() => {
      let img = document.querySelector('.img-place-holder')
      if (img && img.innerHTML.trim() == '') {
        img.innerHTML += `<img src="${state.NewsInfo.image}" alt="">`
      }
    })

    // remove link Labels avoid style conflicts 
    onBeforeUnmount(() => {
      let link = document.getElementById('link')
      if (!link) return
      document.head.removeChild(link)
    })
    return {
      ...toRefs(state),
      handle
    }
  },
};
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  padding-bottom: 50px;
  margin: 0;

  /deep/.img-place-holder {
    overflow: hidden;
    height: 375px;

    img {
      width: 100%;
      min-height: 100%;
      margin: 0;
    }
  }
}

.nav-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f4f4f4;
  height: 50px;
  padding: 0 15px;

  .van-icon:nth-child(1) {
    position: relative;

    &::after {
      position: absolute;
      content: '';
      width: 1px;
      top: -10%;
      right: -15px;
      height: 120%;
      background: #d5d5d5;
    }
  }

  /deep/.van-badge {
    background-color: transparent;
    border: none;
    color: #000;
    right: -5px;
  }
}

.van-skeleton {
  padding: 30px 15px;
}
</style>

$nextTick&& scoped

nextTick The next round of

  • nextTick The next time daom After the node is updated, execute its specified callback
  • Application scenarios “ When the data is changed , Based on the updated new Dom Do something ”

scoped Style privatization , Only effective in the current component Will add... To the label data-v-40f4caea Property value

copyright notice
author[Front end childe Jia],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204260850228578.html

Random recommended