基于uniapp封装的card容器 带左右侧两侧标题内容区域

本文主要是介绍基于uniapp封装的card容器 带左右侧两侧标题内容区域，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码

<template><view class="card"><div class="x_flex_header"><div><title v-if="title !== ''" class="title" :title="title" :num="num"></title></div><div><slot name="xline_left"></slot></div></div><div class="card-body"><slot></slot></div></view>
</template><script>
export default {name: "xCard",props: {title: {type: String,default: ''},num: {type: Number,default: 1}},
}
</script><style lang="scss" scoped>
.card{border-radius: 8px;margin: 16px;box-shadow: none;overflow: hidden;font-size: 28rpx;box-sizing: border-box;padding: 20rpx;display: block;background: #fff;
}
.card-body{
}.title {display: block;
}
.x_flex_header{display: flex;justify-content: space-between;
}
</style>

全部资源：https://download.csdn.net/download/galaxyJING/88720610?spm=1001.2014.3001.5503

这篇关于基于uniapp封装的card容器 带左右侧两侧标题内容区域的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---