Skip to content

Commit

Permalink
feat: 新增columnTip组件
Browse files Browse the repository at this point in the history
  • Loading branch information
nancyzhan committed Aug 16, 2024
1 parent cd077f2 commit a078cd6
Show file tree
Hide file tree
Showing 9 changed files with 116 additions and 3 deletions.
18 changes: 18 additions & 0 deletions docs/.vitepress/components/BColumnTip/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# BTagsPanel
图标悬浮提示说明

## 组件注册

```js
import { BColumnTip } from '@fesjs/traction-widget';
app.use(BColumnTip);
```
## 代码演示
### 基础用法
使用场景:
1. 常规文字后追加
2. 在表格的列名后追加,说明列名含义

--USE

--CODE
43 changes: 43 additions & 0 deletions docs/.vitepress/components/BColumnTip/use.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<span>
一个表格
<BColumnTip tipText="一个表格的描述"></BColumnTip>
</span>
<f-table :data="tableShowLists">
<f-table-column prop="id" label="ID" :width="80" ellipsis />
<f-table-column prop="cn_name" :width="160" ellipsis>
<template #header>
中文名称
<BColumnTip :tipText="tipText"></BColumnTip>
</template>
</f-table-column>
<f-table-column prop="en_name" :width="160" ellipsis>
<template #header>
英文名称
<BColumnTip :tipText="tipTextEn"></BColumnTip>
</template>
</f-table-column>
</f-table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BColumnTip } from '@fesjs/traction-widget';
import { FTable, FTableColumn } from '@fesjs/fes-design';
console.log('columnTip 加载')
const tipText = "这是中文名称的描述"
const tipTextEn = "这是英文名称的描述这是英文名称的描述,这是英文名称的描述这是英文名称的描述,这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述"
const tableShowLists = ref([
{
id: 'id1',
cn_name: '张三',
en_name: 'zhansan'
},
{
id: 'id2',
cn_name: '李四',
en_name: 'lisi'
},
])
</script>
1 change: 1 addition & 0 deletions docs/.vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export default defineConfig({
{ text: 'BTableHeaderConfig', link: '/components/BTableHeaderConfig' },
{ text: 'BSearch', link: '/components/BSearch' },
{ text: 'BDynamicForms', link: '/components/BDynamicForms'},
{ text: 'BColumnTip', link: '/components/BColumnTip'},
]
},
{
Expand Down
26 changes: 26 additions & 0 deletions packages/traction-widget/components/ColumnTip/ColumnTip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<span class="wd-column-tip">
<FTooltip mode="popover">
<InfoCircleOutlined class="wd-hint-icon-column" />
<template #content>
<div style="width: 300px;">
{{tipText}}
</div>
</template>
</FTooltip>
</span>
</template>
<script setup>
import {
defineProps
} from 'vue';
import { InfoCircleOutlined } from '@fesjs/fes-design/icon';
import { FTooltip } from '@fesjs/fes-design';
defineProps({
tipText: {
type: String,
default: ''
}
});
</script>
9 changes: 9 additions & 0 deletions packages/traction-widget/components/ColumnTip/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { withInstall } from '../_util/withInstall';
import ColumnTip from './ColumnTip.vue';

import type { SFCWithInstall } from '../_util/interface';

type ColumnTipType = SFCWithInstall<typeof ColumnTip>;
export const BColumnTip = withInstall<ColumnTipType>(ColumnTip as ColumnTipType);

export default BColumnTip;
10 changes: 10 additions & 0 deletions packages/traction-widget/components/ColumnTip/style/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.wd-column-tip {
position:relative;
.wd-hint-icon-column {
position: absolute;
transform: translateY(-50%);
top: 55%;
color: #B7B7BC;
margin: 0px 6px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './index.less';
1 change: 1 addition & 0 deletions packages/traction-widget/components/_style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ import './TablePage/style';
import './TagSelector/style';
import './VerticalLayout/style';
import './TagsPanel/style';
import './ColumnTip/style';
10 changes: 7 additions & 3 deletions packages/traction-widget/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { BSearch } from './Search';
import { BTablePage } from './TablePage';
import { BNavBar } from './NavBar';
import { BNavHeader } from './NavHeader';
import { BColumnTip } from './ColumnTip';

const components = [
BTagsPanel,
Expand All @@ -19,7 +20,8 @@ const components = [
BSearch,
BTablePage,
BNavBar,
BNavHeader
BNavHeader,
BColumnTip
];

const install = (app: any): any => {
Expand All @@ -46,7 +48,8 @@ export {
BSearch,
BTablePage,
BNavBar,
BNavHeader
BNavHeader,
BColumnTip
};

export default {
Expand All @@ -66,5 +69,6 @@ export default {
BSearch,
BTablePage,
BNavBar,
BNavHeader
BNavHeader,
BColumnTip
};

0 comments on commit a078cd6

Please sign in to comment.