Demo:给对话框添加唯一的class,方便开发者调整样式

This commit is contained in:
wanglin2 2023-08-03 08:49:29 +08:00
parent c845a0b7fa
commit 1952280003
7 changed files with 14 additions and 14 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeExportDialog"
:title="$t('export.title')" :title="$t('export.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="700px" width="700px"
@ -197,7 +197,7 @@ export default {
} }
} }
.nodeDialog { .nodeExportDialog {
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
background-color: #f2f4f7; background-color: #f2f4f7;
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeImportDialog"
:title="$t('import.title')" :title="$t('import.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="300px" width="300px"
@ -245,6 +245,6 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeImportDialog {
} }
</style> </style>

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeHyperlinkDialog"
:title="$t('nodeHyperlink.title')" :title="$t('nodeHyperlink.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="500" width="500"
@ -89,7 +89,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeHyperlinkDialog {
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeIconDialog"
:title="$t('nodeIcon.title')" :title="$t('nodeIcon.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="500" width="500"
@ -95,7 +95,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeIconDialog {
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
padding: 0 20px; padding: 0 20px;
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeImageDialog"
:title="$t('nodeImage.title')" :title="$t('nodeImage.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="500" width="500"
@ -112,7 +112,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeImageDialog {
.title { .title {
font-size: 18px; font-size: 18px;
margin-bottom: 12px; margin-bottom: 12px;

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeNoteDialog"
:title="$t('nodeNote.title')" :title="$t('nodeNote.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="500" width="500"
@ -105,7 +105,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeNoteDialog {
.tip { .tip {
margin-top: 5px; margin-top: 5px;
color: #dcdfe6; color: #dcdfe6;

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
class="nodeDialog" class="nodeTagDialog"
:title="$t('nodeTag.title')" :title="$t('nodeTag.title')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="500" width="500"
@ -120,7 +120,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeTagDialog {
.tagList { .tagList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;