如何在iview组件中使用jsx

时间: 2019-03-09阅读: 178标签: jsx
最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模  板式的写法比较方便且可读性较强。而render函数除了支持配置写法外,还支持jsx的写法。由于之前有用过react,因此对jsx并不陌生,可以直接上手。


1、安装插件

安装插件:transform-vue-jsx
如果需要使用v-model还需要安装jsx-v-model
在babelrc中配置

"plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"}],
    "transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }


2、使用及注意事项

下面粘贴的代码是Table组件的columns的配置项,这里需要注意的有2点:
1、需要全局注册组件,如输入框组件不可以写成Input必须写成i-input;
2、事件绑定:如点击事件需要携程onOn-click

{
    title: "关系名",
    key: "name",
    width: 180,
    render: (h, params) => {
      let { index, row } = params;
      return (
        <div>
          {this.editShow && this.editIndex === index ? (
            <span>
              <i-input
                placeholder="中文"
               
                value={this.editRow.cnName}
                onOn-blur={this.activeCellChange("cnName")}
              />
              <i-input
                placeholder="英文"
               
                value={this.editRow.name}
                onOn-blur={this.activeCellChange("name")}
              />
            </span>
          ) : (
            <span
             
              title={`${row.cnName}(${row.name})`}
            >{`${row.cnName}(${row.name})`}</span>
          )}
        </div>
      );
    }
  }


fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全