#### **自定義按鈕+js增強實現自定義彈框** >[info] version` 2.4.6+` 20210601 【開源版暫時用不了此功能】 *彈框內容表單支持，`默認表單頁面`或者`自定義開發頁面`，具體示例見下* 需求：增加自定義按鈕，點擊按鈕支持彈框 實現步驟： 1、添加按鈕：按鈕樣式[button]，按鈕類型[js]  2、添加 list頁面的js增強  ``` test(){ that.openCustomModal({ title: '測試自定義彈框', width: 800 }); } ``` 此處方法名`test`對應的自定義`button的編碼` 3、測試效果：  ------------------------------- **說明文檔：** - 支持按鈕 ：按鈕樣式[button]+按鈕類型[js] 或者 按鈕樣式[link]+按鈕類型[js] - js增強彈框方法：`that.openCustomModal`，方法參數如下表 | 參數名 | 類型| 描述 | | --- | --- | --- | | title |string | 彈框標題，默認 '自定義彈框' | | width| int| 彈框寬度，默認600 | | row | object| 操作的數據，如果是button按鈕，不設置則默認為當前選中行的數據，如果是link按鈕，需要傳入函數自帶參數row | | **formComponent**| string | **自定義彈框內表單組件地址**，設置的格式和系統菜單組件值的配置一樣，如果沒有設置，則彈框默認打開的是當前表單 | | requestUrl| string | 表單提交地址，如不設置，則默認表單提交地址為原online編輯地址，formComponent未設置時生效 | | hide|array| 隱藏的表單控件名， formComponent未設置時生效，可以使原表單的某些控件隱藏 | | show|array| 顯示的表單控件名， formComponent未設置時生效 ，如果設置，hide參數失效(show與hide互斥)，且只有該數組內的控件才會顯示 | ----- #### 示例1. 按鈕樣式[link]+按鈕類型[js]打開原表單且隱藏某些控件 - 添加按鈕  - 添加js ``` testlink(row){ that.openCustomModal({ row: row, title: '測試自定義彈框2', width: 800, hide: ['age', 'sex'] }); } ``` - 演示：  ------- #### 示例2. 按鈕樣式[button]+按鈕類型[js]打開新的自定義表單 - 添加按鈕同上 - 添加js ``` test(){ that.openCustomModal({ formComponent: 'edu/Hello', title: '測試自定義彈框', width: 800 }); } ``` - 演示  **備注：** 上述formComponent用到一個自定義的表單頁Hello.vue 文件地址：`src/views/edu/Hello.vue` 文件內容： ``` <template> <div> <a-form-model> <a-form-model-item label="名稱"> <a-input placeholder="請輸入名稱" v-model="name"/> </a-form-model-item> </a-form-model> </div> </template> <script> import { putAction } from '@api/manage' export default { name: 'Hello', data(){ return { name: '', } }, props:{ // 行數據 row: { type: Object, default: ()=>{}, required: false }, // 該地址是online默認的編輯提交地址 如不滿足要求需自定義 url: { type: String, default: '', required: false } }, created() { this.name = this.row.name }, methods:{ handleSubmit(){ let obj = Object.assign({}, this.row,{name: this.name}) putAction(this.url, obj).then(res=>{ if(res.success){ this.$emit('close') }else{ this.$message.warning(res.message) } }) } } } </script> ``` ---- #### 示例3. erp風格表單 附表配置 按鈕樣式[button]+按鈕類型[js] 打開自定義彈框 - 選中附表，添加自定義按鈕，按鈕編碼testsub，其余操作同上 - 選中附表，點擊js增強，切到list，添加js，同上  - 演示：