新增前端vue
This commit is contained in:
8
web-vue/packages/core/components/Basic/index.ts
Normal file
8
web-vue/packages/core/components/Basic/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { withInstall } from '@jeesite/core/utils';
|
||||
import basicArrow from './src/BasicArrow.vue';
|
||||
import basicTitle from './src/BasicTitle.vue';
|
||||
import basicHelp from './src/BasicHelp.vue';
|
||||
|
||||
export const BasicArrow = withInstall(basicArrow);
|
||||
export const BasicTitle = withInstall(basicTitle);
|
||||
export const BasicHelp = withInstall(basicHelp);
|
||||
117
web-vue/packages/core/components/Basic/src/BasicArrow.vue
Normal file
117
web-vue/packages/core/components/Basic/src/BasicArrow.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author Vben、ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<span :class="getClass" @click="handleClick" @dblclick="handleDblClick">
|
||||
<Spin v-if="props.loading" size="small" :style="$attrs.iconStyle" />
|
||||
<Icon v-else :icon="getIcon" :style="$attrs.iconStyle" />
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { Spin } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* Arrow expand state
|
||||
*/
|
||||
expand: { type: Boolean },
|
||||
/**
|
||||
* Arrow up by default
|
||||
*/
|
||||
up: { type: Boolean },
|
||||
/**
|
||||
* Arrow down by default
|
||||
*/
|
||||
down: { type: Boolean },
|
||||
/**
|
||||
* Cancel padding/margin for inline
|
||||
*/
|
||||
inset: { type: Boolean },
|
||||
/**
|
||||
* 是否是叶子节点
|
||||
*/
|
||||
leaf: { type: Boolean },
|
||||
/**
|
||||
* 是否双箭头图标
|
||||
*/
|
||||
double: { type: Boolean },
|
||||
/**
|
||||
* 是否加载状态
|
||||
*/
|
||||
loading: { type: Boolean, defaultValue: false },
|
||||
// eslint check
|
||||
onClick: { type: Function, default: (_e: Event) => {} },
|
||||
onDblclick: { type: Function, default: (_e: Event) => {} },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'dblclick']);
|
||||
|
||||
const { prefixCls } = useDesign('basic-arrow');
|
||||
|
||||
const getIcon = computed(() => {
|
||||
const { leaf, double } = props;
|
||||
return leaf ? 'i-radix-icons:dot' : double ? 'i-ant-design:double-right-outlined' : 'i-ion:chevron-forward';
|
||||
});
|
||||
|
||||
// get component class
|
||||
const getClass = computed(() => {
|
||||
const { expand, up, down, inset } = props;
|
||||
return [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}--active`]: expand,
|
||||
up,
|
||||
inset,
|
||||
down,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
function handleClick(event) {
|
||||
emit('click', event);
|
||||
}
|
||||
|
||||
function handleDblClick(event) {
|
||||
emit('dblclick', event);
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'jeesite-basic-arrow';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transform: rotate(0deg);
|
||||
transition: all 0.3s ease 0.1s;
|
||||
transform-origin: center center;
|
||||
|
||||
&--active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.inset {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&.up {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.up.@{prefix-cls}--active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.down.@{prefix-cls}--active {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
web-vue/packages/core/components/Basic/src/BasicHelp.vue
Normal file
119
web-vue/packages/core/components/Basic/src/BasicHelp.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script lang="tsx">
|
||||
import type { CSSProperties, PropType } from 'vue';
|
||||
import { defineComponent, computed, unref } from 'vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { getPopupContainer } from '@jeesite/core/utils';
|
||||
import { isString, isArray } from '@jeesite/core/utils/is';
|
||||
import { getSlot } from '@jeesite/core/utils/helper/tsxHelper';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
|
||||
const props = {
|
||||
/**
|
||||
* Help text max-width
|
||||
* @default: 600px
|
||||
*/
|
||||
maxWidth: { type: String, default: '600px' },
|
||||
/**
|
||||
* Whether to display the serial number
|
||||
* @default: false
|
||||
*/
|
||||
showIndex: { type: Boolean },
|
||||
/**
|
||||
* Help text font color
|
||||
* @default: #ffffff
|
||||
*/
|
||||
color: { type: String, default: '#ffffff' },
|
||||
/**
|
||||
* Help text font size
|
||||
* @default: 14px
|
||||
*/
|
||||
fontSize: { type: String, default: '14px' },
|
||||
/**
|
||||
* Help text list
|
||||
*/
|
||||
placement: { type: String, default: 'right' },
|
||||
/**
|
||||
* Help text list
|
||||
*/
|
||||
text: { type: [Array, String] as PropType<string[] | string> },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicHelp',
|
||||
components: { Icon, Tooltip },
|
||||
props,
|
||||
setup(props, { slots }) {
|
||||
const { prefixCls } = useDesign('basic-help');
|
||||
|
||||
const getTooltipStyle = computed((): CSSProperties => ({ color: props.color, fontSize: props.fontSize }));
|
||||
|
||||
const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
|
||||
|
||||
function renderTitle() {
|
||||
const textList = props.text;
|
||||
|
||||
if (isString(textList)) {
|
||||
return <p>{textList}</p>;
|
||||
}
|
||||
|
||||
if (isArray(textList)) {
|
||||
return textList.map((text, index) => {
|
||||
return (
|
||||
<p key={text}>
|
||||
<>
|
||||
{props.showIndex ? `${index + 1}. ` : ''}
|
||||
{text}
|
||||
</>
|
||||
</p>
|
||||
);
|
||||
});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<Tooltip
|
||||
overlayClassName={`${prefixCls}__wrap`}
|
||||
title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
|
||||
autoAdjustOverflow={true}
|
||||
overlayStyle={unref(getOverlayStyle)}
|
||||
placement={props.placement as 'right'}
|
||||
getPopupContainer={() => getPopupContainer()}
|
||||
>
|
||||
<span class={prefixCls}>{getSlot(slots) || <Icon icon="i-ant-design:question-circle-outlined" />}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'jeesite-basic-help';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: @text-color-help-dark;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-label .@{prefix-cls} {
|
||||
vertical-align: baseline;
|
||||
margin-left: -7px;
|
||||
margin-right: -4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
76
web-vue/packages/core/components/Basic/src/BasicTitle.vue
Normal file
76
web-vue/packages/core/components/Basic/src/BasicTitle.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<span :class="getClass">
|
||||
<slot></slot>
|
||||
<BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import { useSlots, computed } from 'vue';
|
||||
import BasicHelp from './BasicHelp.vue';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* Help text list or string
|
||||
* @default: ''
|
||||
*/
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* Whether the color block on the left side of the title
|
||||
* @default: false
|
||||
*/
|
||||
span: { type: Boolean },
|
||||
/**
|
||||
* Whether to default the text, that is, not bold
|
||||
* @default: false
|
||||
*/
|
||||
normal: { type: Boolean },
|
||||
});
|
||||
|
||||
const { prefixCls } = useDesign('basic-title');
|
||||
const slots = useSlots();
|
||||
const getClass = computed(() => [
|
||||
prefixCls,
|
||||
{ [`${prefixCls}-show-span`]: props.span && slots.default },
|
||||
{ [`${prefixCls}-normal`]: props.normal },
|
||||
]);
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'jeesite-basic-title';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding-left: 3px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: fade(@text-color-base, 75);
|
||||
//cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&-normal {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-show-span::before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
background-color: @primary-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-help {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user