前端学习之vue+element-ui电商项目（八）商品信息添加

最新推荐文章于 2023-12-01 17:11:30 发布

shakalaca

最新推荐文章于 2023-12-01 17:11:30 发布

阅读量3.1k

点赞数 1

分类专栏：前端学习文章标签： javascript 学习 vue

本文链接：https://blog.csdn.net/cathyleeq/article/details/123737299

版权

本文详细介绍了使用Vue和Element-UI搭建电商项目中商品信息添加的功能实现，包括界面布局、导航区视图、卡片视图区域的步骤条、表单的tab栏框架、基本信息、商品参数、商品属性、商品图片和商品内容的界面样式、数据添加及方法实现，同时涵盖了图片预览和功能展示部分。

摘要由CSDN通过智能技术生成

0. 准备工作

component下新建文件夹goods下新建文件Add.vue，并在路由中引入文件.
1 ) 下载lodash并引入（import _ from ‘lodash’）
2 ）下载富本编辑器并引入

// 导入富本编辑器
  import VueQuillEditor from 'vue-quill-editor'
  import 'quill/dist/quill.core.css' // import styles
  import 'quill/dist/quill.snow.css' // for snow theme
  import 'quill/dist/quill.bubble.css' // for bubble theme
  
Vue.use(VueQuillEditor)

3 ）使用过滤器

// 全局过滤器
Vue.filter('dateFormat', function (originVal) {
   
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0') // 如果不是前两位用0填充
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${
     y}-${
     m}-${
     d}-${
     hh}-${
     mm}-${
     ss}`
})

1.界面样式

1.1 界面布局

在这里插入图片描述

<style>
.el-checkbox{
     
    margin: 0 10px 0 0 !important;
}
.ql-editor {
     
  min-height: 300px;
}
.btnAdd {
     
  margin-top: 15px;
}

</style>

1.2 导航区视图

<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

2.卡片视图区域

2.1 警示条

<el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon
        :closable="false"
        ></el-alert>

2.1.1 步骤条

<el-steps
        :space="200"
        :active="activeIndex - 0"
        finish-status="success"
        align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>