打印小票的样式，vue3代码

打印小票样式的创建通常涉及到前端模板和CSS设计，特别是在Vue.js中，可以结合Element UI或者自定义样式来构建。以下是一个简单的例子，展示如何使用Vue3配合element-plus库来打印小票样式：

<template>
  <div class="print-ticket">
    <el-form :model="ticketData" label-width="80px">
      <el-row :gutter="20">
        <!-- 小票头部信息 -->
        <el-col :span="4">{{ ticketData.title }}</el-col>
        <el-col :span="8">{{ ticketData.date }}</el-col>
        <el-col :span="6">{{ ticketData.number }}</el-col>
      </el-row>
      
      <!-- 商品列表 -->
      <el-row v-for="(item, index) in ticketData.items" :key="index" :gutter="20">
        <el-col :span="4">{{ item.productName }}</el-col>
        <el-col :span="3">{{ item.quantity }}</el-col>
        <el-col :span="5">{{ item.price }}</el-col>
        <el-col :span="4">{{ item.total }}</el-col>
      </el-row>

      <!-- 尾部总计和总额 -->
      <el-row :gutter="20">
        <el-col :span="12">总计:</el-col>
        <el-col :span="1">{{ ticketData.totalPrice }}</el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
export default {
  data() {
    return {
      ticketData: {
        title: '发票标题',
        date: '2023-01-01',
        number: '123456',
        items: [
          // 样例商品项
          { productName: '产品A', quantity: 1, price: 100, total: 100 },
          // 更多...
        ],
        totalPrice: 0,
      },
    };
  },
  computed: {
    totalPrice() {
      this.ticketData.items.forEach(item => (this.ticketData.totalPrice += item.total));
    },
  },
};
</script>

<style scoped>
.print-ticket {
  /* 自定义打印样式 */
  width: auto;
  margin-top: 20px;
  border: 1px solid #ccc;
}
</style>

在这个例子中，我们首先定义了一个`ticketData`对象，包含了小票的头部信息、商品列表和总计。然后使用Element Plus的表格组件展示数据，并设置了自定义的样式。在`totalPrice`计算属性中，累加了每个商品的总价。

要实际打印小票，你需要一个后台服务接口或者本地的打印功能集成。这超出了纯前端代码的范围，通常会涉及后端支持或者浏览器的WebPrint API等技术。