如何在iview元件中使用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="中文" class="visual-name-input" value={this.editRow.cnName} onOn-blur={this.activeCellChange("cnName")} /> <i-input placeholder="英文" class="visual-name-input" value={this.editRow.name} onOn-blur={this.activeCellChange("name")} /> </span> ) : ( <span class="overflow" title={`${row.cnName}(${row.name})`} >{`${row.cnName}(${row.name})`}</span> )} </div> ); } }