github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-28 05:39:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: remove optional chain

Browse Source
This commit is contained in:
vben
2020-10-23 23:11:12 +08:00
parent 144fde8a68
commit e034d1bacc
16 changed files with 234 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Basic/index.ts
View File

@@ -1,3 +1,3 @@
export { default as BasicArrow } from './src/BasicArrow.vue';
export { default as BasicHelp } from './src/BasicHelp';
export { default as BasicHelp } from './src/BasicHelp.vue';
export { default as BasicTitle } from './src/BasicTitle.vue';

19
src/components/Basic/src/BasicHelp.less
View File

@@ -1,19 +0,0 @@
@import (reference) '../../../design/index.less';
.base-help {
display: inline-block;
margin-left: 6px;
font-size: 14px;
color: @text-color-help-dark;
cursor: pointer;
&:hover {
color: @primary-color;
}
&__wrap {
p {
margin-bottom: 0;
}
}
}

107
src/components/Basic/src/BasicHelp.tsx
View File

@@ -1,107 +0,0 @@
import type { PropType } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, computed, unref } from 'vue';
import { getPopupContainer } from '/@/utils';
import { isString, isArray } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import './BasicHelp.less';
export default defineComponent({
name: 'BaseHelp',
props: {
// max-width
maxWidth: {
type: String as PropType<string>,
default: '600px',
},
// Whether to display the serial number
showIndex: {
type: Boolean as PropType<boolean>,
default: false,
},
// Text list
text: {
type: [Array, String] as PropType<string[] | string>,
},
// color
color: {
type: String as PropType<string>,
default: '#ffffff',
},
fontSize: {
type: String as PropType<string>,
default: '14px',
},
absolute: {
type: Boolean as PropType<boolean>,
default: false,
},
// 定位
position: {
type: [Object] as PropType<any>,
default: () => ({
position: 'absolute',
left: 0,
bottom: 0,
}),
},
},
setup(props, { slots }) {
const getOverlayStyleRef = computed(() => {
return {
maxWidth: props.maxWidth,
};
});
const getWrapStyleRef = computed(() => {
return {
color: props.color,
fontSize: props.fontSize,
};
});
const getMainStyleRef = computed(() => {
return props.absolute ? props.position : {};
});
/**
* @description: 渲染内容
*/
const renderTitle = () => {
const list = props.text;
if (isString(list)) {
return <p>{list}</p>;
}
if (isArray(list)) {
return list.map((item, index) => {
return (
<p key={item}>
{props.showIndex ? `${index + 1}. ` : ''}
{item}
</p>
);
});
}
return null;
};
return () => (
<Tooltip
title={(<div style={unref(getWrapStyleRef)}>{renderTitle()}</div>) as any}
placement="right"
overlayStyle={unref(getOverlayStyleRef)}
autoAdjustOverflow={true}
overlayClassName="base-help__wrap"
getPopupContainer={() => getPopupContainer()}
>
{{
default: () => (
<span class="base-help" style={unref(getMainStyleRef)}>
{getSlot(slots) || <InfoCircleOutlined />}
</span>
),
}}
</Tooltip>
);
},
});

137
src/components/Basic/src/BasicHelp.vue Normal file
View File

@@ -0,0 +1,137 @@
<script lang="ts">
import type { PropType } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, computed, unref, h } from 'vue';
import { getPopupContainer } from '/@/utils';
import { isString, isArray } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
export default defineComponent({
name: 'BaseHelp',
components: { Tooltip },
props: {
// max-width
maxWidth: {
type: String as PropType<string>,
default: '600px',
},
// Whether to display the serial number
showIndex: {
type: Boolean as PropType<boolean>,
default: false,
},
// Text list
text: {
type: [Array, String] as PropType<string[] | string>,
},
// color
color: {
type: String as PropType<string>,
default: '#ffffff',
},
fontSize: {
type: String as PropType<string>,
default: '14px',
},
absolute: {
type: Boolean as PropType<boolean>,
default: false,
},
// 定位
position: {
type: [Object] as PropType<any>,
default: () => ({
position: 'absolute',
left: 0,
bottom: 0,
}),
},
},
setup(props, { slots }) {
const getOverlayStyleRef = computed(() => {
return {
maxWidth: props.maxWidth,
};
});
const getWrapStyleRef = computed(() => {
return {
color: props.color,
fontSize: props.fontSize,
};
});
const getMainStyleRef = computed(() => {
return props.absolute ? props.position : {};
});
/**
* @description: 渲染内容
*/
const renderTitle = () => {
const list = props.text;
if (isString(list)) {
return h('p', list);
}
if (isArray(list)) {
return list.map((item, index) => {
return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
});
}
return null;
};
return () => {
return h(
Tooltip,
{
title: h(
'div',
{
style: unref(getWrapStyleRef),
},
[renderTitle()]
) as any,
overlayClassName: 'base-help__wrap',
autoAdjustOverflow: true,
overlayStyle: unref(getOverlayStyleRef),
placement: 'right',
getPopupContainer: () => getPopupContainer(),
},
{
default: () =>
h(
'span',
{
class: 'base-help',
style: unref(getMainStyleRef),
},
getSlot(slots) || h(InfoCircleOutlined)
),
}
);
};
},
});
</script>
<style lang="less">
@import (reference) '../../../design/index.less';
.base-help {
display: inline-block;
margin-left: 6px;
font-size: 14px;
color: @text-color-help-dark;
cursor: pointer;
&:hover {
color: @primary-color;
}
&__wrap {
p {
margin-bottom: 0;
}
}
}
</style>