-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
116 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
packages/traction-widget/components/ColumnTip/ColumnTip.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
10
packages/traction-widget/components/ColumnTip/style/index.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import './index.less'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters