uni-app vuematerial卡片组件

在uni-app中使用Vue Material风格的卡片组件，虽然uni-app本身没有直接提供Vue Material的组件库，但你可以结合Vue Material的设计规范和uni-app的组件能力，自定义一个卡片组件。以下是一个简单的卡片组件示例，它遵循Vue Material的设计风格。

首先，确保你的uni-app项目已经安装并配置好。然后，你可以创建一个自定义的卡片组件。

1. 创建卡片组件

在components目录下创建一个名为Card.vue的文件：

<template>
  <view class="card">
    <view class="card__header">
      <slot name="header"></slot>
    </view>
    <view class="card__content">
      <slot></slot>
    </view>
    <view class="card__actions">
      <slot name="actions"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style scoped>
.card {
  margin: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #fff;
}
.card__header {
  padding: 16px;
  background-color: #42b983;
  color: #fff;
  text-align: center;
}
.card__content {
  padding: 16px;
}
.card__actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #f5f5f5;
}
</style>

1. 使用卡片组件

在你的页面文件中（例如pages/index/index.vue），引入并使用这个卡片组件：

<template>
  <view>
    <Card>
      <template #header>
        <text>Card Title</text>
      </template>
      <text>This is the card content.</text>
      <template #actions>
        <button @click="action1">Action 1</button>
        <button @click="action2">Action 2</button>
      </template>
    </Card>
  </view>
</template>

<script>
import Card from '@/components/Card.vue';

export default {
  components: {
    Card
  },
  methods: {
    action1() {
      console.log('Action 1 clicked');
    },
    action2() {
      console.log('Action 2 clicked');
    }
  }
}
</script>

这个示例展示了一个基本的卡片组件，包括标题、内容和操作区域。你可以根据需要进一步扩展和美化这个组件，比如添加更多的样式、动画效果或功能。在实际项目中，你可能还会考虑响应式设计，确保卡片在不同设备上都能良好显示。