You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

30 lines
777 B
Vue

<template>
<view class="ch-flex" :class="flexClassList">
<slot></slot>
</view>
</template>
<script setup>
import { computed, defineProps } from 'vue'
const props = defineProps([
'direction',
'wrap',
'justify',
'items',
'align'
])
const flexClassList = computed(() => {
const direction = props.direction ? `ch-flex--${props.direction}` : '';
const wrap = props.wrap ? `ch-flex--${props.wrap}` : '';
const justify = props.justify ? `ch-flex--justify-${props.justify}` : '';
const items = props.items ? `ch-flex--items-${props.items}` : '';
const align = props.align ? `ch-flex--algin-${props.align}` : '';
return Array.from(new Set([direction, wrap, justify, items, align])).join(' ');
})
</script>
<style lang="scss" scoped>
@import './ch-flex.scss';
</style>