优化列表、回到顶部组件、优化样式

long

2021-02-02 36b71142347dc524e18fa24c5ffdffff0d02287a

 src/pages/demo/form.vue

@@ -1,12 +1,15 @@
<template>
  <div class="app-container">
    <el-page-header class="mb20" @back="jumpBack" />
    <el-form ref="couponForm" label-position="left" :model="mData" label-width="150px" :rules="rules">
    <el-form ref="couponForm" :model="mData" label-width="150px" :rules="rules" size="small">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" />
        <el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" maxlength="50" />
      </el-form-item>
      <el-form-item label="面值：" prop="valueMoney">
        <el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" />
        <el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
      </el-form-item>
      <el-form-item label="面值：" prop="valueMoney">
        <el-input v-model.number="mData.valueMoney" placeholder="请输入面值" class="com-edit-input" maxlength="50" />
      </el-form-item>
      <el-form-item label="省市区" prop="provinces">
        <el-cascader
@@ -30,7 +33,7 @@
      </el-form-item>
      <el-form-item prop="uploadImgs">
        <span slot="label">
          图片：<br><span>(668*164像素)</span>
          图片：<br><span>(xxx*xxx像素)</span>
        </span>
        <!-- 上传图片组件(单图) -->
        <UploadSingleImg
@@ -58,6 +61,8 @@
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>

    <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />

  </div>
</template>

@@ -66,9 +71,10 @@
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
import UploadSingleImg from '@/components_simple/UploadSingleImg'
import Area from '@/utils/area' // 地区选择
import BackToTop from '@/components/BackToTop'
export default {
  name: 'DemoForm',
  components: { WangEnduit, UploadSingleImg },
  components: { WangEnduit, UploadSingleImg, BackToTop },
  mixins: [
    mixin_upload
  ],
@@ -90,6 +96,17 @@

      // 初始化地区
      areaOpts: Area.getAreaOpts(Area.data), // 省市区数据

      // 回到顶部
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中
        background: '#e7eaf1'// 按钮的背景颜色
      },

      // 表单校验
      rules: {
@@ -114,12 +131,6 @@
          required: true, message: '请选择图片'
        }]
      }
    }
  },
  computed: {
    // 禁用上传图片功能
    uploadDisabled() {
      return this.mData.uploadImgs.length > 0
    }
  },
  mounted() {