Vue自定义商品发布组件

一、代码展示

<template>
  <div>
    <a-popover trigger="hover" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
      <template #content>
        <div style="display: flex; justify-content: space-between;">
          <router-link to="/write">
            <a-card
                class="select"
                :hoverable="true"
                style="width: 100px; height: 100px; margin-right: 10px;justify-content: center;display: flex"
            >
              <div style="display: flex;justify-content: center;flex-direction: column">
                <svg-icon icon-name="icon-icon_wenzhang" size="40px" ></svg-icon>
                <span style="margin-top: 2px">写文章</span>
              </div>
            </a-card>
          </router-link>

          <a-card
              class="select"
              :hoverable="true"
              style="width: 100px; height: 100px; margin-left: 10px;justify-content: center;display: flex"
              @click="openProductDialog"
          >
            <div style="display: flex;justify-content: center;flex-direction: column">
              <svg-icon icon-name="icon-shangpinfabu" size="40px" ></svg-icon>
              <span style="margin-top: 2px">卖商品</span>
            </div>
          </a-card>



          <a-modal :visible="visible"  title="发布商品" @ok="submitForm" @cancel="handleCancel">
            <a-form  >
              <!-- 商品名称 -->
              <a-form-item label="商品名称">
                <a-input v-model:value="formData.name" />
              </a-form-item>

              <!-- 商品详细描述 -->
              <a-form-item label="商品描述">
                <a-textarea v-model:value="formData.detail" :auto-size="{ minRows: 3, maxRows: 6 }" />
              </a-form-item>

              <!-- 商品价格 -->
              <a-form-item label="商品价格">
                <a-input-number v-model:value="formData.price" :min="0" :precision="2" />
              </a-form-item>

              <!-- 商品库存 -->
              <a-form-item label="商品库存">
                <a-input-number v-model:value="formData.stock" :min="0" />
              </a-form-item>

              <!-- 商品类型选择 -->
              <a-form-item label="商品类型">
                <a-select  v-model:value="formData.cateId">
                  <a-select-option v-for="option in productTypeOptions" :key="option.id" :value="option.id">
                    {{ option.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <!-- 快递或自提 -->
              <a-form-item label="配送方式">
                <a-select v-model:value="formData.remark" >
                  <a-select-option value="快递">快递</a-select-option>
                  <a-select-option value="自提">自提</a-select-option>
                </a-select>
              </a-form-item>

              <!-- 上传图片 -->
              <a-form-item label="上传图片">
                <a-upload
                    :showUploadList="{ showPreviewIcon: true, showRemoveIcon: true }"
                    :list-type="'picture-card'"
                    :beforeUpload="beforeUpload"
                    :customRequest="customRequest"
                    @preview="handlePreview"
                    @remove="handleRemove"
                >
                  <div v-if="uploadedImageCount < 2">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传图片</div>
                  </div>
                </a-upload>
              </a-form-item>

              <a-form-item>
                <a-modal :visible="previewVisible" :title="previewTitle" @cancel="handlePreviewCancel" :footer="null">
                  <img :src="previewImage" alt="Uploaded Image" style="width: 100%" />
                </a-modal>
              </a-form-item>

            </a-form>
          </a-modal>


















        </div>
      </template>
      <a-button type="primary" shape="round" size="large" style="margin-top: 15px;background-color: #3fdbf0">
        <template #icon>
          <PlusCircleOutlined/>
        </template>
        发布
      </a-button>
    </a-popover>
  </div>
</template>

<script setup>
略
</script>

<style scoped lang="less">
.select:hover {
  background-color: #f5f5f5;
}
</style>

二、代码解读

1. <template> 标签：Vue.js 组件的模板部分开始。

2. <div> 标签：一个包裹整个组件内容的 <div> 元素。

3. <a-popover> 标签：Ant Design Vue 库提供的弹出框组件，用于显示一个气泡框。

   • trigger="hover"：设置触发弹出框的方式为鼠标悬停。
   • :getPopupContainer：动态地指定弹出框的挂载容器，使其可以随父元素的位置改变而改变。
   • :getPopupContainer 属性的值是一个函数，它接受一个参数 triggerNode，返回弹出框的挂载容器，这里返回的是触发节点的父节点或者文档的 body 元素。

4. <template #content>：模板的一个命名插槽，用于定义弹出框的内容。

5. <div> 标签：弹出框内容的容器。

6. <router-link to="/write">：Vue Router 提供的路由链接组件，点击后跳转到 /write 路径。

7. <a-card> 标签：Ant Design Vue 提供的卡片组件，用于包裹每个选项。

   • class="select"：自定义类名，用于设置选项卡的样式。
   • :hoverable="true"：设置鼠标悬停时显示阴影效果。
   • style：行内样式设置卡片的宽度、高度和外边距等样式。

8. <svg-icon> 标签：自定义的 SVG 图标组件，用于显示一个 SVG 图标。

   • icon-name="icon-icon_wenzhang"：指定 SVG 图标的名称。
   • size="40px"：设置 SVG 图标的大小。

9. <span> 标签：用于显示文字内容。

10. <a-card> 标签：另一个卡片组件，代表卖商品选项。

    • class="select"：同样是自定义类名，用于设置样式。
    • :hoverable="true"：设置鼠标悬停时显示阴影效果。
    • @click="openProductDialog"：点击时触发 openProductDialog 方法。

11. <a-modal> 标签：Ant Design Vue 提供的模态框组件，用于显示发布商品的表单。

    • :visible="visible"：控制模态框的显示与隐藏。
    • title="发布商品"：设置模态框的标题。
    • @ok="submitForm"：点击确定按钮时触发 submitForm 方法。
    • @cancel="handleCancel"：点击取消按钮时触发 handleCancel 方法。

12. <a-form> 标签：Ant Design Vue 提供的表单组件，用于包裹表单项。

13. <a-form-item> 标签：表单项组件，用于包裹每个表单项，并设置标签和表单控件的布局。

    • label="商品名称"：设置表单项的标签文字。

14. <a-input>、<a-textarea>、<a-input-number>、<a-select>、<a-upload> 等标签：Ant Design Vue 提供的不同类型的表单控件，用于用户填写商品信息。

15. <a-modal> 标签：另一个模态框组件，用于显示上传的图片的预览。

    • :visible="previewVisible"：控制预览模态框的显示与隐藏。
    • :title="previewTitle"：设置预览模态框的标题。

16. <img> 标签：用于显示上传的图片的预览。

    • :src="previewImage"：指定预览图片的路径。

17. </template> 标签：模板部分结束。

三、结果展示