Skip to content

Commit

Permalink
style: 抽离BaseButton,支持按钮修改主题色
Browse files Browse the repository at this point in the history
  • Loading branch information
kailong321200875 committed Dec 10, 2023
1 parent 7fa533b commit 69539ee
Show file tree
Hide file tree
Showing 43 changed files with 426 additions and 269 deletions.
3 changes: 3 additions & 0 deletions src/components/Button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import BaseButton from './src/Button.vue'

export { BaseButton }
121 changes: 121 additions & 0 deletions src/components/Button/src/Button.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<script setup lang="ts">
import { useDesign } from '@/hooks/web/useDesign'
import { ElButton, ComponentSize, ButtonType } from 'element-plus'
import { PropType, Component, computed, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const getTheme = computed(() => appStore.getTheme)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('button')
const props = defineProps({
size: {
type: String as PropType<ComponentSize>,
default: undefined
},
type: {
type: String as PropType<ButtonType>,
default: 'default'
},
disabled: {
type: Boolean,
default: false
},
plain: {
type: Boolean,
default: false
},
text: {
type: Boolean,
default: false
},
bg: {
type: Boolean,
default: false
},
link: {
type: Boolean,
default: false
},
round: {
type: Boolean,
default: false
},
circle: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
loadingIcon: {
type: [String, Object] as PropType<String | Component>,
default: undefined
},
icon: {
type: [String, Object] as PropType<String | Component>,
default: undefined
},
autofocus: {
type: Boolean,
default: false
},
nativeType: {
type: String as PropType<'button' | 'submit' | 'reset'>,
default: 'button'
},
autoInsertSpace: {
type: Boolean,
default: false
},
color: {
type: String,
default: ''
},
darker: {
type: Boolean,
default: false
},
tag: {
type: [String, Object] as PropType<String | Component>,
default: 'button'
}
})
const emits = defineEmits(['click'])
const color = computed(() => {
const { type } = props
if (type === 'primary') {
return unref(getTheme).elColorPrimary
}
return ''
})
const style = computed(() => {
const { type } = props
if (type === 'primary') {
return '--el-button-text-color: #fff; --el-button-hover-text-color: #fff'
}
return ''
})
</script>

<template>
<ElButton
:class="`${prefixCls} color-#fff`"
v-bind="{ ...props }"
:color="color"
:style="style"
@click="() => emits('click')"
>
<slot></slot>
<slot name="icon"></slot>
<slot name="loading"></slot>
</ElButton>
</template>
3 changes: 1 addition & 2 deletions src/components/Error/src/Error.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import networkError from '@/assets/svgs/500.svg'
import noPermission from '@/assets/svgs/403.svg'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton } from 'element-plus'
interface ErrorMap {
url: string
Expand Down Expand Up @@ -51,7 +50,7 @@ const btnClick = () => {
<img width="350" :src="errorMap[type].url" alt="" />
<div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
<div class="mt-20px">
<ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton>
<BaseButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</BaseButton>
</div>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Search/src/components/ActionButton.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
import { ElButton } from 'element-plus'
import { useIcon } from '@/hooks/web/useIcon'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
Expand Down Expand Up @@ -31,29 +30,30 @@ const onExpand = () => {
</script>

<template>
<ElButton
<BaseButton
v-if="showSearch"
type="primary"
:loading="searchLoading"
:icon="useIcon({ icon: 'ep:search' })"
@click="onSearch"
>
{{ t('common.query') }}
</ElButton>
<ElButton
</BaseButton>
<BaseButton
v-if="showReset"
:loading="resetLoading"
plain
:icon="useIcon({ icon: 'ep:refresh-right' })"
@click="onReset"
>
{{ t('common.reset') }}
</ElButton>
<ElButton
</BaseButton>
<BaseButton
v-if="showExpand"
:icon="useIcon({ icon: visible ? 'ep:arrow-up' : 'ep:arrow-down' })"
text
@click="onExpand"
>
{{ t(visible ? 'common.shrink' : 'common.expand') }}
</ElButton>
</BaseButton>
</template>
10 changes: 6 additions & 4 deletions src/components/Setting/src/Setting.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ElDrawer, ElDivider, ElButton, ElMessage } from 'element-plus'
import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
import { ref, unref, computed, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ThemeSwitch } from '@/components/ThemeSwitch'
Expand Down Expand Up @@ -278,12 +278,14 @@ const clear = () => {

<ElDivider />
<div>
<ElButton type="primary" class="w-full" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
<BaseButton type="primary" class="w-full" @click="copyConfig">{{
t('setting.copy')
}}</BaseButton>
</div>
<div class="mt-5px">
<ElButton type="danger" class="w-full" @click="clear">
<BaseButton type="danger" class="w-full" @click="clear">
{{ t('setting.clearAndReset') }}
</ElButton>
</BaseButton>
</div>
</ElDrawer>
</template>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Table/src/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
ComponentSize,
ElTooltipProps,
ElImage,
ElButton,
ElEmpty,
ElCard
} from 'element-plus'
Expand All @@ -21,6 +20,7 @@ import TableActions from './components/TableActions.vue'
import { isImgPath } from '@/utils/is'
import { createVideoViewer } from '@/components/VideoPlayer'
import { Icon } from '@/components/Icon'
import { BaseButton } from '@/components/Button'
export default defineComponent({
name: 'Table',
Expand Down Expand Up @@ -393,7 +393,7 @@ export default defineComponent({
preview-teleported
/>
) : (
<ElButton
<BaseButton
type="primary"
icon={<Icon icon="ep:video-play" />}
onClick={() => {
Expand All @@ -403,7 +403,7 @@ export default defineComponent({
}}
>
预览
</ElButton>
</BaseButton>
)}
</div>
)
Expand Down
3 changes: 1 addition & 2 deletions src/components/UserInfo/src/components/LockDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useForm } from '@/hooks/web/useForm'
import { reactive, computed } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { FormSchema } from '@/components/Form'
import { ElButton } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { useLockStore } from '@/store/modules/lock'
Expand Down Expand Up @@ -87,7 +86,7 @@ const handleLock = async () => {
</div>
<Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
<template #footer>
<ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
<BaseButton type="primary" @click="handleLock">{{ t('lock.lock') }}</BaseButton>
</template>
</Dialog>
</template>
Expand Down
14 changes: 7 additions & 7 deletions src/components/UserInfo/src/components/LockPage.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { ElInput, ElButton } from 'element-plus'
import { ElInput } from 'element-plus'
import { resetRouter } from '@/router'
import { useRouter } from 'vue-router'
import { useStorage } from '@/hooks/web/useStorage'
Expand Down Expand Up @@ -107,7 +107,7 @@ function handleShowForm(show = false) {
{{ t('lock.message') }}
</span>
<div :class="`${prefixCls}-entry__footer enter-x`">
<ElButton
<BaseButton
type="primary"
size="small"
class="mt-2 mr-2 enter-x"
Expand All @@ -116,8 +116,8 @@ function handleShowForm(show = false) {
@click="handleShowForm(true)"
>
{{ t('common.back') }}
</ElButton>
<ElButton
</BaseButton>
<BaseButton
type="primary"
size="small"
class="mt-2 mr-2 enter-x"
Expand All @@ -126,8 +126,8 @@ function handleShowForm(show = false) {
@click="goLogin"
>
{{ t('lock.backToLogin') }}
</ElButton>
<ElButton
</BaseButton>
<BaseButton
type="primary"
class="mt-2"
size="small"
Expand All @@ -136,7 +136,7 @@ function handleShowForm(show = false) {
:disabled="loading"
>
{{ t('lock.entrySystem') }}
</ElButton>
</BaseButton>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import type { App } from 'vue'
import { Icon } from './Icon'
import { Permission } from './Permission'
import { BaseButton } from './Button'

export const setupGlobCom = (app: App<Element>): void => {
app.component('Icon', Icon)
app.component('Permission', Permission)
app.component('BaseButton', BaseButton)
}
32 changes: 19 additions & 13 deletions src/views/Authorization/Department/Department.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElTag } from 'element-plus'
import { ElTag } from 'element-plus'
import { Table } from '@/components/Table'
import {
getDepartmentApi,
Expand All @@ -17,6 +17,7 @@ import { ref, unref, reactive } from 'vue'
import Write from './components/Write.vue'
import Detail from './components/Detail.vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { BaseButton } from '@/components/Button'
const ids = ref<string[]>([])
Expand Down Expand Up @@ -211,15 +212,15 @@ const crudSchemas = reactive<CrudSchema[]>([
default: (data: any) => {
return (
<>
<ElButton type="primary" onClick={() => action(data.row, 'edit')}>
<BaseButton type="primary" onClick={() => action(data.row, 'edit')}>
{t('exampleDemo.edit')}
</ElButton>
<ElButton type="success" onClick={() => action(data.row, 'detail')}>
</BaseButton>
<BaseButton type="success" onClick={() => action(data.row, 'detail')}>
{t('exampleDemo.detail')}
</ElButton>
<ElButton type="danger" onClick={() => delData(data.row)}>
</BaseButton>
<BaseButton type="danger" onClick={() => delData(data.row)}>
{t('exampleDemo.del')}
</ElButton>
</BaseButton>
</>
)
}
Expand Down Expand Up @@ -292,10 +293,10 @@ const save = async () => {
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />

<div class="mb-10px">
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
<ElButton :loading="delLoading" type="danger" @click="delData(null)">
<BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
<BaseButton :loading="delLoading" type="danger" @click="delData(null)">
{{ t('exampleDemo.del') }}
</ElButton>
</BaseButton>
</div>

<Table
Expand Down Expand Up @@ -326,10 +327,15 @@ const save = async () => {
/>

<template #footer>
<ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
<BaseButton
v-if="actionType !== 'detail'"
type="primary"
:loading="saveLoading"
@click="save"
>
{{ t('exampleDemo.save') }}
</ElButton>
<ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
</BaseButton>
<BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
</template>
</Dialog>
</template>
Loading

0 comments on commit 69539ee

Please sign in to comment.