## 介绍 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); ```