From 36b71142347dc524e18fa24c5ffdffff0d02287a Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期二, 02 二月 2021 18:56:28 +0800
Subject: [PATCH] 优化列表、回到顶部组件、优化样式
---
src/pages/demo/form.vue | 33 ++++++++++++++++++++++-----------
1 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/src/pages/demo/form.vue b/src/pages/demo/form.vue
index 3475cab..a3cf94b 100644
--- a/src/pages/demo/form.vue
+++ b/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() {
--
Gitblit v1.8.0