lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 抽离BaseButton，支持按钮修改主题色

Browse Source
This commit is contained in:
kailong321200875
2023-12-10 09:18:33 +08:00
parent 7fa533b8ba
commit 69539ee2d3
43 changed files with 426 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/hooks/useClipboard.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useClipboard } from '@/hooks/web/useClipboard'
import { ElButton, ElInput } from 'element-plus'
import { ElInput } from 'element-plus'
import { ref } from 'vue'
const { copy, copied, text, isSupported } = useClipboard()
@@ -13,10 +13,10 @@ const source = ref('')
<ContentWrap title="useClipboard">
<ElInput v-model="source" placeholder="请输入要复制的内容" />
<div v-if="isSupported">
<ElButton @click="copy(source)" type="primary" class="mt-20px">
<BaseButton @click="copy(source)" type="primary" class="mt-20px">
<span v-if="!copied">复制</span>
<span v-else>已复制</span>
</ElButton>
</BaseButton>
<p>
当前已复制: <code>{{ text || 'none' }}</code>
</p>

17
src/views/hooks/useTagsView.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ElButton } from 'element-plus'
import { useTagsView } from '@/hooks/web/useTagsView'
import { useRouter } from 'vue-router'
@@ -48,13 +47,13 @@ const setAnalysisTitle = () => {
<template>
<ContentWrap title="useTagsView">
<ElButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </ElButton>
<ElButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </ElButton>
<ElButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </ElButton>
<ElButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
<ElButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
<ElButton type="primary" @click="refresh"> 刷新当前标签页 </ElButton>
<ElButton type="primary" @click="setTabTitle"> 修改当前标题 </ElButton>
<ElButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </ElButton>
<BaseButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </BaseButton>
<BaseButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </BaseButton>
<BaseButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </BaseButton>
<BaseButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </BaseButton>
<BaseButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </BaseButton>
<BaseButton type="primary" @click="refresh"> 刷新当前标签页 </BaseButton>
<BaseButton type="primary" @click="setTabTitle"> 修改当前标题 </BaseButton>
<BaseButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </BaseButton>
</ContentWrap>
</template>

11
src/views/hooks/useWatermark.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton } from 'element-plus'
import { useWatermark } from '@/hooks/web/useWatermark'
import { computed, onBeforeUnmount } from 'vue'
import { useAppStore } from '@/store/modules/app'
@@ -21,12 +20,12 @@ onBeforeUnmount(() => {
<template>
<ContentWrap title="useWatermark">
<ElButton type="primary" @click="setWatermark(title)">
<BaseButton type="primary" @click="setWatermark(title)">
{{ t('watermarkDemo.createdWatermark') }}
</ElButton>
<ElButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</ElButton>
<ElButton type="warning" @click="setWatermark(`New${title}`)">
</BaseButton>
<BaseButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</BaseButton>
<BaseButton type="warning" @click="setWatermark(`New${title}`)">
{{ t('watermarkDemo.resetWatermark') }}
</ElButton>
</BaseButton>
</ContentWrap>
</template>