## 介紹 UniAdmin的Builder動態頁面技術雖然將來會覆蓋95%以上的后臺開發工作，但是項目中總會存在一些特別頁面需要自定義頁面內容，所以大家可以通過遠程頁面的開發方式來完成復雜頁面的開發。 注意：需要1.0以上版本支持 遠程頁面功能目前已經支持： 1.將一個Vue文件放在Public目錄下 2.后臺路由path字段正常自定義比如cms/test/remote（這里注意不需要在application/cms/controller/admin/Test.php里定義一個remote方法，這里的path僅僅只是一個前端路徑作用，沒有API接口作用），routeType字段設置為remote，outUrl字段填寫Vue組件的路徑，比如：/test.vue 3.nginx配置文件增加 ``` add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, OPTIONS'; if ($request_method = 'OPTIONS') { return 204; } ``` 4.后臺訪問即可自動渲染 可以在組件內使用所有element-ui的組件。 Vue文件內容參考： ``` <template> <div> <div class="example">{{ msg }}，這是云后臺遠程Vue自定義組件渲染頁面</div> <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> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>信息按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button> </el-row> <el-row> <el-button round>圓角按鈕</el-button> <el-button type="primary" round>主要按鈕</el-button> <el-button type="success" round>成功按鈕</el-button> <el-button type="info" round>信息按鈕</el-button> <el-button type="warning" round>警告按鈕</el-button> <el-button type="danger" round>危險按鈕</el-button> </el-row> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> </div> </template> <script> export default { props:{ pitem: { type: Object, default: () => { return {} } } } , data () { return { msg: 'Hello world!', res: {} } }, methods: { async test(){ alert('asd'); let res = await this.util.request({ url: 'https://jiangruyi.com/cloud/xyadmin/api', method: 'get' }); this.res = res; } } } </script> <style> .example { color: red; } </style> ``` ## 從Builder列表跳轉遠程頁面 可以在遠程頁面的URL中接收到cateId參數 注意其中的cms/test/remote應當與您的遠程組件api記錄的path字段保持一致。 querySuffix意思是將當前列表的id賦值給cateId傳遞給遠程頁面，也可以根據需求定義別的參數。 ``` ->addRightButton('remote', '遠程組件', [ 'pageType'?=>?'modal', 'modalType' => 'remote', 'api' => '/v1/admin/cms/test/remote', 'outUrl' => '/test.vue', 'apiSuffix' => [], 'querySuffix' => [['cateId', 'id']], 'width' => '1200', 'title' => '遠程組建測試' ]) ``` ## 傳遞參數 從列表頁面傳遞參數給遠程頁面 ``` export default { props:{ pitem: { type: Object, default: () => { return {} } } } ... } ``` 獲取query參數console.log(this.pitem.pageData.querySuffixParse) ## 關閉彈窗 當需要在表單提交完成等業務邏輯里自動關閉彈窗時使用如下方法 ``` this.$emit('close',?false); ```