文章目录

组件介绍

“Card” 组件通常是用于构建用户界面的一种常见 UI 元素，它用于展示信息、内容或功能模块，并通常以卡片状的形式呈现。卡片通常包含标题、文本、图像、按钮和其他交互元素，以便向用户呈现信息并提供操作。下面是一些关于 “Card” 组件的常见特点和用法：

  1. 标题和内容:

    • 卡片通常包含一个标题或主题，用于描述卡片的内容或主题。下方是内容区域，用于展示详细信息、文本、图像等。

  2. 图像:

    • 卡片可以包含一个或多个图像，用于可视化地表示信息。这些图像可以是独立的图片或者是图片链接。

  3. 按钮:

    • 卡片通常包含按钮，用于触发相关操作，例如点击按钮查看更多信息、执行某个操作，或者导航到相关页面。

  4. 交互性:

    • 有些卡片可以具有交互性，允许用户与其进行互动。这可以包括展开或折叠内容、滑动、拖动或其他操作。

  5. 信息展示:

    • 卡片通常用于展示信息，如产品信息、文章摘要、用户资料等。它们通常以简洁而直观的方式呈现信息，使用户能够快速了解内容。

  6. 布局灵活性:

    • 卡片的布局可以根据需要进行自定义。它们可以采用单列、多列、网格布局等不同形式，以适应不同的设计和内容需求。

  7. 响应式设计:

    • 好的卡片组件通常支持响应式设计，以便在不同屏幕尺寸和设备上正常显示。这意味着它们能够适应移动设备、平板电脑和桌面计算机的屏幕尺寸。

  8. 数据呈现:

    • 卡片组件常用于显示数据库记录、社交媒体帖子、新闻文章、产品列表等多种类型的数据。

  9. 自定义样式:

    • 开发人员通常可以自定义卡片组件的样式，以满足特定的设计需求。这包括字体、颜色、边框、阴影等。

  10. 可访问性:

    • 良好的卡片组件应该考虑到可访问性，以确保它们对于使用辅助技术的用户也能够易于理解和操作。

“Card” 组件是现代用户界面设计中的一个重要元素，它们通常用于构建信息展示和交互的部分。不同的前端框架和库（如React、Angular、Vue.js等）通常都提供了卡片组件的实现，或者你也可以自行开发一个以满足特定需求。

开发思路

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

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Card } from 'vue3-dxui'

export default {
  components: {
  	Card
  }
}
</script>

组件代码

<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.title

    if (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>

在这里插入图片描述

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

  1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
  2. dxui新上线的官网域名变更 http://dxui.cn
  3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
  4. 如果你想看完整源码 https://github.com/757363985/dxui

在这里插入图片描述

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue