2 parents 4628b72f 6a083d25
1 .dialogBox {
2 border-radius: 8px;
3 overflow: hidden;
4 background: #FFFFFF;
5 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
6
7 .dialog_title {
8 display: flex;
9 position: relative;
10 top: -2px;
11
12 b {
13 flex: 1;
14 width: 100%;
15 @flex-center();
16 }
17 }
18
19 .el-dialog__header {
20 height: 50px;
21 background: #FCFDFD;
22 border-radius: 4px 4px 0 0;
23 position: relative;
24 }
25
26 .dialog_full {
27 position: absolute;
28 top: 0;
29 right: 6%;
30 }
31
32 .el-dialog__body {
33 max-height: 88vh;
34 overflow-y: scroll;
35 overflow-x: hidden;
36 }
37
38 .dialog_footer {
39 flex-direction: column;
40
41 .dialog_button {
42 margin-top: 8px;
43 }
44 }
45 }
46
47 .el-dialog__wrapper {
48 overflow: hidden;
49 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)"
3 :fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false"
4 custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="dialogBox">
5 <div slot="title" class="dialog_title" ref="dialogTitle">
6 <b>{{ title }}</b>
7 <div v-if="isFullscreen" class="dialog_full">
8 <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
9 <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
10 </div>
11 </div>
12 <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
13 <slot></slot>
14 </div>
15 <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
16 <div class="dialog_button" v-if="normal">
17 <el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button>
18 <el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button>
19 <el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
20 {{ saveButton }}</el-button>
21
22 </div>
23 <div class="dialog_button" v-else>
24 <el-button @click="closeDiaActivity(true)">确定</el-button>
25 <el-button @click="closeDiaActivity(false)">取消</el-button>
26 </div>
27 </div>
28 </el-dialog>
29 </template>
30 <script>
31 export default {
32 props: {
33 activity: {
34 type: Boolean,
35 default: false,
36 },
37 normal: {
38 type: Boolean,
39 default: true,
40 },
41 showEnter: {
42 type: Boolean,
43 default: true,
44 },
45 isButton: {
46 type: Boolean,
47 default: true,
48 },
49 multiple: {
50 type: Boolean,
51 default: false,
52 },
53 width: {
54 type: String,
55 default: '70%',
56 },
57 title: {
58 type: String,
59 default: '',
60 },
61 customClass: {
62 type: String,
63 default: '',
64 },
65 topHeight: {
66 type: String,
67 default: '0',
68 },
69 isFullscreen: {
70 type: Boolean,
71 default: true,
72 },
73 isSave: {
74 type: Boolean,
75 default: true,
76 },
77 saveButton: {
78 type: String,
79 default: '提交',
80 },
81 isReset: {
82 type: Boolean,
83 default: true,
84 },
85 saveloding: {
86 type: Boolean,
87 default: false,
88 },
89 },
90 data () {
91 return {
92 key: 0,
93 dialogVisible: false,
94 fullscreen: false,
95 scrollerHeight: '',
96 }
97 },
98 methods: {
99 isShow () {
100 this.dialogVisible = true
101 },
102 isHide () {
103 this.dialogVisible = false
104 this.key++
105 },
106 handleFullscreen () {
107 this.fullscreen = !this.fullscreen
108 let height = document.getElementById('dialogBox').clientHeight
109 if (!this.fullscreen) {
110 this.scrollerHeight = false
111 } else {
112 this.scrollerHeight = (window.innerHeight - 180) + 'px'
113 }
114 },
115 submitForm (ruleForm) {
116 if (!this.multiple) {
117 this.$parent.submitForm(ruleForm)
118 } else {
119 this.$emit('submitForm', ruleForm);
120 }
121 },
122 closeDialog (ruleForm, flag) {
123 console.log(456789, this.multiple)
124 this.key++
125 if (!this.multiple) {
126 if (this.$parent.closeDialog) {
127 // console.log(1)
128 this.$parent.closeDialog(ruleForm)
129 } else {
130 // console.log(2)
131 this.dialogVisible = false;
132 }
133 } else {
134 this.$emit('closeDialog', ruleForm, flag);
135 }
136 },
137 closeDiaActivity (flag) {
138 this.$emit('closeDialog', flag);
139 }
140 },
141 }
142 </script>
143 <style rel="stylesheet/scss" lang="scss" >
144 @import "./dialogBox.scss";
145 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import dialogBox from './dialogBox.vue'
2 export default {
3 install: (Vue) => {
4 Vue.component('dialogBox', dialogBox);
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 ## 这个是弹框组件,对于element自带的组件进行封装,方便修改全局样式做统一操作
2 ### 使用时在组件中引用
3
4 ```
5 import dialogBox from '@/components/dialogBox/index'
6
7 <dialogBox ref="dialog" title="标题">
8 **在这里面写弹框内容**
9 </dialogBox>
10 *在父组件中使用 的按钮提交方法*
11 submitForm(ruleForm) {
12
13 }
14 ```
15 ##### 如果有多个弹框
16
17 ```
18 import dialogBox from '@/components/dialogBox/index'
19
20 <dialogBox ref="dialog" @submitForm="自定义方法" title="标题" :multiple="true">
21 **在这里面写弹框内容**
22 </dialogBox>
23 *在父组件中使用 的按钮提交方法*
24 自定义方法(ruleForm) {
25
26 }
27 ```
28
29 ## 打开该dialog:
30 this.$refs.dialog.isShow();
31 ## 隐藏该dialog:
32 this.$refs.dialog.isHide();
...\ No newline at end of file ...\ No newline at end of file
...@@ -6,7 +6,8 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets ...@@ -6,7 +6,8 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
6 import Element from 'element-ui' 6 import Element from 'element-ui'
7 import './styles/element-variables.scss' 7 import './styles/element-variables.scss'
8 import '@/styles/index.scss' // global css 8 import '@/styles/index.scss' // global css
9 import lbTable from './components/lb-table/index'; 9 import lbTable from './components/lb-table/index'
10 import dialogBox from './components/dialogBox/index'
10 11
11 import './image/icons' // icon 12 import './image/icons' // icon
12 import store from './store' 13 import store from './store'
...@@ -15,7 +16,8 @@ import _ from 'lodash' ...@@ -15,7 +16,8 @@ import _ from 'lodash'
15 16
16 import * as filters from './filters' // global filters 17 import * as filters from './filters' // global filters
17 Vue.use(Element, { size: 'small' }) 18 Vue.use(Element, { size: 'small' })
18 Vue.use(lbTable); 19 Vue.use(lbTable)
20 Vue.use(dialogBox)
19 Object.keys(filters).forEach(key => { 21 Object.keys(filters).forEach(key => {
20 Vue.filter(key, filters[key]) 22 Vue.filter(key, filters[key])
21 }) 23 })
......
...@@ -99,6 +99,7 @@ ...@@ -99,6 +99,7 @@
99 @include flex; 99 @include flex;
100 flex-wrap: wrap; 100 flex-wrap: wrap;
101 margin-left: -20px; 101 margin-left: -20px;
102 justify-content: space-between;
102 103
103 li { 104 li {
104 width: 31%; 105 width: 31%;
......
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
23 <div class="right-situation el-card box-card is-always-shadow"> 23 <div class="right-situation el-card box-card is-always-shadow">
24 <div class="right-title">业务列表</div> 24 <div class="right-title">业务列表</div>
25 <ul> 25 <ul>
26 <li @click="handleCollection(item)" v-for="(item, index) in busList" :key="index"> 26 <li v-for="(item, index) in busList" :key="index">
27 <p> 27 <p>
28 {{ item.name }} 28 {{ item.name }}
29 </p> 29 </p>
30 <p :class="item.select ? 'cactive' : ''"> 30 <p :class="item.select ? 'cactive' : ''" @click="handleCollection(item)">
31 <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i> 31 <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
32 </p> 32 </p>
33 </li> 33 </li>
......