1、f-render 不能做什么?

第一、f-render 并不是页面渲染器,仅专注于于表单,并不能适合渲染所有的东西。其实我正在做页面级别的可视化组件 z-render ,不过还未完工,大家可以先点击 DEMO 体验一波(仅一行html,渲染整个页面)。


第二、f-render 不能实现子表单或者嵌套组件。由于 f-render 是基于 vue-ele-form,而 vue-ele-form 由于架构原因,不原生支持嵌套(不过可以通过自定义组件实现),所以 f-render 同样不支持嵌套,同样可以期待一下 z-render


2、怎么实现 options URL 配置?


参考 options URL 文档:https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav#ZVYtf,我们可以通过一下步骤实现:


第一步:注册axios,并直接拦截器

目的是返回以上四种结果,如果没有拦截器,请求信息包括请求信息、响应信息、请求头等不必要数据


import axios from 'axios'

axios.interceptors.response.use(response => {
  // 将响应结果返回
  return response.data
})
Vue.prototype.$axios = axios


第二步:绑定options请求函数


// f-render 使用
<f-render
  :config="formConfig"
  :options-fn="$axios.get"
/>

// 或者
<ele-form
  v-model="formData"
    v-bind="formConfig"
  :options-fn="$axios.get"
></ele-form>


第三步:配置

⚠️ 注意:options URL必须要带引号(表示字符串),失去焦点后会转义,不用在意

image.png


3、如何兼容 IE 11?


如果在 ie 11 下出现语法错误,我们按照以下步骤进行兼容:


1、修改 .browserslistrc ,增加 ​not ie <= 8 

image.png


2、修改 vue.config.js,增加transpileDependencies


因为 babel 默认是不编译 node_modules 下的包的,但是有些包是采用源码分发的模式,导致 IE 11 不兼容,我们只需要在 ​transpileDependencies ​增加不兼容的包名称(或者路径)即可,例如:

image.png


当然添加上面的包名,我们首先要知道哪些包除了问题,但是默认 webpack 采用 eval 的 sourcemap 方式,不利于观察,我们需要更改 ​devtool: "source-map" ,这样利于观察:

image.png

然后将报语法错误的包的名或者路径添加上去即可。


搞定之后要把 devtool 这行删掉,会影响编译速度。