Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
7 changed files
with
239 additions
and
4 deletions
src/components/dialogBox/dialogBox.scss
0 → 100644
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 |
src/components/dialogBox/dialogBox.vue
0 → 100644
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 |
src/components/dialogBox/index.js
0 → 100644
src/components/dialogBox/redeme.md
0 → 100644
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 | }) | ... | ... |
... | @@ -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> | ... | ... |
-
Please register or sign in to post a comment