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> <script type="text/jsx">
<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>
import LoadingMask from '@/components/LoadingMask' import LoadingMask from '@/components/LoadingMask'
export default { export default {
name: "FormDialog", name: "FormDialog",
components: {LoadingMask}, functional: true,
props: { props: {
value: Boolean, value: Boolean,
appendToBody: Boolean,
top: {type: String, default: '50px'},
width: {type: String, default: '30%'},
loading: {type: Boolean, default: true},
title: String, title: String,
} loading: {type: Boolean, default: true},
} top: {type: String, default: '50px'},
</script> width: {type: String, default: '30%'}
},
<style lang="scss">
.form-dialog {
.el-dialog__body {
padding: 0;
}
.form-dialog-container { render(h, context) {
position: relative; const {value, title, loading, top, width} = context.props
width: 100%; const l = context.listeners
.form-dialog-body { function onClose() {
padding: 24px 24px 0 l.input && l.input(false)
} }
.el-form { return (
padding: 0; <el-dialog
} v-drag-dialog
visible={value}
.el-upload.el-upload--picture-card { custom-class="form-dialog"
height: 100px; top={top}
width: 100px; width={width}
line-height: 105px; on-close={onClose}
} {...context.data}
>
.el-upload-list .el-upload-list__item { <slot slot="title" name="title">{title}</slot>
height: 100px;
width: 100px; <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> </div>
</el-row> </el-row>
<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" plain type="dashed">dashed按钮</el-button>
<el-button size="small" type="primary">主要按钮</el-button> <el-button size="small" type="primary">主要按钮</el-button>
<el-button size="small" type="success">成功按钮</el-button> <el-button size="small" type="success" @click="$message.success('成功消息')">成功按钮</el-button>
<el-button size="small" type="info">信息按钮</el-button> <el-button size="small" type="info" @click="$message.info('信息消息')">信息按钮</el-button>
<el-button size="small" type="warning">警告按钮</el-button> <el-button size="small" type="warning" @click="$message.warning('警告消息')">警告按钮</el-button>
<el-button size="small" type="danger">危险按钮</el-button> <el-button size="small" type="danger" @click="$message.error('错误消息')">危险按钮</el-button>
</el-row> </el-row>
<el-row class="table-container"> <el-row class="table-container">
<liner-progress show/> <liner-progress show/>
@ -40,13 +40,6 @@
<el-table-column label="年龄" prop="age"/> <el-table-column label="年龄" prop="age"/>
</abstract-table> </abstract-table>
</el-row> </el-row>
<el-row style="min-height: 50px">
<el-tree
:data="treeData"
:expand-on-click-node="false"
highlight-current
/>
</el-row>
</el-card> </el-card>
<form-dialog v-model="dialog" :loading="false" title="封装的dialog"> <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}, {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(() => { setTimeout(() => {
this.$notify({ this.$notify({
title: type, title: type,
message: '不会自动关闭', message: '提示信息',
type, type
duration: 0
}) })
}, time) }, time)
} }

Write Preview
Loading…
Cancel
Save