## 介紹 之前推出的遠程自定義頁面功能已經滿足很多用戶對特殊頁面的自定義需求，但是考慮到自定義頁面其實所要做的工作挺多，經過調查發現，很多用戶使用遠程自定義頁面是因為商城多規格等特殊的表單編輯需求，其實僅僅需要一個能自定義的組件，并不需要對整個頁面進行自定義。 針對此需求我們特別研發了自定義Form組件功能，以后只需要定義一個組件即可，更加便捷方便。  注意：需要1.0以上版本支持 遠程Form組件功能使用步驟 1.將一個Vue文件放在Public目錄下 2.直接在后臺代碼調用 只需要在第三個參數指定為remote，同時設置outUrl字段為vue組件的URL路徑即可。 ``` //?遠程Form組件測試 ->addFormItem('priceList',?'多規格價格',?'remote',?'',?[ 'outUrl'?=>?'http://localhost/price.vue', 'placeholder'?=>?'' ]) ``` 3.nginx配置文件增加 ``` add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, OPTIONS'; if ($request_method = 'OPTIONS') { return 204; } ``` 4.后臺訪問即可自動渲染 Vue文件內容參考： ``` <style> .example { color: red; } </style> <template> <div class="price-comp"> 這是自定義遠程Form組件 <el-row> <el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> </div> </template> <script> export default { props: { // 表單組件的value value: { type: [Object, Array, String, Number], default: () => { return {}; } }, pitem: { type: Object, default: () => { return {} } } }, data() { return { formValue: null } }, watch: {}, mounted() { this.formValue = this.value; this.loadData(); }, methods: { async loadData() { // 將修改的值回傳給上級表單 this.$emit('input', '這是修改后的新值'); } } } </script> ``` ## 數據綁定 默認云后臺會將該表單項的默認值以v-model的形式綁定到組件上，只需要用$this.value即可獲取。 如果想回傳修改后的值給云后臺，執行this.$emit('input', 新值)。這里了解vue的都應該一看就明白，是典型的標準v-model應用。 ``` export default { props:{ value: { type: Object, default: () => { return {} } } } ... } ```