amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-10-31 00:07:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add <style-option-menu> component (#182)

Browse Source
This commit is contained in:
YangQi 2022-08-15 11:10:48 +08:00 committed by GitHub
parent 9d27b1a8e1
commit ab3ed9b128
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scripts/config.js
View File

@ -3,10 +3,12 @@ export default {
{
label: `无衬线`,
value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
desc: `Abc`,
},
{
label: `衬线`,
value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
desc: `Abc`,
},
],
sizeOption: [

0
src/components/CodemirrorEditor/ResetDialog.vue → src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
View File

67
src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
{{ label }}
<i class="el-icon-arrow-right el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 200px">
<el-dropdown-item
v-for="{ value, label, desc } in options"
:key="value"
:label="label"
:value="value"
@click.native="charge(value)"
>
<i
class="el-icon-check"
:style="{ opacity: current === value ? 1 : 0 }"
></i>
{{ label }}
<span class="select-item-right">{{ desc }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: `StyleOptionMenu`,
props: {
label: {
type: String,
required: true,
},
options: {
type: Array,
required: true,
},
current: {
type: String,
required: true,
},
charge: {
type: Function,
required: true,
},
},
}
</script>
<style lang="less" scoped>
.style-option-menu {
margin: 0;
width: 150px;
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.select-item-right {
float: right;
color: #8492a6;
font-size: 13px;
}
</style>

132
src/components/CodemirrorEditor/EditorHeader.vue → src/components/CodemirrorEditor/EditorHeader/index.vue
View File

@ -98,101 +98,36 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="padding-left-3">
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
字体
<i class="el-icon-arrow-right el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 200px">
<el-dropdown-item
v-for="font in config.builtinFonts"
:style="{ fontFamily: font.value }"
:key="font.value"
:label="font.label"
:value="font.value"
@click.native="fontChanged(font.value)"
>
<i
class="el-icon-check"
:style="{ opacity: selectFont === font.value ? 1 : 0 }"
></i>
<span>{{ font.label }}</span>
<span class="select-item-right">Abc</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style-option-menu
label="字体"
:options="config.builtinFonts"
:current="selectFont"
:charge="fontChanged"
></style-option-menu>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
字号
<i class="el-icon-arrow-right el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 200px">
<el-dropdown-item
v-for="size in config.sizeOption"
:key="size.value"
:label="size.label"
:value="size.value"
@click.native="sizeChanged(size.value)"
>
<i
class="el-icon-check"
:style="{ opacity: selectSize === size.value ? 1 : 0 }"
></i>
<span>{{ size.label }}</span>
<span class="select-item-right">{{ size.desc }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style-option-menu
label="字号"
:options="config.sizeOption"
:current="selectSize"
:charge="sizeChanged"
></style-option-menu>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
颜色
<i class="el-icon-arrow-right el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 200px">
<el-dropdown-item
v-for="color in config.colorOption"
:key="color.value"
:label="color.label"
:value="color.value"
@click.native="colorChanged(color.value)"
>
<i
class="el-icon-check"
:style="{ opacity: selectColor === color.value ? 1 : 0 }"
></i>
<span>{{ color.label }}</span>
<span class="select-item-right">{{ color.desc }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style-option-menu
label="颜色"
:options="config.colorOption"
:current="selectColor"
:charge="colorChanged"
></style-option-menu>
</el-dropdown-item>
<el-dropdown-item class="padding-left-3">
<el-dropdown placement="right" class="style-option-menu">
<div class="el-dropdown-link">
代码主题
<i class="el-icon-arrow-right el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 200px">
<el-dropdown-item
v-for="code in config.codeThemeOption"
:key="code.value"
:label="code.label"
:value="code.value"
@click.native="codeThemeChanged(code.value)"
>
<i
class="el-icon-check"
:style="{ opacity: selectCodeTheme === code.value ? 1 : 0 }"
></i>
<span>{{ code.label }}</span>
<span class="select-item-right">{{ code.desc }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style-option-menu
label="代码主题"
:options="config.codeThemeOption"
:current="selectCodeTheme"
:charge="codeThemeChanged"
></style-option-menu>
</el-dropdown-item>
<el-dropdown-item
divided
@ -288,6 +223,7 @@ import { solveWeChatImage, solveHtml } from '@/assets/scripts/converter'
import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
import config from '@/assets/scripts/config'
import ResetDialog from './ResetDialog'
import StyleOptionMenu from './StyleOptionMenu'
import { mapState, mapMutations } from 'vuex'
export default {
@ -311,6 +247,7 @@ export default {
}
},
components: {
StyleOptionMenu,
ResetDialog,
},
computed: {
@ -523,12 +460,6 @@ export default {
flex: 1;
}
.select-item-right {
float: right;
color: #8492a6;
font-size: 13px;
}
.el-dropdown {
margin: 0 10px;
}
@ -537,17 +468,6 @@ export default {
cursor: pointer;
}
.style-option-menu {
margin: 0;
width: 150px;
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.padding-left-3 {
padding-left: 3em;
}

2
src/views/CodemirrorEditor.vue
View File

@ -106,7 +106,7 @@
</div>
</template>
<script>
import EditorHeader from '@/components/CodemirrorEditor/EditorHeader'
import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index'
import AboutDialog from '@/components/CodemirrorEditor/AboutDialog'
import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog'
import RightClickMenu from '@/components/CodemirrorEditor/RightClickMenu'