創(chuàng)建智能組件

功能介紹

智能組件，是活動顯示內容的組成部分，一種插件形式的內容，允許用戶自己上傳JS代碼，編寫內容顯示。智能組件自己不能獨立運行，必須添加到人人秀活動中才能運行。代碼定義規(guī)范如下。

組件支持HTML、CSS、JS，必須使用VUE3代碼規(guī)范，支持代碼檢查。

創(chuàng)建自定義組件

添加組件

填寫名稱和圖標，預覽圖，預覽圖用于顯示組件大致效果，方便使用時查看。

開放字段配置

商家開發(fā)可以預留出組件的參數配置，方便基于不同場景使用配置參數。也可以不配置。

使用組件配置后，商家在編輯端設置配置的值，在展示端時會注入到page/data對象中,通過key-value的形式，會覆蓋原data下定義的同名變量，類似賦值。

編寫組件代碼

商家自己編寫內容顯示代碼，必須使用VUE3代碼能力，定義函數必須使用 funcName:function(){}，不能省略function定義。

HTML支持，css綁定、vue綁定、vue變量、循環(huán)、顯示判斷等，常規(guī)vue語法功能

JS支持vue完整生命周期，支持自定義自定義函數

CSS支持自定義，影響范圍僅適用當前插件

開發(fā)字段說明

字段配置

字段定義如下：

[

    {

        "title":"string",                 // 配置項顯示名稱

        "key":"string",                 // 代碼調用key，會注入到page/data對象

        "type":"string",                // 顯示類型，目前支持13種，例如：input，枚舉值見下

        "required":"boolean",           // 是否必須設置開關，開啟則用戶必須設置

        "defaultValue":"string",        // 默認設置值 string|boolean|number|Array，可空

        "tip":"string",                   // 展示在設置項提示，可空

        "extension":{                   // 字段配置擴展，用于豐富字段設置

            "multiple":"boolean",       // 當類型為 image時是否支持多選圖片

            "limit":"number ",            // 當類型為 image時指定圖片數量

            "option":[                        // 當類型為 radio/checkbox/select時選項值

                {

                "label":"string",       // 顯示的名稱

                "value":"string"        // 選擇的值

                }

            ],

            "minRows":"number",          // 當類型為 textarea時，最小內容行數

            "maxRows":"number",         // 當類型為 textarea時，最大內容行數

            "startTime":"number",         // 當類型為 time/data時，可以配置開始時間

            "endTime":"number"           // 當類型為 time/data時，可以配置結束時間

            "min":"number"                   // 當類型為 slider時，可以配置起始數

            "max":"number"                  // 當類型為 slider時，可以配置最大結束數

            "step":"number"                  // 當類型為 slider時，可以配置單次增加數

            "showInput":"boolean"        // 當類型為 slider時，可以配置是否顯示按鈕

            "associated":"string"           // 關聯(lián)顯示控制，如設置關聯(lián)key，則根據設置可以判斷顯示

            "where":"string"                   // 關聯(lián)顯示值，僅當關聯(lián)key登錄該值時改選擇才顯示

        }

    }

]

字段類型枚舉

type：image（圖片） | color（顏色）| radio（單選）| checkbox（多選）| textarea（多行文本）| input（單行文本）| select（下拉選擇）| time（時間）| date（日期）| slider（滑塊）| switch（開關）| json（數據）   

相關文檔

• 智能組件