fix: support staticClass and dynamic class #371

This commit is contained in:
tangjinzhou 2019-01-06 21:14:14 +08:00
parent ba4992b412
commit b87d722143
3 changed files with 28 additions and 26 deletions

View File

@ -180,14 +180,16 @@ export function getClass (ele) {
} else if (ele.$vnode && ele.$vnode.data) {
data = ele.$vnode.data
}
const tempCls = data.class || data.staticClass
const tempCls = data.class || {}
const staticClass = data.staticClass
let cls = {}
staticClass && staticClass.split(' ').forEach(c => { cls[c.trim()] = true })
if (typeof tempCls === 'string') {
tempCls.split(' ').forEach(c => { cls[c.trim()] = true })
} else if (Array.isArray(tempCls)) {
classNames(tempCls).split(' ').forEach(c => { cls[c.trim()] = true })
} else {
cls = tempCls
cls = { ...cls, ...tempCls }
}
return cls
}

View File

@ -1,16 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table renders JSX correctly 1`] = `
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><div>Name</div></th><th key="age" rowspan="2" class=""><div>Age</div></th></tr><tr><th key="firstName" class=""><div>First Name</div></th><th key="lastName" class=""><div>Last Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><div>Name</div></th><th key="age" rowspan="2" class=""><div>Age</div></th></tr><tr><th key="firstName" class=""><div>First Name</div></th><th key="lastName" class=""><div>Last Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->John</td>
<td>Brown</td>
<td>32</td>
<td class="">Brown</td>
<td class="">32</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jim</td>
<td>Green</td>
<td>42</td>
<td class="">Green</td>
<td class="">42</td>
</tr>
</tbody>
</table>

View File

@ -2896,31 +2896,31 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->John</td>
<td>Brown</td>
<td>32</td>
<td>New York No. 1 Lake Park</td>
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
<td><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
<td class="">Brown</td>
<td class="">32</td>
<td class="">New York No. 1 Lake Park</td>
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
<td class=""><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jim</td>
<td>Green</td>
<td>42</td>
<td>London No. 1 Lake Park</td>
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
<td><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
<td class="">Green</td>
<td class="">42</td>
<td class="">London No. 1 Lake Park</td>
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
<td class=""><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Joe</td>
<td>Black</td>
<td>32</td>
<td>Sidney No. 1 Lake Park</td>
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
<td><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
<td class="">Black</td>
<td class="">32</td>
<td class="">Sidney No. 1 Lake Park</td>
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
<td class=""><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
</tr>
</tbody>
</table>