common-ticket-component v1.2.0

TicketComponent 使用示例

安装

首先,确保您已经安装了这个包:

pnpm install global-ticket-component

使用方法

以下是一个基本的使用示例:

<script setup lang="ts">
import { TicketComponent } from 'global-ticket-component'
import { ref } from 'vue'
const ticketComponentRef = ref(null)
const localMessage = ref('')
function handleSubmit(message: string) {
  console.log('提交的消息:', message)
  localMessage.value = ''
}
</script>

<template>
  <div>
    <TicketComponent
      ref="ticketComponentRef"
      icon-class="custom-icon"
      @submit="handleSubmit"
    >
      <template #icon>
        <Button>
          提交工单
        </Button>
      </template>
      <template #content="{ submitTicket }">
        <div class="grid gap-4">
          <div class="grid gap-2">
            <div class="grid grid-cols-4 items-center gap-4">
              <Label for="message" class="col-span-4">发送消息</Label>
              <Input
                id="message"
                v-model="localMessage"
                placeholder="请详细描述您的问题"
                class="col-span-4"
              />
            </div>
          </div>
          <Button type='primary' @click="submitTicket(localMessage)">
            提交自定义工单
          </Button>
        </div>
      </template>
    </TicketComponent>
  </div>
</template>