From 06ee76d0a83854ad7a044689627e0f00a66e5ce5 Mon Sep 17 00:00:00 2001 From: lijh <lijh> Date: Wed, 19 Jan 2022 18:36:23 +0800 Subject: [PATCH] 表单校验 --- src/components/swichLabel/main1-show.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 92 insertions(+), 13 deletions(-) diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue index f20b673..d9ab8d2 100644 --- a/src/components/swichLabel/main1-show.vue +++ b/src/components/swichLabel/main1-show.vue @@ -12,26 +12,48 @@ :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> <boxRight></boxRight> </a-drawer> + <a-row> + <a-col v-bind="colApiLeft"> + <div class="myModal"> + <a-modal v-model="visible" title="日志添加" on-ok="handleOk"> + <template slot="footer"> + <a-button key="reset" @click="reset" type="danger"> + 擦掉重来 + </a-button> + <a-button key="back" @click="handleCancel"> + 歇会 + </a-button> + <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> + 完事<span style="font-size: 10px;">儿</span>.. + </a-button> + </template> + <box10 ref="modalBox"></box10> + </a-modal> + </div> + </a-col> + </a-row> </div> <div class="blog-main"> - - <a-row> <a-col v-bind="colApiLeft"> <boxLeft></boxLeft> </a-col> <a-col v-bind="colApiMain "> - + <a-button @click="showDrawer1"> 小抽屉1 </a-button> <a-button @click="showDrawer2"> 小抽屉2 </a-button> - <articleListScorll/> - <!-- <router-view class="fade"></router-view> --> + <a-button @click="showModal"> + 日志 + <a-icon type="plus-circle" style="margin-left: 0px;" /> + </a-button> + <tempFriendBox></tempFriendBox> + <router-view class="fade"></router-view> </a-col> - + <a-col v-bind="colApiRight" ref="myDrawer"> <boxRight></boxRight> </a-col> @@ -42,21 +64,56 @@ </template> <script> + import tempFriendBox from "../group/tempFriendBox.vue" + import box10 from "../mini/box10-add.vue" import boxLeft from "../group/boxLeft.vue" import boxRight from "../group/boxRight.vue" - import articleList from "../group/articleList.vue" import articleListScorll from "../group/articleListScorll.vue" export default { components: { + tempFriendBox, + box10, boxLeft, boxRight, - articleList, articleListScorll, - }, methods: { + getCalendarContainer(trigger) { + return this.$refs.myModal; + }, + showModal() { + this.visible = true; + }, + handleOk(e) { + console.log(this.$refs.modalBox.form); + var res = this.$refs.modalBox.$refs.myForm.validate(valid => { + if (valid) { + this.$message.info("校验通过") + } else { + this.$message.info("校验失败") + return false; + } + }); + + + if (!res) return; + + this.$message.info("提交表单") + + this.loading = true; + setTimeout(() => { + this.visible = false; + this.loading = false; + }, 3000); + }, + reset(e) { + var res = this.$refs.modalBox.$refs.myForm.resetFields() + }, + handleCancel(e) { + this.visible = false; + }, afterVisibleChange(val) {}, showDrawer1() { this.visible1 = true; @@ -73,6 +130,8 @@ }, data() { return { + loading: false, + visible: false, visible1: false, visible2: false, colApiLeft: { @@ -144,7 +203,8 @@ background-color: white; border-radius: 15px; } - .holdHeight{ + + .holdHeight { min-height: 780px; } @@ -196,11 +256,14 @@ } + @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1); + /*--------------------- | 核心盒子构成start | ------- ---------------*/ .blog-container { border-radius: 15px; + // background-color: #f5f8fa; background-color: white; line-height: 1.4; @@ -220,9 +283,25 @@ padding-top: 10px; padding-bottom: 20px; overflow: hidden; - -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); - box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); - // box-shadow: 1px 1px 1px 2px #00000059 + // box-shadow: 1px 1px 1px 2px #00000059; + + // -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); + // box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); + + box-shadow: @card-box-shadow; + -webkit-box-shadow: @card-box-shadow; + transition: all .4s; + -webkit-transition: all .6s; + -moz-transition: all .6s; + -o-transition: all .6s; + -ms-transition: all .6s; + } + + //div本体阴影 + .blog-container:hover { + transition: all .25s; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); + box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); } .show-line { -- Gitblit v1.9.1