前端：Uniapp封裝組件用法

大家在做前端項(xiàng)目開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)遇到公用的一些頁(yè)面，比如搜索、列表、商品詳情卡片、評(píng)論列表等。為了提高開(kāi)發(fā)效率、使代碼看起來(lái)更加簡(jiǎn)潔，這個(gè)時(shí)候封裝相應(yīng)的組件是最好的解決方案。今天小編給大家介紹一下如何在uniapp中封裝組件，希望對(duì)大家能有所幫助!

10年的江達(dá)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整江達(dá)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“江達(dá)網(wǎng)站設(shè)計(jì)”,“江達(dá)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1、在components目錄新建card.vue 組件

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
.item{ 
  
  
  
    padding: 30rpx; 
  
  
  
    margin-bottom: 30rpx; 
  
  
  
    background-color: #FFF; 
  
  
  
     
  
  
  
    .title{ 
  
  
  
        font-weight: bold; 
  
  
  
        padding-bottom: 30rpx; 
  
  
  
        border-bottom: 2rpx solid #F5F5F5; 
  
  
  
    } 
  
  
  
     
  
  
  
    .content{ 
  
  
  
        padding-top: 30rpx; 
  
  
  
        align-items: flex-start; 
  
  
  
         
  
  
  
        .info{ 
  
  
  
            width: calc(100% - 160rpx); 
  
  
  
             
  
  
  
            .summary{ 
  
  
  
                color: #777; 
  
  
  
                height: 80rpx; 
  
  
  
                font-size: 24rpx; 
  
  
  
                line-height: 1.6; 
  
  
  
                margin-bottom: 10rpx; 
  
  
  
                @include text-ellipsis(2); 
  
  
  
            } 
  
  
  
             
  
  
  
            .date{ 
  
  
  
                font-size: 24rpx; 
  
  
  
                color: $main-color; 
  
  
  
                opacity: 0.6; 
  
  
  
            } 
  
  
  
             
  
  
  
            .views{ 
  
  
  
                color: #999; 
  
  
  
                font-size: 24rpx; 
  
  
  
            } 
  
  
  
        } 
  
  
  
         
  
  
  
        .cover{ 
  
  
  
            width: 140rpx; 
  
  
  
            height: 120rpx; 
  
  
  
             
  
  
  
            .img{ 
  
  
  
                width: 100%; 
  
  
  
                height: 100%; 
  
  
  
                border-radius: 4rpx; 
  
  
  
            } 
  
  
  
        } 
  
  
  
    } 
  
  
  
} 
  
  
  
 
 
 
 

2、新建index.vue 頁(yè)面

3、組件引用方式

1）、全局注冊(cè)方式 main.js直接導(dǎo)入，每個(gè)頁(yè)面都可以直接調(diào)用

import card from './components/card/card.vue'

Vue.component('card',card)

2）、局部注冊(cè)方式

通過(guò)uniapp的easycom可以簡(jiǎn)化組件的引用，如果你創(chuàng)建的組件在components目錄下，符合 components/組件名稱/組件名稱.vue 目錄結(jié)構(gòu)，就可以在頁(yè)面直接使用，不需要在單獨(dú)引用組件。uniapp默認(rèn)是開(kāi)啟easycom配置的。所以可以直接使用。

傳統(tǒng)的引用方式：

 

個(gè)人博客網(wǎng)站：https://programmerblog.xyz

名稱欄目：前端：Uniapp封裝組件用法
網(wǎng)頁(yè)網(wǎng)址：http://m.jiaotiyi.com/article/coseced.html