增加单行描述排版组件

Tevin

2021-11-22 7fc97bc9db4394cac61d9d136d29e88359eff981

增加单行描述排版组件

 layout/description/CDescription.scss

New file
@@ -0,0 +1,33 @@
/**
 * drawer
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-description {
    @include flexbox(flex, flext-start flex-start, nowrap);
    padding: 20px 0 20px 20px;
    &.c-description-bordered {
        border-bottom: #e2e2e2 1PX solid;
    }
    .c-description-label {
        width: 180px;
        margin-right: 20px;
        line-height: 1.5;
        vertical-align: middle;
        &.c-description-label-left {
            text-align: left;
        }
        &.c-description-label-right {
            text-align: right;
        }
    }
    .c-desctiption-content {
        flex: 1;
        display: inline-block;
        padding-right: 18px;
        line-height: 1.5;
        vertical-align: middle;
    }
}

 layout/description/CDescription.vue

New file
@@ -0,0 +1,45 @@
/**
 * CDescription - 描述
 * @author Tevin
 */

<template>
    <view
        class="c-description"
        :class="hasBorder?'c-description-bordered':''"
    >
        <view
            class="c-description-label"
            :class="'c-description-label-' + labelAlign"
        >{{label}}</view>
        <view class="c-desctiption-content">
            <slot />
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import {} from 'taro-ui-vue';
import './CDescription.scss';

export default {
    name: 'CDescription',
    components: {},
    props: {
        label: String,
        labelAlign: {
            type: String,
            default: 'left', // left、right
        },
        hasBorder: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {};
    },
    methods: {},
};
</script>

 layout/description/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CDescription
 * @author Tevin
 */

import CDescription from '@components/layout/description/CDescription.vue';

export {
    CDescription,
}