用vue3和element-plus写一个优惠劵组件

好的，下面给出一个简单的优惠券组件示例，使用 Vue 3 和 Element Plus。

首先需要安装 Element Plus：

npm i element-plus

然后在项目中引入：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');

接下来就可以创建一个 Coupon 组件：

<template>
  <el-card class="coupon-card">
    <div class="coupon-header">
      <span class="coupon-title">{{ title }}</span>
      <span class="coupon-amount">{{ amount }}</span>
    </div>
    <div class="coupon-content">
      <div class="coupon-code">{{ code }}</div>
      <div class="coupon-validity">{{ validity }}</div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Coupon',
  props: {
    title: {
      type: String,
      required: true
    },
    amount: {
      type: String,
      required: true
    },
    code: {
      type: String,
      required: true
    },
    validity: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.coupon-card {
  width: 300px;
  padding: 20px;
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.coupon-title {
  font-size: 20px;
  font-weight: bold;
}

.coupon-amount {
  font-size: 24px;
  font-weight: bold;
}

.coupon-code {
  margin-bottom: 10px;
  font-size: 18px;
}

.coupon-validity {
  font-size: 14px;
}
</style>

在父组件中使用：

<template>
  <div class="coupons">
    <Coupon title="优惠券1" amount="50元" code="ABC123" validity="2021-12-31" />
    <Coupon title="优惠券2" amount="30元" code="DEF456" validity="2021-12-31" />
  </div>
</template>

<script>
import Coupon from './components/Coupon.vue';

export default {
  name: 'Coupons',
  components: {
    Coupon
  }
}
</script>

<style>
.coupons {
  display: flex;
  justify-content: space-around;
}
</style>

这样就可以在页面上展示优惠券组件了。当然，这只是一个简单的示例，你可以根据实际需求对组件进行更多的定制和扩展。