Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(read-tip): 修复eslint问题 #396

Merged
merged 1 commit into from
Apr 6, 2022
Merged

chore(read-tip): 修复eslint问题 #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 20 additions & 22 deletions packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { mount } from '@vue/test-utils';
import { ReadTip, } from '../index';
import { nextTick } from 'vue';
import TipsTemplate from '../src/read-tip-template';


Expand All @@ -27,15 +25,15 @@ describe('read-tip test', () => {
title: 'Name: Jack',
content: 'This is Jack\'s profile',
};
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
}
});

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.title);
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).toContain(defaultTemplateProps.title);

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.content);
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).toContain(defaultTemplateProps.content);


});
Expand All @@ -53,13 +51,14 @@ describe('read-tip test', () => {
title: 'Name: Jack',
content: 'This is Jack\'s profile',
};
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
}
});

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('read-tip-container ' + defaultTemplateProps.position);
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML)
.toContain('read-tip-container ' + defaultTemplateProps.position);

});
});
Expand All @@ -74,17 +73,17 @@ describe('read-tip test', () => {
title: 'Name: Jack',
content: 'This is Jack\'s profile',
};
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
}
});

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toBe('');
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).toBe('');

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.title);
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).not.toContain(defaultTemplateProps.title);

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.content);
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).not.toContain(defaultTemplateProps.content);


});
Expand All @@ -98,7 +97,7 @@ describe('read-tip test', () => {
selector: '#readtip-target',
contentTemplate: true
};
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
},
Expand All @@ -107,24 +106,23 @@ describe('read-tip test', () => {
}
});

expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('<div> I am test </div>');
expect(document.querySelector(defaultTemplateProps.selector)?.innerHTML).toContain('<div> I am test </div>');


});

it('read-tip dataFn', async () => {
// 基础用法

function getDataFromDB({ element, rule }) {
return { content: element.innerHTML, title: rule.key };
}
const defaultTemplateProps = {
appendToBody: false,
selector: '#readtip-target',
dataFn: getDataFromDB,
key: 'GetData'
};
function getDataFromDB({ element, rule }) {
return { content: element.innerHTML, title: rule.key };
}
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
},
Expand All @@ -135,6 +133,9 @@ describe('read-tip test', () => {
});

it('read-tip overlayClassName', async () => {
function getDataFromDB({ element, rule }) {
return { content: element.innerHTML, title: rule.key };
}
// 基础用法
const defaultTemplateProps = {
appendToBody: false,
Expand All @@ -143,10 +144,7 @@ describe('read-tip test', () => {
key: 'GetData',
overlayClassName: 'red'
};
function getDataFromDB({ element, rule }) {
return { content: element.innerHTML, title: rule.key };
}
const wrapper = mount(TipsTemplate, {
mount(TipsTemplate, {
props: {
defaultTemplateProps
},
Expand Down
9 changes: 5 additions & 4 deletions packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { CSSProperties } from 'vue';
import { defineComponent, reactive, ref, onMounted, Teleport, toRefs } from 'vue';
import { readTipProps, ReadTipProps, DefaultTemplateProps } from './read-tip-types';
import './read-tip.scss';
Expand All @@ -11,7 +12,7 @@ export default defineComponent({
let rule: DefaultTemplateProps = defaultTemplateProps.value;
const query = rule?.id ? `#${rule.id}` : rule.selector;

const styles: any = reactive({});
const styles: CSSProperties = reactive({});
if (typeof rule.dataFn === 'function') {
const dataFn = rule.dataFn({ element: document.querySelector(query), rule });
rule = { ...rule, ...dataFn };
Expand All @@ -27,7 +28,7 @@ export default defineComponent({
return deviationConstant;
};
onMounted(() => {
const domBounding = document.querySelector(query).getBoundingClientRect();
const domBounding = document.querySelector(query)?.getBoundingClientRect();
const { width, height } = domBounding;
const distance = 10;
let positionTop = 0;
Expand All @@ -38,7 +39,7 @@ export default defineComponent({


let positionLeft = 0;
const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect();
const targetDom = document.querySelector('.read-tip-container')?.getBoundingClientRect();
if (rule.appendToBody) {
positionTop = domBounding.y + document.documentElement.scrollTop;
positionLeft = domBounding.x;
Expand Down Expand Up @@ -72,7 +73,7 @@ export default defineComponent({
>
<span class='after' ></span>
{
rule.contentTemplate ? ctx.slots?.default() :
rule.contentTemplate ? ctx.slots?.default?.() :
(
<>
<div class="title">
Expand Down
61 changes: 31 additions & 30 deletions packages/devui-vue/devui/read-tip/src/read-tip-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
import type { PropType, ExtractPropTypes } from 'vue';

export const readTipProps = {
readTipOptions: {
type: Object as PropType<ReadTipOptions>
},
defaultTemplateProps: {
type: Object as PropType<DefaultTemplateProps>
}
} as const;

export type Position = 'top' | 'left' | 'right' | 'bottom';
export type Trigger = 'hover' | 'click';

export interface ReadTipRule {
id?: string;
key?: string;
selector: string | null;
trigger?: Trigger;
title?: string;
content?: string;
showAnimate?: boolean;
mouseenterTime?: number;
mouseleaveTime?: number;
position?: Position;
overlayClassName?: string;
appendToBody?: boolean;
status?: boolean;
// customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容
dataFn?: ({
element,
rule: ReadTipRule,
}) => { title?: string; content?: string };
}

export type ReadTipRules = ReadTipRule | ReadTipRule[];

export type DefaultTemplateProps = {
title?: string;
content?: string;
Expand Down Expand Up @@ -41,26 +55,13 @@ export interface ReadTipOptions {

}

export type ReadTipRules = ReadTipRule | ReadTipRule[];

export interface ReadTipRule {
key?: string;
selector: string;
trigger?: Trigger;
title?: string;
content?: string;
showAnimate?: boolean;
mouseenterTime?: number;
mouseleaveTime?: number;
position?: Position;
overlayClassName?: string;
appendToBody?: boolean;
// customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容
dataFn?: ({
element,
rule: ReadTipRule,
}) => { title?: string; content?: string };
}

export const readTipProps = {
readTipOptions: {
type: Object as PropType<ReadTipOptions>
},
defaultTemplateProps: {
type: Object as PropType<DefaultTemplateProps>
}
} as const;

export type ReadTipProps = ExtractPropTypes<typeof readTipProps>;
Loading