perf: add xtextbutton

This commit is contained in:
xingyu4j 2022-11-09 16:31:37 +08:00
parent 9c033d0104
commit b8665a9bc6
5 changed files with 21 additions and 17 deletions

View File

@ -1,3 +1,4 @@
import XButton from './src/XButton.vue' import XButton from './src/XButton.vue'
import XTextButton from './src/XTextButton.vue'
export { XButton } export { XButton, XTextButton }

View File

@ -7,7 +7,7 @@ const props = defineProps({
loading: propTypes.bool.def(false), loading: propTypes.bool.def(false),
preIcon: propTypes.string.def(''), preIcon: propTypes.string.def(''),
postIcon: propTypes.string.def(''), postIcon: propTypes.string.def(''),
title: propTypes.string.def('按钮'), title: propTypes.string.def(''),
type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def(''), type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def(''),
link: propTypes.bool.def(false), link: propTypes.bool.def(false),
circle: propTypes.bool.def(false), circle: propTypes.bool.def(false),
@ -31,7 +31,17 @@ const getBindValue = computed(() => {
<template> <template>
<el-button v-bind="getBindValue" @click="onClick"> <el-button v-bind="getBindValue" @click="onClick">
<Icon :icon="preIcon" v-if="preIcon" class="mr-1px" /> <Icon :icon="preIcon" v-if="preIcon" class="mr-1px" />
{{ title }} {{ title ? title : '' }}
<Icon :icon="postIcon" v-if="postIcon" class="mr-1px" /> <Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
</el-button> </el-button>
</template> </template>
<style lang="less" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;
}
:deep(.el-button.is-link) {
margin-left: 0;
padding: 8px 4px;
}
</style>

View File

@ -5,7 +5,7 @@ import { Table } from '@/components/Table'
import { Search } from '@/components/Search' import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog' import { Dialog } from '@/components/Dialog'
import { XModal } from '@/components/XModal' import { XModal } from '@/components/XModal'
import { XButton } from '@/components/XButton' import { XButton, XTextButton } from '@/components/XButton'
import { DictTag } from '@/components/DictTag' import { DictTag } from '@/components/DictTag'
import { ContentWrap } from '@/components/ContentWrap' import { ContentWrap } from '@/components/ContentWrap'
import { Descriptions } from '@/components/Descriptions' import { Descriptions } from '@/components/Descriptions'
@ -18,6 +18,7 @@ export const setupGlobCom = (app: App<Element>): void => {
app.component('Dialog', Dialog) app.component('Dialog', Dialog)
app.component('XModal', XModal) app.component('XModal', XModal)
app.component('XButton', XButton) app.component('XButton', XButton)
app.component('XTextButton', XTextButton)
app.component('DictTag', DictTag) app.component('DictTag', DictTag)
app.component('ContentWrap', ContentWrap) app.component('ContentWrap', ContentWrap)
app.component('Descriptions', Descriptions) app.component('Descriptions', Descriptions)

View File

@ -73,17 +73,13 @@
<vxe-column title="创建时间" field="createTime" formatter="formatDate" /> <vxe-column title="创建时间" field="createTime" formatter="formatDate" />
<vxe-column title="操作" width="200"> <vxe-column title="操作" width="200">
<template #default="{ row }"> <template #default="{ row }">
<XButton <XTextButton
link
type="primary"
preIcon="ep:edit" preIcon="ep:edit"
:title="t('action.edit')" :title="t('action.edit')"
v-hasPermi="['system:menu:update']" v-hasPermi="['system:menu:update']"
@click="handleUpdate(row.id)" @click="handleUpdate(row.id)"
/> />
<XButton <XTextButton
link
type="primary"
preIcon="ep:delete" preIcon="ep:delete"
:title="t('action.del')" :title="t('action.del')"
v-hasPermi="['system:menu:delete']" v-hasPermi="['system:menu:delete']"

View File

@ -14,23 +14,19 @@
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template> </template>
<template #action_default="{ row }"> <template #action_default="{ row }">
<XButton <XTextButton
link
type="primary"
preIcon="ep:edit" preIcon="ep:edit"
:title="t('action.edit')" :title="t('action.edit')"
v-hasPermi="['system:post:update']" v-hasPermi="['system:post:update']"
@click="handleUpdate(row.id)" @click="handleUpdate(row.id)"
/> />
<XButton <XTextButton
link
type="primary"
preIcon="ep:view" preIcon="ep:view"
:title="t('action.detail')" :title="t('action.detail')"
v-hasPermi="['system:post:update']" v-hasPermi="['system:post:update']"
@click="handleDetail(row)" @click="handleDetail(row)"
/> />
<XButton <XTextButton
link link
type="primary" type="primary"
preIcon="ep:delete" preIcon="ep:delete"