用iview框架製做一個商家的評分功能

用iview框架製做一個商家的評分功能

點擊評分，下面的星星內容會自動變化

評分組件詳解

Rate組件結構

在官網中咱們能夠看到iview有一個Rate組件，調用組件代碼便可使用評分功能

結構也很是簡單使用Rate 組件，而後用v-model來綁定組件選中以後的值。

Rate組件屬性

除了使用Rate之外，咱們能夠看到上圖中有show-text這麼一個屬性，也就是添加了這個屬性以後圖左邊評分的時候會自動顯示文字結果，如上圖左邊的3星。固然還有其餘的屬性以下：

如屬性count則表示總分數，好比這裏的count值爲10，咱們能夠看到以下圖，評分的總數變爲了10

guiplan快捷使用Rate

分析評分結構以後，咱們在使用中仍是要寫不少的代碼，如：

<template>
    <Rate clearable v-model="value1" /> clearable: true
    <Rate v-model="value2" /> clearable: false
</template>
<script>
    export default {
        data () {
            return {
                value1: 3,
                value2: 3
            }
        }
    }
</script>

咱們能夠看到既要寫html代碼\<Rate clearable v-model="value1" />,還要在下方寫數據代碼value1:3。
有什麼辦法省略這些代碼呢？這時咱們就能夠用guiplan軟件來自動生成這些代碼，來提升工做效率。
軟件不只能幫咱們去寫這些代碼，並且還支持可視化佈局，拖拽，快捷鍵等就能輕鬆繪製好頁面。

Rate組件添加

咱們只須要在軟件中點擊「iview組件」，而後點擊「其餘」這個組件分類，再點擊「評分」，這樣一個評分組件就添加進來，能夠看到以下圖

咱們能夠在樣式與交互修改中看到，這裏自動生成了數據代碼，以及屬性代碼，就連v-modal綁定也所有生成好了。咱們幾乎一個代碼都沒寫，這個評分組件就自動添加進來了。


固然也有人以爲這個自動生成的字段名，我不喜歡。實際項目運用過程當中，對命名也是有要求的。咱們還能夠批量修改字段名，以下圖將rateData字段改成rateTest

而後點擊替換，這裏會自動將該組件用到的rateData字段所有替換爲rateTest,包括已v-modal綁定好的字段等。
最後咱們點擊保存直接查看vue源代碼
這裏咱們能夠看到html代碼中，Rate組件添加進來了

data數據中也自動建立了rateTest字段

除了上面的data數據，v-modal雙向綁定之外，還能夠本身建立method方法，以及v-show顯示,v-for循環遍歷綁定等，均可以在軟件中可視化的製做交互

Rate屬性添加

瞭解了Rate是如何快不須要敲代碼就能自動插入到頁面中以後，咱們還要進行對Rate評分進行一些修改，固然大部分功能也是不須要敲代碼的。
好比我要將評分的星星改成字母A
咱們能夠點擊當前元素屬性右邊的編輯按鈕

能夠看到下圖左邊有不少的屬性

在自定義字符屬性下方文本框裏輸入本身要替換的字符A,而後點擊手動插入，便可自動將這個屬性插入進來。點擊保存以後能夠看到以前的評分是星星圖標，如今變爲的字母A

而若是不用guiplan工具，咱們就只能手寫character = 「A」 代碼，並且還要擔憂這個單詞會不會寫錯，還要去官網查有沒有這個屬性等諸多的繁瑣操做，這裏只需一鍵搞定。

視頻演示

最後獻上完整的視頻教程供參考
https://www.bilibili.com/vide...