加載更多組件?

定義組件：src/components/library/xtx-infinite-loading.vue

<template>
  <div class="xtx-infinite-loading" ref="container">
    <div class="loading" v-if="loading">
      <span class="img"></span>
      <span class="text">正在加載...</span>
    </div>
    <div class="none" v-if="finished">
      <span class="img"></span>
      <span class="text">親，沒有更多了</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  name: 'XtxInfiniteLoading',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const container = ref(null)
    useIntersectionObserver(
      container,
      ([{ isIntersecting }], dom) => {
        if (isIntersecting) {
          if (props.loading === false && props.finished === false) {
            emit('infinite')
          }
        }
      },
      {
        threshold: 0
      }
    )
    return { container }
  }
}
</script>

<style scoped lang='less'>
.xtx-infinite-loading {
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 50px;
      height: 50px;
      background: url(../../assets/images/load.gif) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
  .none {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 200px;
      height: 134px;
      background: url(../../assets/images/none.png) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
}
</style>

注冊(cè)組件：src/components/library/index.js

import XtxInfiniteLoading from './xtx-InfiniteLoading.vue'
export default {
    install(app) {
        app.component(XtxInfiniteLoading.name, XtxInfiniteLoading)
    }
}

?引用組件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 導(dǎo)入自定插件
import ui from './components/library'

// 創(chuàng)建一個(gè)vue應(yīng)用實(shí)例
createApp(App).use(store).use(router).use(ui).mount('#app')

使用組件： .vue文件

 <XtxInfiniteLoading :loading="loading" :finished="finished" 
   @infinite="getData" />

<script>
import { ref} from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryGoods } from '@/api/category'
export default {
  name: 'SubCategory',
  setup () {
    const loading = ref(false)
    const finished = ref(false)
    const route = useRoute()
    const goodsList = ref([])
    // 查詢參數(shù)
    let reqParams = {
      page: 1,
      pageSize: 20
    }

    // 獲取數(shù)據(jù)函數(shù)
    const getData = () => {
      loading.value = true
      reqParams.categoryId = route.params.id
      findSubCategoryGoods(reqParams).then(({ result }) => {
        if (result.items.length) {
          goodsList.value.push(...result.items)
          reqParams.page++
        } else {
          // 加載完畢
          finished.value = true
        }
        // 請(qǐng)求結(jié)束
        loading.value = false
      })
    }
    return { loading, finished, getData }
  }
}
</script>

輪播圖組件?

首先是輪播圖的樣式：src/components/library/xtx-carousel.vue?

<template>
</template>

<script>
</script>

<style scoped lang="less">
.xtx-carousel {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 150px;
    position: relative;

    .carousel {
        &-body {
            width: 100%;
            height: 100%;
        }

        &-item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 0.5s linear;

            &.fade {
                opacity: 1;
                z-index: 1;
            }

            img {
                width: 100%;
                height: 100%;
            }

            // 輪播商品
            .slider {
                display: flex;
                justify-content: space-around;
                padding: 0 40px;

                >a {
                    width: 240px;
                    text-align: center;

                    img {
                        padding: 20px;
                        width: 230px !important;
                        height: 230px !important;
                    }

                    .name {
                        font-size: 16px;
                        color: #666;
                        padding: 0 40px;
                    }

                    .price {
                        font-size: 16px;
                        color: @priceColor;
                        margin-top: 15px;
                    }
                }
            }
        }

        &-indicator {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                cursor: pointer;

                ~span {
                    margin-left: 12px;
                }

                &.active {
                    background: #fff;
                }
            }
        }

        &-btn {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, .2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all 0.5s;

            &.prev {
                left: 20px;
            }

            &.next {
                right: 20px;
            }
        }
    }

    &:hover {
        .carousel-btn {
            opacity: 1;
        }
    }
}
</style>

然后是輪播圖的結(jié)構(gòu)與邏輯封裝：src/components/library/xtx-carousel.vue

<template>
  <div class='xtx-carousel' @mouseenter="stop()" @mouseleave="start()">
    <ul class="carousel-body">
    <!--  fade是控制顯示那的那張圖片 需要一個(gè)默認(rèn)索引數(shù)據(jù)，
    渲染第一張圖和激活第一個(gè)點(diǎn) -->
      <li class="carousel-item" v-for="(item,i) in sliders" :key="i" 
       :class="{fade:index===i}">
        <RouterLink to="/">
          <img :src="item.imgUrl" alt="">
        </RouterLink>
      </li>
    </ul>
    <!-- 左右點(diǎn)擊按鈕 -->
    <a @click="toogle(-1)" href="javascript:;" class="carousel-btn prev">
       <i class="iconfont icon-angle-left"></i>
    </a>
    <a @click="toogle(1)" href="javascript:;" class="carousel-btn next">
       <i class="iconfont icon-angle-right"></i>
    </a>
    <!-- 跟隨的小點(diǎn) -->
    <div class="carousel-indicator">
      <span v-for="(item,i) in sliders" :key="i" 
       :class="{active:index===i}"></span>
    </div>
  </div>
