18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

<form-dialog>使用函数式改写

Browse Source 
示例-样式页修改
master
toesbieya 6 years ago
parent 6b1522d065
commit 0e9633ad02
3 changed files with 75 additions and 80 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 98
      vue/src/components/FormDialog/index.vue
  2. 29
      vue/src/components/FormDialog/style.scss
  3. 28
      vue/src/views/example/stylePage.vue

98
vue/src/components/FormDialog/index.vue
Unescape View File

@ -1,74 +1,54 @@
<template>
<el-dialog
v-drag-dialog
v-bind="$props"
v-on="$listeners"
:visible="value"
custom-class="form-dialog"
>
<slot slot="title" name="title">{{title}}</slot>
<div class="form-dialog-container">
<loading-mask :show="loading"/>
<el-scrollbar>
<div class="form-dialog-body">
<slot/>
</div>
<div style="margin-bottom: 17px"/>
</el-scrollbar>
</div>
<slot slot="footer" name="footer"/>
</el-dialog>
</template>
<script>
<script type="text/jsx">
import LoadingMask from '@/components/LoadingMask'
export default {
name: "FormDialog",
components: {LoadingMask},
functional: true,
props: {
value: Boolean,
appendToBody: Boolean,
top: {type: String, default: '50px'},
width: {type: String, default: '30%'},
loading: {type: Boolean, default: true},
title: String,
}
}
</script>
<style lang="scss">
.form-dialog {
.el-dialog__body {
padding: 0;
}
loading: {type: Boolean, default: true},
top: {type: String, default: '50px'},
width: {type: String, default: '30%'}
},
.form-dialog-container {
position: relative;
width: 100%;
render(h, context) {
const {value, title, loading, top, width} = context.props
const l = context.listeners
.form-dialog-body {
padding: 24px 24px 0
function onClose() {
l.input && l.input(false)
}
.el-form {
padding: 0;
}
.el-upload.el-upload--picture-card {
height: 100px;
width: 100px;
line-height: 105px;
}
.el-upload-list .el-upload-list__item {
height: 100px;
width: 100px;
}
return (
<el-dialog
v-drag-dialog
visible={value}
custom-class="form-dialog"
top={top}
width={width}
on-close={onClose}
{...context.data}
>
<slot slot="title" name="title">{title}</slot>
<div class="form-dialog-container">
<LoadingMask show={loading}/>
<el-scrollbar>
<div class="form-dialog-body">
{context.children}
</div>
<div style="margin-bottom: 17px"/>
</el-scrollbar>
</div>
<slot slot="footer" name="footer"/>
</el-dialog>
)
}
}
</style>
</script>
<style lang="scss" src="./style.scss"></style>

29
vue/src/components/FormDialog/style.scss
Unescape View File

@ -0,0 +1,29 @@
.form-dialog {
.el-dialog__body {
padding: 0;
}
.form-dialog-container {
position: relative;
width: 100%;
.form-dialog-body {
padding: 24px 24px 0
}
.el-form {
padding: 0;
}
.el-upload.el-upload--picture-card {
height: 100px;
width: 100px;
line-height: 105px;
}
.el-upload-list .el-upload-list__item {
height: 100px;
width: 100px;
}
}
}

28
vue/src/views/example/stylePage.vue
Unescape View File

@ -23,13 +23,13 @@
</div>
</el-row>
<el-row>
<el-button size="small" @click="dialog=true">默认按钮（点击打开dialog）</el-button>
<el-button size="small" @click="dialog=true">默认按钮（点击打开dialog</el-button>
<el-button size="small" plain type="dashed">dashed按钮</el-button>
<el-button size="small" type="primary">主要按钮</el-button>
<el-button size="small" type="success">成功按钮</el-button>
<el-button size="small" type="info">信息按钮</el-button>
<el-button size="small" type="warning">警告按钮</el-button>
<el-button size="small" type="danger">危险按钮</el-button>
<el-button size="small" type="success" @click="$message.success('成功消息')">成功按钮</el-button>
<el-button size="small" type="info" @click="$message.info('信息消息')">信息按钮</el-button>
<el-button size="small" type="warning" @click="$message.warning('警告消息')">警告按钮</el-button>
<el-button size="small" type="danger" @click="$message.error('错误消息')">危险按钮</el-button>
</el-row>
<el-row class="table-container">
<liner-progress show/>
@ -40,13 +40,6 @@
<el-table-column label="年龄" prop="age"/>
</abstract-table>
</el-row>
<el-row style="min-height: 50px">
<el-tree
:data="treeData"
:expand-on-click-node="false"
highlight-current
/>
</el-row>
</el-card>
<form-dialog v-model="dialog" :loading="false" title="封装的dialog">
@ -76,12 +69,6 @@
{name: '老王', address: '中国', tel: '13232423232', age: 18},
{name: '老王', address: '中国', tel: '13232423232', age: 18},
{name: '老王', address: '中国', tel: '13232423232', age: 18}
],
treeData: [
{
id: 1, label: '测试',
children: [{id: 2, label: '测试1'}, {id: 3, label: '测试2'}]
}
]
}
},
@ -91,9 +78,8 @@
setTimeout(() => {
this.$notify({
title: type,
message: '不会自动关闭',
type,
duration: 0
message: '提示信息',
type
})
}, time)
}

Write Preview
Loading…
Cancel
Save