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
30 lines
777 B
Vue
6 months ago
|
<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>
|