</template>
<script>
import { onUnmounted, ref, watch } from 'vue'
export default {
    name: 'XtxCarousel',
    props: {
        silders: {
            type: Array,
            default: () => []
        },
        //自動(dòng)輪播的間隙
        duration: {
            type: Number,
            default: 3000
        },
        //是否自動(dòng)輪播
        antoPlay: {
            type: Boolean,
            default: true
        }
    },
    setup(props) {
        // 設(shè)置默認(rèn)索引
        const index = ref(0)
        // 自動(dòng)播放
        let timer = null
        const autoPlayFn = () => {
            clearInterval(timer)
            timer = setTimeout(() => {
                index.value++

                if (index.value >= props.silders.length) {
                    index.value = 0
                }
            }, props.duration)
        }

        watch(() => index.value, () => {
            // 有數(shù)據(jù) 并且開啟了自動(dòng)播放，才調(diào)用自動(dòng)播放
            if (props.sliders.length && props.antoPlay) {
                autoPlayFn()
            }
        }, { immediate: true })

        // 鼠標(biāo)進(jìn)入輪播 計(jì)時(shí)停止
        const stop = () => {
            if (timer) clearInterval(timer)
        }

        // 鼠標(biāo)離開輪播 計(jì)時(shí)開始
        const start = () => {
            if (props.silders.length && props.antoPlay) {
                autoPlayFn()
            }
        }

        // 左右按鈕切換
        const toogle = (step) => {
            const newIndex = index.value + step
            if (newIndex >= props.silders.length) {
                index.value = 0
            } else if (newIndex < 0) {
                index.value = props.silders.length - 1
            } else {
                index.value = newIndex
            }

        }

        // 銷毀計(jì)時(shí)器
        onUnmounted(() => {
            clearInterval(timer)
        })
        return {
            index,
            stop,
            start,
            timer,
            toogle
        }
    }
}
</script>

插件注冊(cè)：src/components/library/index.js

+import XtxCarousel from './xtx-carousel.vue'


export default {
  install (app) {
    +app.component(XtxCarousel.name, XtxCarousel)
  }
}

插件使用：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'

+import ui from './components/library'

+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用

<XtxCarousel :sliders="sliders" />

消息提示組件

封裝組件：?src/components/library/xtx-message.vue

<template>
  <div class="xtx-message" :style="style[type]">
    <!-- 上面綁定的是樣式 -->
    <!-- 不同提示圖標(biāo)會(huì)變 -->
    <i class="iconfont" :class="[style[type].icon]"></i>
    <span class="text">{{text}}</span>
  </div>
</template>
<script>
export default {
  name: 'XtxMessage',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      // warn 警告  error 錯(cuò)誤  success 成功
      default: 'warn'
    }
  },
  setup () {
    // 定義一個(gè)對(duì)象，包含三種情況的樣式，對(duì)象key就是類型字符串
    const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        icon: 'icon-shanchu',
        color: '#F56C6C',
        backgroundColor: 'rgb(254, 240, 240)',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        icon: 'icon-queren2',
        color: '#67C23A',
        backgroundColor: 'rgb(240, 249, 235)',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
    return { style }
  }
}
</script>
<style scoped lang="less">
.xtx-message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
</style>

插件定義：src/componets/library/index.js

import XtxMessage from './xtx-message.vue'

export default {
  install (app) {
    // 在app上進(jìn)行擴(kuò)展，app提供 component directive函數(shù)
    // component是用來進(jìn)行全局組件注冊(cè)的
    // directive主要是用來自定義指令的
    // 如果要掛載原型 app.config.globalProperties 方式
    app.component(XtxMessage.name, XtxMessage)
  }
}

使用插件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
+import ui from './components/library'

+// 插件的使用，在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用：文章來源地址http://www.zghlxwxcb.cn/news/detail-652642.html

 <XtxMessage text="賬號(hào)密碼錯(cuò)誤" type="error"/>

骨架屏組件

?封裝組件：src/components/library/xtx-skeleton.vue

<template>
  <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 閃效果 xtx-skeleton 偽元素 --->
  </div>
</template>
<script>
export default {
  name: 'XtxSkeleton',
  // 使用的時(shí)候需要?jiǎng)討B(tài)設(shè)置 高度，寬度，背景顏色，是否閃下
  props: {
    bg: {
      type: String,
      default: '#efefef'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    animated: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
.xtx-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
  &::after {
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>

插件定義：?src/componets/library/index.js

import XtxSkeleton from './xtx-skeleton.vue'

export default {
  install (app) {
    // 在app上進(jìn)行擴(kuò)展，app提供 component directive 函數(shù)
    // 如果要掛載原型 app.config.globalProperties 方式
    // component是用來進(jìn)行全局組件注冊(cè)的
    // directive主要是用來自定義指令的
    app.component(XtxSkeleton.name, XtxSkeleton)
  }
}

使用插件：?src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
+import ui from './components/library'

+// 插件的使用，在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用：

<XtxSkeleton bg="#e4e4e4" width="306px" height="306px" animated />
<XtxSkeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" />

到了這里，關(guān)于vue3自定義封裝組件：消息提示、輪播圖、加載更多、骨架屏組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！