-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4485 from Tinhone/improve-custom-font-family
[组件-自定义字体] feat: 改善组件代码和功能
- Loading branch information
Showing
10 changed files
with
407 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
registry/lib/components/style/custom-font-family/extra-options/ExtraOptionsPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <template> | ||
| <VPopup v-model="popupOpen" class="be-extra-options-panel" fixed :lazy="false"> | ||
| <div class="be-eop-header"> | ||
| <div class="be-eop-h-title"> | ||
| <VIcon class="be-eop-h-t-icon" :icon="initData.header.title.icon" :size="24"></VIcon> | ||
| <div class="be-eop-h-t-text">{{ initData.header.title.text }}</div> | ||
| </div> | ||
|
|
||
| <div class="be-eop-h-actions"> | ||
| <div v-for="action in initData.header.actions" :key="action.id" class="be-eop-h-a-action"> | ||
| <VIcon | ||
| :ref="`action${action.id}`" | ||
| :class="`action-${action.actionClassNameSuffix}`" | ||
| :title="action.title" | ||
| :icon="action.icon" | ||
| :size="24" | ||
| ></VIcon> | ||
| </div> | ||
| <div class="be-eop-h-a-action"> | ||
| <VIcon | ||
| class="action-close" | ||
| title="关闭" | ||
| icon="mdi-close" | ||
| :size="24" | ||
| @click="popupOpen = false" | ||
| ></VIcon> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="be-eop-separator"></div> | ||
|
|
||
| <div class="be-eop-content"> | ||
| <div v-for="option in initData.content.options" :key="option.id" class="be-eop-c-option"> | ||
| <div class="be-eop-c-o-title">{{ option.title }}</div> | ||
| <div class="be-eop-c-o-description">{{ option.description }}</div> | ||
| <div class="be-eop-c-o-input" :class="`input-${option.inputClassNameSuffix}`"> | ||
| <slot :name="`input${option.id}`"> | ||
| 选项输入入口默认文字，使用含 v-slot 指令的 template 元素以替换默认内容 | ||
| </slot> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </VPopup> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { VPopup, VIcon } from '@/ui' | ||
| import { defaultInitData } from './extra-options-panel' | ||
| export default defineComponent({ | ||
| name: 'ExtraOptionsPanel', | ||
| components: { | ||
| VPopup, | ||
| VIcon, | ||
| }, | ||
| props: { | ||
| initData: { | ||
| type: Object, | ||
| default: defaultInitData, | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| popupOpen: false, | ||
| } | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| @import './extra-options-panel'; | ||
| .be-extra-options-panel { | ||
| @include extra-options-panel(); | ||
| } | ||
| </style> |
148 changes: 148 additions & 0 deletions
148
registry/lib/components/style/custom-font-family/extra-options/Panel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| <template> | ||
| <ExtraOptionsPanel | ||
| ref="extraOptionsPanel" | ||
| class="custom-font-family-extra-options-panel" | ||
| :class="{ peek: isPeeking }" | ||
| :init-data="initData" | ||
| > | ||
| <template #input0> | ||
| <TextArea v-model="inputFontFamily" /> | ||
| </template> | ||
| </ExtraOptionsPanel> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { TextArea } from '@/ui' | ||
| import ExtraOptionsPanel from './ExtraOptionsPanel.vue' | ||
| import { getComponentSettings } from '@/core/settings' | ||
| import { Toast } from '@/core/toast' | ||
| import { delay } from '@/core/utils' | ||
| import { useScopedConsole } from '@/core/utils/log' | ||
| import { fontFamilyDefaultValue } from '../font-family-default-value' | ||
| import { ExtraOptionsPanelInitData } from './extra-options-panel' | ||
| const initData: ExtraOptionsPanelInitData = { | ||
| header: { | ||
| title: { | ||
| text: '自定义字体', | ||
| icon: 'mdi-format-font', | ||
| }, | ||
| actions: [ | ||
| { | ||
| id: 0, | ||
| title: '重置面板中的所有选项为默认值', | ||
| icon: 'mdi-cog-sync-outline', | ||
| actionClassNameSuffix: 'reset', | ||
| }, | ||
| { | ||
| id: 1, | ||
| title: '透视', | ||
| icon: 'mdi-eye-outline', | ||
| actionClassNameSuffix: 'peek', | ||
| }, | ||
| ], | ||
| }, | ||
| content: { | ||
| options: [ | ||
| { | ||
| id: 0, | ||
| title: '自定义字体', | ||
| description: '输入需要设置的字体，不同字体之间必须以英文逗号分隔', | ||
| inputClassNameSuffix: 'input-font-family', | ||
| }, | ||
| ], | ||
| }, | ||
| } | ||
| const console = useScopedConsole('自定义字体') | ||
| export default defineComponent({ | ||
| components: { | ||
| ExtraOptionsPanel, | ||
| TextArea, | ||
| }, | ||
| data() { | ||
| return { | ||
| isPeeking: false, | ||
| isMouseOverPeekIcon: false, | ||
| initData, | ||
| // 设置 inputFontFamily 初始值为组件 fontFamily 选项的值 | ||
| inputFontFamily: getComponentSettings('customFontFamily').options.fontFamily, | ||
| } | ||
| }, | ||
| watch: { | ||
| // 监听 inputFontFamily 修改动作，实时修改组件 fontFamily 选项为 inputFontFamily 修改后的新值，并拥有 1000ms 防抖 | ||
| inputFontFamily: lodash.debounce(value => { | ||
| getComponentSettings('customFontFamily').options.fontFamily = value | ||
| }, 1000), | ||
| async isMouseOverPeekIcon(value: boolean) { | ||
| if (!value) { | ||
| this.isPeeking = false | ||
| return | ||
| } | ||
| if (value) { | ||
| await delay(200) | ||
| } | ||
| if (this.isMouseOverPeekIcon) { | ||
| this.isPeeking = true | ||
| } | ||
| }, | ||
| }, | ||
| mounted() { | ||
| // 当在 v-for 中使用模板引用时，相应的引用中包含的值是一个数组 | ||
| // 但 ref 数组并不保证与源数组相同的顺序，所以统一命名且不加用以区分的后缀，仅靠数组选择元素是不现实的 | ||
| // https://cn.vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for | ||
| const action0Reset = this.$refs.extraOptionsPanel.$refs.action0[0].$el as HTMLElement | ||
| action0Reset.addEventListener('click', this.confirmResetOptions) | ||
| const action1Peek = this.$refs.extraOptionsPanel.$refs.action1[0].$el as HTMLElement | ||
| action1Peek.addEventListener('mouseover', this.setIsMouseOverPeekIconToTrue) | ||
| action1Peek.addEventListener('mouseout', this.setIsMouseOverPeekIconToFalse) | ||
| }, | ||
| methods: { | ||
| toggleDisplay() { | ||
| this.$refs.extraOptionsPanel.popupOpen = !this.$refs.extraOptionsPanel.popupOpen | ||
| }, | ||
| setIsMouseOverPeekIconToTrue() { | ||
| this.isMouseOverPeekIcon = true | ||
| }, | ||
| setIsMouseOverPeekIconToFalse() { | ||
| this.isMouseOverPeekIcon = false | ||
| }, | ||
| confirmResetOptions() { | ||
| if (confirm('确定将面板中的所有选项重置为默认值吗？')) { | ||
| this.resetOptions() | ||
| } | ||
| }, | ||
| resetOptions() { | ||
| getComponentSettings('customFontFamily').options.fontFamily = fontFamilyDefaultValue | ||
| this.inputFontFamily = fontFamilyDefaultValue | ||
| Toast.success('字体设置面板中的所有选项已成功被重置为默认值', '自定义字体', 2000) | ||
| console.log('字体设置面板中的所有选项已成功被重置为默认值') | ||
| }, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .custom-font-family-extra-options-panel { | ||
| &.peek { | ||
| opacity: 0.1; | ||
| } | ||
| > .be-eop-content > .be-eop-c-option > .be-eop-c-o-input.input-input-font-family > .be-text-area { | ||
| min-height: 160px; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.