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

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