vue3.0 组件篇 Card

card组件在我们日常开发中经常使用，如果能够有一个较好的封装，将会省去很多的重复代码，提高开发效率。

card 组件需要实现哪些功能呢
必须分为标题和内容两部分，并且都支持自定义
要与cardGroup相结合能够实现水平排列和垂直排列，或者瀑布流排列
能够自定义背景色
提供一种或多种hover特效
card提供点击事件用以交互

<template><div@click="cardClick"class="dx-card-warpper":class="hover":style="background ? { background } : {}"><div class="dx-card-title" v-if="showTitle"><slot name="title" /></div><div class="dx-card-title dx-card-title-default" v-else-if="title"><span class="dx-card-title-default-text">{{ title }}</span></div><div class="dx-card-content"><slot /></div></div>
</template><script lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref, PropType } from 'vue'export default {props: {title: {required: false,default: '',type: String},hover: {required: false,default: '',type: String as PropType<'boxShadow' | 'floatUp' | 'enlarge'>},background: {required: false,default: '',type: String}},setup() {const currentInstance: ComponentInternalInstance | null = getCurrentInstance()const cardClick = function (e: Event) {currentInstance?.emit('click', e)}// 自定义card头部const showTitle = ref(false)const title = currentInstance?.slots.titleif (title) {showTitle.value = true}return {cardClick,showTitle}}
}
</script><style lang="scss" scoped>
@import '@/scss/layout.scss';.dx-card-warpper {border-radius: 4px;border: $border;cursor: pointer;width: 100%;.dx-card-title {border-bottom: $border;padding: 24px;}.dx-card-title-default {font-size: 16px;font-weight: 600;display: flex;}.dx-card-content {padding: 24px;}
}.dx-card-warpper.boxShadow:hover {box-shadow: 4px 4px 10px rgb(0 0 0 / 29%);
}.dx-card-warpper.floatUp:hover {transform: translateY(-10%);
}.dx-card-warpper.enlarge:hover {transform: scale(1.1);
}
</style>

cardgroup组件

<template><div class="dx-card-group-warpper" :class="ClassName" ref="cardGroup"><slot /></div>
</template><script lang="ts">
import { ref, onMounted } from 'vue'
import { Data } from '../dialog/types'export default {props: {// columnNumber表示每行有多少列columnNumber: {required: false,default: 1,type: Number}},setup(propsData: Data) {// 自定义card头部const cardGroup: any = ref(null)const ClassName = `count-number-${propsData.columnNumber}`const flowClassName = onMounted(() => {// ref只能在onMounted里面才能获取const hasNotCardComponents = [...cardGroup.value.children].some((item: any) => {return item.className !== 'dx-card-warpper'})if (hasNotCardComponents) {// 算是给开发者的题型，在CardGroup里只能使用card组件console.log(Error('Only Card components can be used in CardGroup'))}})return {cardGroup,ClassName}}
}
</script><style lang="scss" scoped>
@import '@/scss/layout.scss';
.dx-card-group-warpper {width: 100%;display: flex;flex-wrap: wrap;align-items: stretch;::v-deep .dx-card-warpper {margin-bottom: 12px;}
}@for $i from 2 through 99 {.count-number-#{$i} {// gap: calc(4% / #{$i - 1});::v-deep .dx-card-warpper {width: calc(96% / #{$i});margin-right: calc(4% / #{$i - 1});}::v-deep .dx-card-warpper:nth-child(#{$i}n + #{$i}) {margin-right: 0 !important;}}
}
</style>

与cardgroup组件一起使用

 <CardGroup :columnNumber="3"><Card>Hover</Card><Card>Hover</Card><Card :title="3">Hover</Card><Card :title="3">Hover</Card></CardGroup>

提供了线上的体验网站，欢迎大家前来，并提出你的建议
http://www.dxyx-together.cn/#/home/card

vue3.0 组件篇 Card相关推荐

vue3.0 组件篇 Tooltip
tooltip组件构建定位问题,很重要,top topLeft topRight bottom bottomLeft bottomRight left right,tooltip可以出现在不同的位置 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
single-spa 集成 vue3.0 生产篇
上一篇实现的是开发模式下的微服务集成vue3.0, 接下来讲讲如何实现生产的集成, 废话不多说, 直接上代码子服务 vite.js 做如下改造 build: {manifest: true,out ...
vue3.0组件之父传子，子传父,父传孙
父组件<template> <!-- <div>{{name}}</div> {{computedsx}} {{sum}}<button @click= ...
VUE3.0组件兄弟之间传值
用vue3基础语法操作引入vue <script src="https://unpkg.com/vue@next"></script> 页面渲染代码 & ...
VUE3.0——组件传值
子组件关键代码: 子组件: <template><view class="header"><view class="header-top&q ...
vue3.0父子组件的通信
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1.父到子通过props 父组件 <template><div & ...
前端Vue3.0搭建后台管理系统
视频第1节 - 了解项目开发流程第1学时了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师.mp4 第2节 - 构建vue项目.代码仓 ...
vue3.0实现地图功能
目前官方没有vue3.0组件,是JavaScript API v3以script标签引入 vue3.0实现地图功能 1.创建秘钥ak 引入script 1.打开index.html 2.插入scrip ...

vue3.0 组件篇 Card

vue3.0 组件篇 Card相关推荐

最新文章

热门文章