VUE3入門教學：使用Vue.js外掛程式封裝星級評分元件-Vue.js-PHP中文網

VUE3入門教學：使用Vue.js外掛程式封裝星級評分元件

WBOY

發布： 2023-06-16 08:23:31

原創

1698 人瀏覽過

在網路應用程式中，星級評分元件經常被用於對商品、服務或其他內容進行評級。為了方便開發者使用，Vue.js社群已經有不少星級評分元件插件，但是，自己封裝一個星級評分元件插件也很有必要。本篇文章將放棄傳統的元件編寫方式，引入Vue.js 3的Composition API，講解如何使用Vue.js外掛程式封裝一個星級評分元件。

先來了解Composition API。 Composition API主要有以下優點：

更好的邏輯封裝：現在，邏輯可以按照邏輯進行分組，而不是按照生命週期或options API定義屬性和方法。此外，可以根據單一職責原則來分組，使程式碼更易於維護和測試。
更容易重複使用邏輯：將邏輯封裝到自訂hook中可以使其在元件中易於共享和重複使用，還可以將其與其他開發人員共享，甚至將其分發到npm上以供其他人使用。
更直觀的元件程式碼：由於邏輯被拆分為較小的區塊，使程式碼更直觀、更易於理解，減少不必要的標記和嵌套，從而更容易推斷組件的作用。
更好的類型推斷：Composition API與TypeScript緊密整合，使開發人員能夠利用TypeScript的類型推斷功能來編寫更穩健的程式碼。

接下來，我們就使用Composition API來設計和實作星級評分元件。

步驟1：建立一個Vue.js外掛

外掛程式是Vue.js底層結構的擴充方式。 Vue.js外掛程式可以為Vue.js應用程式提供全域層級的功能，因此它們很適合實作通用的元件或指令。以下是建立並安裝Vue.js外掛程式的基本步驟：

建立一個JavaScript對象，在該對像中定義install方法。此方法會接收Vue作為參數，並在一個new Vue() 實例的範圍內註冊新元件或其它功能。
在install方法中定義元件或其他實用程式。
呼叫Vue上的static use()方法，傳遞一個對象，該對象包含需要安裝的插件。 Vue.js將呼叫此物件中的install方法，並將Vue.js實例作為參數傳遞給該方法。

範例程式碼如下：

// 定义插件对象
const StarRating = {
  install: function(Vue) {
    // 在install方法中注册全局组件 star-rating
    Vue.component('star-rating', {
      // 组件选项
    })
  }
}

// 调用Vue.use()方法安装插件
Vue.use(StarRating)

登入後複製

步驟2：設計元件的屬性和事件

在Composition API中，建議使用reactive()方法來定義元件的狀態（state）。使用computed()方法來計算元件的衍生狀態（derived state），使用watch()方法來監聽元件的狀態變化。為了更好地透過props和emit傳遞數據，我們可以使用reactive()來定義屬性和事件物件。

元件中應該要有以下幾個屬性：

rating: 目前評級
maxRating: 最大可評級數
starSize: 星星大小
padding: 星星之間的間距
showRating: 是否顯示評級

元件中應該有下列事件：

update : 當評級更新時自動觸發

以下是定義屬性和事件物件的範例程式碼：

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        return {
          state,
          updateRating
        }
      }
    })
  }
}

登入後複製

第3步：實作元件UI

接下來，我們使用模板程式碼實現元件的UI。 Vue.js3中使用setup()函數來設定元件狀態和事件，並使用template中的插值表達式和指令來渲染元件UI。

以下是實作元件UI的範例程式碼：

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        const stars = []
        for (let i = 0; i < state.maxRating; i++) {
          stars.push(i < state.rating ? 'star' : 'star_border')
        }

        return {
          state,
          updateRating,
          stars,
        }
      },
      template: `
        
          
          {{state.rating}}/{{state.maxRating}}
        
      `
    })
  }
}

登入後複製

我們使用了v-for指令來循環渲染星星，並使用i標籤和FontAwesome字體圖示來呈現星星圖示。這樣我們就可以依據使用者的選擇更新評級了。

第4步：使用元件

現在，我們已經完成了一個星級評分元件外掛程式的開發。我們可以在Vue.js應用程式中全域安裝這個插件，然後在任何元件模板中使用它。

在Vue.js應用程式中使用元件的範例程式碼：

const app = Vue.createApp({})
app.use(StarRating)

app.component('my-component', {
  data() {
    return {
      rating: 3
    }
  },
  template: `
    
      
    
  `
})

app.mount('#app')

登入後複製

在此範例程式碼中，我們在Vue.js應用程式中註冊了StarRating插件，並在my-component組件中使用了評分組件。在my-component元件中，我們使用$event參數來存取更新事件的新評級值。

結論

Composition API為Vue.js元件開發帶來了許多新的功能。使用這些新功能並結合Vue.js插件機制，可以更方便地封裝和重複使用元件。在本文中，我們一步一步地學習如何使用Composition API和Vue.js外掛程式來開發一個星級評分元件。現在，你可以使用這些技術去開發和封裝自己的元件插件了。

以上是VUE3入門教學：使用Vue.js外掛程式封裝星級評分元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！