mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
5fcd416cfb
* feat: add row component * feat: add col * test: update test * refactor: rename to layout * chore: update
48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
import { defineComponent, computed, h, provide } from 'vue'
|
|
export default defineComponent({
|
|
name: 'ElRow',
|
|
props: {
|
|
tag: {
|
|
type: String,
|
|
default: 'div',
|
|
},
|
|
gutter: Number,
|
|
type: String,
|
|
justify: {
|
|
type: String,
|
|
default: 'start',
|
|
},
|
|
align: {
|
|
type: String,
|
|
default: 'top',
|
|
},
|
|
},
|
|
setup(props, { slots }) {
|
|
provide('ElRow', props.gutter)
|
|
|
|
const style = computed(() => {
|
|
const ret = { marginLeft: '', marginRight: '' }
|
|
if (props.gutter) {
|
|
ret.marginLeft = `-${props.gutter / 2}px`
|
|
ret.marginRight = ret.marginLeft
|
|
}
|
|
return ret
|
|
})
|
|
|
|
return () =>
|
|
h(
|
|
props.tag,
|
|
{
|
|
class: [
|
|
'el-row',
|
|
props.justify !== 'start' ? `is-justify-${props.justify}` : '',
|
|
props.align !== 'top' ? `is-align-${props.align}` : '',
|
|
props.type === 'flex' ? 'el-row--flex' : '',
|
|
],
|
|
style: style.value,
|
|
},
|
|
slots.default?.(),
|
|
)
|
|
},
|
|
})
|