parent
76b6bcc6db
commit
adde5e8003
@ -1,114 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-row class="tip-row"> |
||||
对element的样式做了些修改 |
||||
</el-row> |
||||
<el-card> |
||||
<el-row type="flex"> |
||||
<div class="el-message el-message--success" role="alert"> |
||||
<i class="el-message__icon el-icon-success"/> |
||||
<p class="el-message__content">成功提示</p> |
||||
</div> |
||||
<div class="el-message el-message--info" role="alert"> |
||||
<i class="el-message__icon el-icon-info"/> |
||||
<p class="el-message__content">信息提示</p> |
||||
</div> |
||||
<div class="el-message el-message--warning" role="alert"> |
||||
<i class="el-message__icon el-icon-warning"/> |
||||
<p class="el-message__content">警告提示</p> |
||||
</div> |
||||
<div class="el-message el-message--error" role="alert"> |
||||
<i class="el-message__icon el-icon-error"/> |
||||
<p class="el-message__content">错误提示</p> |
||||
</div> |
||||
</el-row> |
||||
<el-row> |
||||
<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" @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/> |
||||
<abstract-table :data="tableData"> |
||||
<el-table-column label="姓名" prop="name"/> |
||||
<el-table-column label="住址" prop="address"/> |
||||
<el-table-column label="电话" prop="tel"/> |
||||
<el-table-column label="年龄" prop="age"/> |
||||
</abstract-table> |
||||
</el-row> |
||||
</el-card> |
||||
|
||||
<form-dialog v-model="dialog" :loading="false" title="封装的dialog"> |
||||
<p v-for="i in 50" :key="i">超出部分滚动...</p> |
||||
<template v-slot:footer> |
||||
<el-button plain size="small" @click="dialog=false">取 消</el-button> |
||||
<el-button size="small" type="primary" @click="dialog=false">保 存</el-button> |
||||
</template> |
||||
</form-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import AbstractTable from '@/component/AbstractTable' |
||||
import LinerProgress from '@/component/LinerProgress' |
||||
import FormDialog from "@/component/FormDialog" |
||||
|
||||
export default { |
||||
name: "stylePage", |
||||
|
||||
components: {AbstractTable, LinerProgress, FormDialog}, |
||||
|
||||
data() { |
||||
return { |
||||
dialog: false, |
||||
tableData: [ |
||||
{name: '老王', address: '中国', tel: '13232423232', age: 18}, |
||||
{name: '老王', address: '中国', tel: '13232423232', age: 18}, |
||||
{name: '老王', address: '中国', tel: '13232423232', age: 18} |
||||
] |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
const f = (type, time = 0) => { |
||||
setTimeout(() => { |
||||
this.$notify({ |
||||
title: type, |
||||
message: '提示信息', |
||||
type |
||||
}) |
||||
}, time) |
||||
} |
||||
let i = 0; |
||||
['success', 'info', 'warning', 'error'].forEach(t => { |
||||
f(t, i) |
||||
i += 200 |
||||
}) |
||||
|
||||
this.$once('hook:beforeDestroy', this.$notify.closeAll) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.el-message { |
||||
position: static; |
||||
transform: translateX(0); |
||||
|
||||
& + .el-message { |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
|
||||
.el-row + .el-row { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.el-tag + .el-tag { |
||||
margin-left: 20px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue