forked from opentiny/tiny-vue
feat(float-button): [float-button] add float-button (#1394)
* feat(float-button): [float-button] add float-button * fix(float-button):[float-button] remove mobile * delete token.ts
This commit is contained in:
张烟铃
GitHub
parent
bf56cc02ac
commit
1019e574e2
|
|
@ -547,6 +547,7 @@
|
|||
"code"
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"login": "Floyd-bit",
|
||||
"name": "Floyd",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="parent" ref="dom">
|
||||
<div class="child"></div>
|
||||
<tiny-float-button
|
||||
:back-top="true"
|
||||
:visibility-height="199"
|
||||
bottom="-200px"
|
||||
right="0"
|
||||
trigger=""
|
||||
:element="dom"
|
||||
:icon="IconDel"
|
||||
>
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const IconDel = iconDel()
|
||||
const dom = ref(null)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.child {
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="parent" ref="dom">
|
||||
<div class="child"></div>
|
||||
<tiny-float-button
|
||||
:back-top="true"
|
||||
:visibility-height="199"
|
||||
bottom="-200px"
|
||||
right="0"
|
||||
trigger=""
|
||||
:element="dom"
|
||||
:icon="IconDel"
|
||||
>
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dom: null,
|
||||
IconDel: iconDel()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dom = this.$refs.dom
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.child {
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
|
||||
<tiny-float-button
|
||||
type="primary"
|
||||
:icon="IconEdit"
|
||||
circle
|
||||
bottom="20px"
|
||||
right="60px"
|
||||
shape="square"
|
||||
></tiny-float-button>
|
||||
|
||||
<tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
|
||||
<tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
|
||||
<tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
|
||||
|
||||
const IconDel = iconDel()
|
||||
const IconEdit = iconEdit()
|
||||
const IconMail = iconMail()
|
||||
const IconStarO = iconStarO()
|
||||
const IconSearch = iconSearch()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
|
||||
<tiny-float-button
|
||||
type="primary"
|
||||
:icon="IconEdit"
|
||||
circle
|
||||
bottom="20px"
|
||||
right="60px"
|
||||
shape="square"
|
||||
></tiny-float-button>
|
||||
|
||||
<tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
|
||||
<tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
|
||||
<tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FloatButton } from '@opentiny/vue'
|
||||
import { IconDel, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatButton: FloatButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconDel: IconDel(),
|
||||
IconEdit: IconEdit(),
|
||||
IconMail: IconMail(),
|
||||
IconStarO: IconStarO(),
|
||||
IconSearch: IconSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
|
||||
const IconDel = iconDel()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
}
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconDel: iconDel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
}
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
|
||||
展开</tiny-float-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
|
||||
展开</tiny-float-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
TinyFloatButton
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button bottom="-15px" right="100px" trigger="click" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
<tiny-float-button bottom="-15px" right="180px" trigger="hover" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
<tiny-float-button bottom="-15px" right="280px" trigger="click" :open="true" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0px" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
|
||||
const IconDel = iconDel()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="parent">
|
||||
<tiny-float-button bottom="-15px" right="100px" trigger="click" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
<tiny-float-button bottom="-15px" right="180px" trigger="hover" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
<tiny-float-button bottom="-15px" right="280px" trigger="click" :open="true" :icon="IconDel" type="primary">
|
||||
<tiny-float-button bottom="0px" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
|
||||
</tiny-float-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FloatButton as TinyFloatButton } from '@opentiny/vue'
|
||||
import { iconDel } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconDel: iconDel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tiny-float-button {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: FloatButton 悬浮按钮
|
||||
---
|
||||
|
||||
# FloatButton 悬浮按钮
|
||||
|
||||
<div>悬浮在固定位置的按钮。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: FloatButton
|
||||
---
|
||||
|
||||
# FloatButton
|
||||
|
||||
<div>A button that hovers in a fixed position.</div>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>type</code> 设置按钮类型， <code>shape</code>设置按钮的形状</p>',
|
||||
'en-US': '<p>The type of the button is set by type, and the shape of the button is set by shape.</p>'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'reset-time',
|
||||
'name': { 'zh-CN': '防止重复点击', 'en-US': 'Prevent duplicate clicks' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>reset-time</code> 设置单击后按钮禁用的时长，默认禁用时长为 1000 毫秒，可用于防止按钮连续点击出现表单重复提交的问题。</p>',
|
||||
'en-US':
|
||||
'<p>You can use the <code>reset-time</code> to set the duration for which the button is disabled. The default duration is 1000 ms. This parameter can be used to prevent repeated submission of the form when you click the button continuously. </p>'
|
||||
},
|
||||
'codeFiles': ['reset-time.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'icon',
|
||||
'name': { 'zh-CN': '图标按钮', 'en-US': 'Icon Button' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>icon</code> 设置按钮展示图标， 接收一个图标组件。</p><div class="tip custom-block"><p class="custom-block-title">Icon 图标用法</p><p>先从 <code>@opentiny/vue-icon</code> 中导入需要的 Icon，执行Icon函数得到Icon组件。然后在模板中通过 <code>icon</code> 属性进行引用。</p>',
|
||||
'en-US':
|
||||
'<p>Display icons and receive an icon component through the <code>icon</code> settings button</ p> <div class="tip custom block"><p class="custom block title">Icon icon usage</p><p>First, import the required Icon from <code>@ opentiny/vue icon</code> , and execute the Icon function to obtain the Icon component. Then refer to it in the template through the <code>icon</code> attribute.</p>'
|
||||
},
|
||||
'codeFiles': ['icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'trigger',
|
||||
'name': { 'zh-CN': '菜单模式', 'en-US': 'Menu mode' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>设置<code>trigger</code> 属性即可开启菜单模式。设置<code>open</code>为<code>true</code>即可手动打开菜单.</p>',
|
||||
'en-US':
|
||||
'<p>Set the trigger property to turn on the menu mode.Set <code>open</code> to <code>true</code> to manually open the menu.</p>'
|
||||
},
|
||||
'codeFiles': ['trigger.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'backTop',
|
||||
'name': { 'zh-CN': '回到顶部', 'en-US': 'Back to top' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>设置<code>backtop</code> 属性即可实现页面滚回顶部。<code>element</code>赋值为滚动元素。</p>',
|
||||
'en-US':
|
||||
'<p>Set the backtop attribute to roll the page back to the top. element is assigned as a scrolling element.</p>'
|
||||
},
|
||||
'codeFiles': ['backTop.vue']
|
||||
},
|
||||
|
||||
{
|
||||
'demoId': 'jump',
|
||||
'name': { 'zh-CN': '跳转页面', 'en-US': 'Jump to the page' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可以设置<code>href</code>和<code>target</code>两个属性，按钮点击跳转页面。</p>',
|
||||
'en-US': '<p>You can set the two properties of href and target, and click the button to jump to the page.</p>'
|
||||
},
|
||||
'codeFiles': ['jump.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'button',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'IButtonType',
|
||||
'typeAnchorName': 'IButtonType',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
|
||||
'en-US': 'Display different states of buttons, set to text to display as text buttons'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'description',
|
||||
'type': 'string',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '按钮显示的文本',
|
||||
'en-US': 'Set the text displayed by the button'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': 'Component',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '按钮展示的图标，接收为Icon组件',
|
||||
'en-US': 'The icon displayed by the button is received as an Icon component'
|
||||
},
|
||||
'demoId': 'icon'
|
||||
},
|
||||
{
|
||||
'name': 'reset-time',
|
||||
'type': 'number',
|
||||
'defaultValue': '1000',
|
||||
'desc': {
|
||||
'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
|
||||
'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
|
||||
},
|
||||
'demoId': 'reset-time'
|
||||
},
|
||||
{
|
||||
'name': 'trigger',
|
||||
'type': 'string',
|
||||
'defaultValue': 'click',
|
||||
'desc': {
|
||||
'zh-CN': '设置菜单触发模式。',
|
||||
'en-US': 'Set the menu trigger mode.'
|
||||
},
|
||||
'demoId': 'trigger'
|
||||
},
|
||||
{
|
||||
'name': 'open',
|
||||
'type': 'boolean',
|
||||
'defaultValue': false,
|
||||
'desc': {
|
||||
'zh-CN': '设置菜单是否打开。',
|
||||
'en-US': 'Whether the settings menu opens.'
|
||||
},
|
||||
'demoId': 'trigger'
|
||||
},
|
||||
{
|
||||
'name': 'shape',
|
||||
'type': "'circle'|'square'",
|
||||
'defaultValue': 'circle',
|
||||
'desc': {
|
||||
'zh-CN': '设置按钮形状。',
|
||||
'en-US': 'Set Button shape.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'backTop',
|
||||
'type': 'boolean',
|
||||
'defaultValue': false,
|
||||
'desc': {
|
||||
'zh-CN': '设置是否是回到顶部按钮。',
|
||||
'en-US': 'Set whether it is a back-to-top button.'
|
||||
},
|
||||
'demoId': 'backTop'
|
||||
},
|
||||
|
||||
{
|
||||
'name': 'element',
|
||||
'type': 'HTMLElement',
|
||||
'defaultValue': 'document.body',
|
||||
'desc': {
|
||||
'zh-CN': '当backTop设置为true时，此属性设置滚动元素。',
|
||||
'en-US': 'When backTop is set to true, this property sets the scrolling element.'
|
||||
},
|
||||
'demoId': 'backTop'
|
||||
},
|
||||
{
|
||||
'name': 'top',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '按钮与顶部的距离。',
|
||||
'en-US': 'The distance of the button from the top.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'bottom',
|
||||
'type': 'string',
|
||||
'defaultValue': '20px',
|
||||
'desc': {
|
||||
'zh-CN': '按钮与底部的距离。',
|
||||
'en-US': 'The distance of the button from the bottom.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'left',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '按钮与左边的距离。',
|
||||
'en-US': 'The distance of the button from the left.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'right',
|
||||
'type': 'string',
|
||||
'defaultValue': '20px',
|
||||
'desc': {
|
||||
'zh-CN': '按钮与右边的距离。',
|
||||
'en-US': 'The distance of the button from the right.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'href',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '按钮点击后跳转的页面。',
|
||||
'en-US': 'button to jump to the page.'
|
||||
},
|
||||
'demoId': 'jump'
|
||||
},
|
||||
{
|
||||
'name': 'target',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '相当于<code>a</code> 标签的 <code>target</code> 属性，<code>href</code> 存在时生效。',
|
||||
'en-US': 'The target attribute equivalent to the A tag, which takes effect when the href exists.'
|
||||
},
|
||||
'demoId': 'jump'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'click',
|
||||
'type': '(event: PointEvent) => void',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '当按钮被点击时触发的回调函数',
|
||||
'en-US': 'Sets the callback function triggered when a button is clicked'
|
||||
},
|
||||
'demoId': 'click'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '默认插槽，自定义按钮展开时的内容',
|
||||
'en-US': 'Default slot, customize what the button is when expanded'
|
||||
},
|
||||
'demoId': 'open'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IButtonType',
|
||||
type: 'interface',
|
||||
code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -225,7 +225,8 @@ export const cmpMenus = [
|
|||
{ 'nameCn': '弹出框', 'name': 'Popover', 'key': 'popover' },
|
||||
{ 'nameCn': '气泡确认框组件', 'name': 'Popconfirm', 'key': 'popconfirm' },
|
||||
{ 'nameCn': '模态框', 'name': 'Modal', 'key': 'modal' },
|
||||
{ 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' }
|
||||
{ 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' },
|
||||
{ 'name': 'FloatButton', 'nameCn': '悬浮按钮', 'key': 'float-button' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1413,6 +1413,14 @@
|
|||
"pc"
|
||||
]
|
||||
},
|
||||
"FloatButton": {
|
||||
"path": "vue/src/float-button/index.ts",
|
||||
"type": "component",
|
||||
"exclude": false,
|
||||
"mode": [
|
||||
"pc"
|
||||
]
|
||||
},
|
||||
"FloatbarPc": {
|
||||
"path": "vue/src/floatbar/src/pc.vue",
|
||||
"type": "template",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
import type { IFloatButtonRenderlessParams, IFloatButtonState } from '@/types'
|
||||
|
||||
export const handleScroll = ({ props, state }: Pick<IFloatButtonRenderlessParams, 'props' | 'state' | 'vm'>) => {
|
||||
if (props.element) {
|
||||
const beforeHeight = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (beforeHeight <= props.visibilityHeight) {
|
||||
state.show = false
|
||||
}
|
||||
props.element.onscroll = function () {
|
||||
state.show = true
|
||||
const height = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (height <= props.visibilityHeight) {
|
||||
state.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const handleClick =
|
||||
({ emit, props, state }: Pick<IFloatButtonRenderlessParams, 'emit' | 'props' | 'state'>) =>
|
||||
(event: MouseEvent): void => {
|
||||
if (props.trigger === 'click' && props.resetTime > 0 && !props.backTop) {
|
||||
state.disabled = true
|
||||
state.open = !state.open
|
||||
state.timer = window.setTimeout(() => {
|
||||
state.disabled = false
|
||||
}, props.resetTime)
|
||||
}
|
||||
if (!props.trigger && (props.href || props.target) && !props.backTop) {
|
||||
window.open(props.href, props.target)
|
||||
}
|
||||
if (props.backTop) {
|
||||
props.element?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
emit('click', event)
|
||||
}
|
||||
|
||||
export const clearTimer = (state: IFloatButtonState) => (): void => clearTimeout(state.timer)
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
import type {
|
||||
ISharedRenderlessParamHooks,
|
||||
IFloatButtonProps,
|
||||
IFloatButtonApi,
|
||||
IFloatButtonRenderlessParamUtils,
|
||||
IFloatButtonState
|
||||
} from '@/types'
|
||||
|
||||
import { handleClick, clearTimer, handleScroll } from './index'
|
||||
|
||||
export const api = ['state', 'handleClick']
|
||||
const watchVariable = ({ watch, props, state, nextTick, vm, emit }) => {
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(value) => {
|
||||
state.disabled = value
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => props.open,
|
||||
(value) => {
|
||||
state.open = value
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => state.open,
|
||||
(value) => {
|
||||
if (value) {
|
||||
let beforeRootDom = vm.$refs.tinyFloatButton
|
||||
let beforeRootDomStyle = beforeRootDom?.getClientRects()[0] || 0
|
||||
nextTick(() => {
|
||||
if (!beforeRootDomStyle) {
|
||||
beforeRootDom = vm.$refs.tinyFloatButton
|
||||
beforeRootDomStyle = beforeRootDom.getClientRects()[0]
|
||||
}
|
||||
const dom = vm.$refs.tinyFloatButtonOpen
|
||||
const style = `left:0px;bottom:${beforeRootDomStyle.height + 4 + 'px'};`
|
||||
dom?.setAttribute('style', style)
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => props.trigger,
|
||||
(value) => {
|
||||
if (value === 'hover' && !state.hasEvent) {
|
||||
nextTick(() => {
|
||||
const dom = vm.$refs.tinyFloatButton
|
||||
dom.addEventListener('mouseover', (event: MouseEvent) => {
|
||||
state.open = true
|
||||
emit('mouseover', event)
|
||||
})
|
||||
dom.addEventListener('mouseout', (event: MouseEvent) => {
|
||||
state.open = false
|
||||
emit('mouseout', event)
|
||||
})
|
||||
state.hasEvent = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => props.backTop,
|
||||
(value) => {
|
||||
if (value) {
|
||||
handleScroll({ props, vm, state })
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => props.element,
|
||||
() => {
|
||||
if (props.backTop) {
|
||||
handleScroll({ props, vm, state })
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
export const renderless = (
|
||||
props: IFloatButtonProps,
|
||||
{ computed, onBeforeUnmount, reactive, watch, inject, nextTick }: ISharedRenderlessParamHooks,
|
||||
{ emit, parent, vm }: IFloatButtonRenderlessParamUtils
|
||||
) => {
|
||||
parent.tinyForm = parent.tinyForm || inject('form', null)
|
||||
const state: IFloatButtonState = reactive({
|
||||
timer: 0,
|
||||
disabled: props.disabled,
|
||||
open: props.open,
|
||||
hasEvent: false,
|
||||
show: true,
|
||||
formDisabled: computed(() => (parent.tinyForm || {}).disabled),
|
||||
buttonDisabled: computed(
|
||||
() => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
|
||||
)
|
||||
})
|
||||
|
||||
watchVariable({ props, vm, watch, state, nextTick, emit })
|
||||
const api: IFloatButtonApi = {
|
||||
state,
|
||||
clearTimer: clearTimer(state),
|
||||
handleClick: handleClick({ emit, props, state })
|
||||
}
|
||||
|
||||
onBeforeUnmount(api.clearTimer)
|
||||
|
||||
return api
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import type { ComputedRef, ExtractPropTypes } from 'vue'
|
||||
import type { floatButtonProps } from '@/float-button/src'
|
||||
import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
|
||||
import type { clearTimer, handleClick } from '../src/float-button'
|
||||
|
||||
export interface IFloatButtonState {
|
||||
timer: number
|
||||
disabled: boolean
|
||||
open: Boolean
|
||||
show: Boolean
|
||||
hasEvent: Boolean
|
||||
formDisabled: ComputedRef<boolean>
|
||||
buttonDisabled: ComputedRef<boolean>
|
||||
}
|
||||
|
||||
export type IFloatButtonRenderlessParams = ISharedRenderlessFunctionParams<never> & {
|
||||
state: IFloatButtonState
|
||||
props: IFloatButtonProps
|
||||
}
|
||||
|
||||
export type IFloatButtonProps = ExtractPropTypes<typeof floatButtonProps>
|
||||
|
||||
export interface IFloatButtonApi {
|
||||
state: IFloatButtonState
|
||||
clearTimer: ReturnType<typeof clearTimer>
|
||||
handleClick: ReturnType<typeof handleClick>
|
||||
}
|
||||
|
||||
export type IFloatButtonRenderlessParamUtils = ISharedRenderlessParamUtils<never>
|
||||
|
|
@ -54,6 +54,7 @@ export * from './checkbox-group.type'
|
|||
export * from './col.type'
|
||||
export * from './collapse.type'
|
||||
export * from './collapse-item.type'
|
||||
export * from './float-button.type'
|
||||
export * from './column-list-group.type'
|
||||
export * from './column-list-item.type'
|
||||
export * from './common.type'
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export const tinyFloatButtonAuroraTheme = {}
|
||||
|
|
@ -0,0 +1,512 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../mixins/button.less';
|
||||
@import '../custom.less';
|
||||
@import './vars.less';
|
||||
|
||||
@float-button-prefix-cls: ~'@{css-prefix}float-button';
|
||||
@svg-prefix-cls: ~'@{css-prefix}svg';
|
||||
|
||||
.@{float-button-prefix-cls} {
|
||||
.component-css-vars-float-button();
|
||||
position: fixed;
|
||||
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
line-height: calc(var(--ti-float-button-size-normal-height) - 2px);
|
||||
color: var(--ti-float-button-normal-text-color);
|
||||
fill: var(--ti-float-button-normal-text-color);
|
||||
font-size: var(--ti-float-button-font-size);
|
||||
min-width: var(--ti-float-button-size-normal-min-width);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-width: var(--ti-float-button-border-width);
|
||||
border-style: var(--ti-float-button-border-style);
|
||||
border-color: var(--ti-float-button-normal-border-color);
|
||||
border-image: initial;
|
||||
border-radius: var(--ti-float-button-border-radius);
|
||||
background: var(--ti-float-button-normal-background-color);
|
||||
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
transition:
|
||||
border 0.3s ease 0s,
|
||||
color 0.3s ease 0s,
|
||||
background 0.3s ease 0s;
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
z-index: 999;
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
&>img {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&.is-only-icon {
|
||||
min-width: var(--ti-float-button-only-icon-min-width);
|
||||
padding: 0 var(--ti-float-button-only-icon-padding-horizontal);
|
||||
border-radius: var(--ti-float-button-only-icon-border-radius);
|
||||
border-color: var(--ti-float-button-only-icon-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ti-float-button-only-icon-hover-border-color);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
border-color: var(--ti-float-button-only-icon-disabled-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ti-float-button-only-icon-disabled-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.button-color(var(--ti-float-button-normal-hover-text-color),
|
||||
var(--ti-float-button-normal-hover-border-color),
|
||||
var(--ti-float-button-normal-hover-bg-color));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
.button-color(var(--ti-float-button-normal-active-text-color),
|
||||
var(--ti-float-button-normal-active-border-color),
|
||||
var(--ti-float-button-normal-active-bg-color));
|
||||
}
|
||||
|
||||
&.is-ghost {
|
||||
background-color: transparent;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
.button-color(var(--ti-float-button-ghost-hover-text-color),
|
||||
var(--ti-float-button-ghost-hover-border-color),
|
||||
transparent);
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:focus,
|
||||
&.is-disabled:hover {
|
||||
.button-color(var(--ti-float-button-ghost-disabled-text-color),
|
||||
var(--ti-float-button-ghost-disabled-border-color),
|
||||
transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:focus,
|
||||
&.is-disabled:hover {
|
||||
cursor: not-allowed;
|
||||
.button-color(var(--ti-float-button-normal-disabled-text-color),
|
||||
var(--ti-float-button-normal-disabled-border-color),
|
||||
var(--ti-float-button-normal-disabled-bg-color));
|
||||
}
|
||||
|
||||
&+& {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
pointer-events: none;
|
||||
overflow: initial;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: inherit;
|
||||
background-color: var(--ti-float-button-loading-bg-color);
|
||||
}
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-float-button-info-text-color);
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls}--default {
|
||||
border-radius: 100%;
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-float-button-normal-text-color);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:not(.is-circle) {
|
||||
.@{svg-prefix-cls}.is-text {
|
||||
margin-right: var(--ti-float-button-text-has-svg-icon-margin-right);
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
.@{svg-prefix-cls} {
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 50%;
|
||||
min-width: var(--ti-float-button-size-normal-height);
|
||||
min-height: var(--ti-float-button-size-normal-height);
|
||||
line-height: 1;
|
||||
padding: var(--ti-float-button-size-normal-padding);
|
||||
|
||||
&.is-hide-boder {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-circle&--large {
|
||||
.button-circle-size(var(--ti-float-button-size-large-height),
|
||||
var(--ti-float-button-size-large-padding));
|
||||
}
|
||||
|
||||
&.is-circle&--medium {
|
||||
.button-circle-size(var(--ti-float-button-size-medium-height),
|
||||
var(--ti-float-button-size-medium-padding));
|
||||
}
|
||||
|
||||
&.is-circle&--small {
|
||||
.button-circle-size(var(--ti-float-button-size-small-height),
|
||||
var(--ti-float-button-size-small-padding));
|
||||
}
|
||||
|
||||
&.is-circle&--mini {
|
||||
.button-circle-size(var(--ti-float-button-size-mini-height),
|
||||
var(--ti-float-button-size-mini-padding));
|
||||
}
|
||||
|
||||
& .@{float-button-prefix-cls}--open {
|
||||
color: var(--ti-float-button-normal-text-color);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&&--primary {
|
||||
.button-type(var(--ti-float-button-primary-text-color),
|
||||
var(--ti-float-button-primary-normal-bg-color),
|
||||
var(--ti-float-button-primary-normal-border-color),
|
||||
var(--ti-float-button-primary-hover-bg-color),
|
||||
var(--ti-float-button-primary-hover-border-color),
|
||||
var(--ti-float-button-primary-active-bg-color),
|
||||
var(--ti-float-button-primary-disabled-text-color),
|
||||
var(--ti-float-button-primary-disabled-bg-color),
|
||||
var(--ti-float-button-primary-plain-text-color),
|
||||
var(--ti-float-button-primary-plain-hover-text-color),
|
||||
var(--ti-float-button-primary-plain-bg-color),
|
||||
var(--ti-float-button-primary-plain-hover-bg-color),
|
||||
var(--ti-float-button-primary-plain-border-color),
|
||||
var(--ti-float-button-primary-plain-hover-border-color),
|
||||
var(--ti-float-button-primary-plain-disabled-bg-color),
|
||||
var(--ti-float-button-primary-disabled-border-color),
|
||||
var(--ti-float-button-primary-ghost-text-color),
|
||||
var(--ti-float-button-primary-ghost-hover-text-color),
|
||||
var(--ti-float-button-primary-ghost-disabled-text-color),
|
||||
var(--ti-float-button-primary-ghost-border-color),
|
||||
var(--ti-float-button-primary-ghost-hover-border-color),
|
||||
var(--ti-float-button-primary-ghost-disabled-border-color),
|
||||
);
|
||||
}
|
||||
|
||||
&&--success {
|
||||
.button-type(var(--ti-float-button-success-text-color),
|
||||
var(--ti-float-button-success-normal-bg-color),
|
||||
var(--ti-float-button-success-normal-border-color),
|
||||
var(--ti-float-button-success-hover-bg-color),
|
||||
var(--ti-float-button-success-hover-border-color),
|
||||
var(--ti-float-button-success-active-bg-color),
|
||||
var(--ti-float-button-success-disabled-text-color),
|
||||
var(--ti-float-button-success-disabled-bg-color),
|
||||
var(--ti-float-button-success-plain-text-color),
|
||||
var(--ti-float-button-success-plain-hover-text-color),
|
||||
var(--ti-float-button-success-plain-bg-color),
|
||||
var(--ti-float-button-success-plain-hover-bg-color),
|
||||
var(--ti-float-button-success-plain-border-color),
|
||||
var(--ti-float-button-success-plain-hover-border-color),
|
||||
var(--ti-float-button-success-plain-disabled-bg-color),
|
||||
var(--ti-float-button-success-disabled-border-color),
|
||||
var(--ti-float-button-success-ghost-text-color),
|
||||
var(--ti-float-button-success-ghost-hover-text-color),
|
||||
var(--ti-float-button-success-ghost-disabled-text-color),
|
||||
var(--ti-float-button-success-ghost-border-color),
|
||||
var(--ti-float-button-success-ghost-hover-border-color),
|
||||
var(--ti-float-button-success-ghost-disabled-border-color),
|
||||
);
|
||||
}
|
||||
|
||||
&&--warning {
|
||||
.button-type(var(--ti-float-button-warning-text-color),
|
||||
var(--ti-float-button-warning-normal-bg-color),
|
||||
var(--ti-float-button-warning-normal-border-color),
|
||||
var(--ti-float-button-warning-hover-bg-color),
|
||||
var(--ti-float-button-warning-hover-border-color),
|
||||
var(--ti-float-button-warning-active-bg-color),
|
||||
var(--ti-float-button-warning-disabled-text-color),
|
||||
var(--ti-float-button-warning-disabled-bg-color),
|
||||
var(--ti-float-button-warning-plain-text-color),
|
||||
var(--ti-float-button-warning-plain-hover-text-color),
|
||||
var(--ti-float-button-warning-plain-bg-color),
|
||||
var(--ti-float-button-warning-plain-hover-bg-color),
|
||||
var(--ti-float-button-warning-plain-border-color),
|
||||
var(--ti-float-button-warning-plain-hover-border-color),
|
||||
var(--ti-float-button-warning-plain-disabled-bg-color),
|
||||
var(--ti-float-button-warning-disabled-border-color),
|
||||
var(--ti-float-button-warning-ghost-text-color),
|
||||
var(--ti-float-button-warning-ghost-hover-text-color),
|
||||
var(--ti-float-button-warning-ghost-disabled-text-color),
|
||||
var(--ti-float-button-warning-ghost-border-color),
|
||||
var(--ti-float-button-warning-ghost-hover-border-color),
|
||||
var(--ti-float-button-warning-ghost-disabled-border-color),
|
||||
);
|
||||
}
|
||||
|
||||
&&--danger {
|
||||
.button-type(var(--ti-float-button-danger-text-color),
|
||||
var(--ti-float-button-danger-normal-bg-color),
|
||||
var(--ti-float-button-danger-normal-border-color),
|
||||
var(--ti-float-button-danger-hover-bg-color),
|
||||
var(--ti-float-button-danger-hover-border-color),
|
||||
var(--ti-float-button-danger-active-bg-color),
|
||||
var(--ti-float-button-danger-disabled-text-color),
|
||||
var(--ti-float-button-danger-disabled-bg-color),
|
||||
var(--ti-float-button-danger-plain-text-color),
|
||||
var(--ti-float-button-danger-plain-hover-text-color),
|
||||
var(--ti-float-button-danger-plain-bg-color),
|
||||
var(--ti-float-button-danger-plain-hover-bg-color),
|
||||
var(--ti-float-button-danger-plain-border-color),
|
||||
var(--ti-float-button-danger-plain-hover-border-color),
|
||||
var(--ti-float-button-danger-plain-disabled-bg-color),
|
||||
var(--ti-float-button-danger-disabled-border-color),
|
||||
var(--ti-float-button-danger-ghost-text-color),
|
||||
var(--ti-float-button-danger-ghost-hover-text-color),
|
||||
var(--ti-float-button-danger-ghost-disabled-text-color),
|
||||
var(--ti-float-button-danger-ghost-border-color),
|
||||
var(--ti-float-button-danger-ghost-hover-border-color),
|
||||
var(--ti-float-button-danger-ghost-disabled-border-color),
|
||||
);
|
||||
}
|
||||
|
||||
&&--info {
|
||||
.button-type(var(--ti-float-button-info-text-color),
|
||||
var(--ti-float-button-info-normal-bg-color),
|
||||
var(--ti-float-button-info-normal-border-color),
|
||||
var(--ti-float-button-info-hover-bg-color),
|
||||
var(--ti-float-button-info-hover-border-color),
|
||||
var(--ti-float-button-info-active-bg-color),
|
||||
var(--ti-float-button-info-disabled-text-color),
|
||||
var(--ti-float-button-info-disabled-bg-color),
|
||||
var(--ti-float-button-info-plain-text-color),
|
||||
var(--ti-float-button-info-plain-hover-text-color),
|
||||
var(--ti-float-button-info-plain-bg-color),
|
||||
var(--ti-float-button-info-plain-hover-bg-color),
|
||||
var(--ti-float-button-info-plain-border-color),
|
||||
var(--ti-float-button-info-plain-hover-border-color),
|
||||
var(--ti-float-button-info-plain-disabled-bg-color),
|
||||
var(--ti-float-button-info-disabled-border-color),
|
||||
var(--ti-float-button-info-ghost-text-color),
|
||||
var(--ti-float-button-info-ghost-hover-text-color),
|
||||
var(--ti-float-button-info-ghost-disabled-text-color),
|
||||
var(--ti-float-button-info-ghost-border-color),
|
||||
var(--ti-float-button-info-ghost-hover-border-color),
|
||||
var(--ti-float-button-info-ghost-disabled-border-color),
|
||||
);
|
||||
}
|
||||
|
||||
&&--text {
|
||||
.button-text(var(--ti-float-button-text-color),
|
||||
var(--ti-float-button-text-color-hover),
|
||||
var(--ti-float-button-text-color-active),
|
||||
var(--ti-float-button-text-color-disabled),
|
||||
var(--ti-float-button-text-hover-weight),
|
||||
);
|
||||
|
||||
&:hover {
|
||||
text-decoration: var(--ti-float-button-text-hover-text-decoration);
|
||||
}
|
||||
|
||||
&.is-disabled:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
border-radius: var(--ti-float-button-text-hover-border-radius);
|
||||
|
||||
padding: 0 var(--ti-float-button-text-padding-horizontal);
|
||||
|
||||
&:has(.@{svg-prefix-cls}) {
|
||||
padding: 0 var(--ti-float-button-text-svg-padding-horizontal);
|
||||
color: var(--ti-float-button-text-has-svg-text-color);
|
||||
}
|
||||
|
||||
&:has(.@{svg-prefix-cls}):hover {
|
||||
background: var(--ti-float-button-text-hover-bg-color);
|
||||
border-radius: var(--ti-float-button-text-hover-border-radius);
|
||||
color: var(--ti-float-button-text-has-svg-hover-text-color);
|
||||
|
||||
& .@{svg-prefix-cls} {
|
||||
fill: var(--ti-float-button-text-svg-hover-fill-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.@{svg-prefix-cls}).is-disabled {
|
||||
background: transparent;
|
||||
fill: var(--ti-float-button-text-svg-disabled-fill-color);
|
||||
color: var(--ti-float-button-text-color-disabled);
|
||||
|
||||
& .@{svg-prefix-cls} {
|
||||
fill: var(--ti-float-button-text-svg-disabled-fill-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: var(--ti-float-button-text-svg-disabled-fill-color);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-only-icon {
|
||||
&:hover {
|
||||
background: var(--ti-float-button-text-only-icon-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .@{svg-prefix-cls} {
|
||||
vertical-align: middle;
|
||||
fill: var(--ti-float-button-text-svg-fill-color);
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls}.@{float-button-prefix-cls}--large {
|
||||
.button-text-size(var(--ti-float-button-text-size-large-min-width),
|
||||
var(--ti-float-button-text-size-large-height),
|
||||
var(--ti-float-button-text-size-large-svg-width),
|
||||
var(--ti-float-button-text-size-large-svg-height));
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls}.@{float-button-prefix-cls}--medium {
|
||||
.button-text-size(var(--ti-float-button-text-size-medium-min-width),
|
||||
var(--ti-float-button-text-size-medium-height),
|
||||
var(--ti-float-button-text-size-medium-svg-width),
|
||||
var(--ti-float-button-text-size-medium-svg-height));
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls} {
|
||||
.button-text-size(var(--ti-float-button-text-size-default-min-width),
|
||||
var(--ti-float-button-text-size-default-height),
|
||||
var(--ti-float-button-text-size-default-svg-width),
|
||||
var(--ti-float-button-text-size-default-svg-height));
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls}.@{float-button-prefix-cls}--small {
|
||||
.button-text-size(var(--ti-float-button-text-size-small-min-width),
|
||||
var(--ti-float-button-text-size-small-height),
|
||||
var(--ti-float-button-text-size-small-svg-width),
|
||||
var(--ti-float-button-text-size-small-svg-height));
|
||||
}
|
||||
|
||||
&.@{float-button-prefix-cls}.@{float-button-prefix-cls}--mini {
|
||||
.button-text-size(var(--ti-float-button-text-size-mini-min-width),
|
||||
var(--ti-float-button-text-size-mini-height),
|
||||
var(--ti-float-button-text-size-mini-svg-width),
|
||||
var(--ti-float-button-text-size-mini-svg-height));
|
||||
}
|
||||
}
|
||||
|
||||
&&--large {
|
||||
.button-size(var(--ti-float-button-size-large-font-size),
|
||||
var(--ti-float-button-size-large-height),
|
||||
var(--ti-float-button-size-large-padding-horizontal),
|
||||
var(--ti-float-button-size-large-min-width),
|
||||
);
|
||||
|
||||
&+& {
|
||||
margin-left: var(--ti-float-button-size-large-margin-left);
|
||||
}
|
||||
}
|
||||
|
||||
&&--medium {
|
||||
.button-size(var(--ti-float-button-size-medium-font-size),
|
||||
var(--ti-float-button-size-medium-height),
|
||||
var(--ti-float-button-size-medium-padding-horizontal),
|
||||
var(--ti-float-button-size-medium-min-width),
|
||||
);
|
||||
|
||||
&+& {
|
||||
margin-left: var(--ti-float-button-size-medium-margin-left);
|
||||
}
|
||||
}
|
||||
|
||||
&&--small {
|
||||
.button-size(var(--ti-float-button-size-small-font-size),
|
||||
var(--ti-float-button-size-small-height),
|
||||
var(--ti-float-button-size-small-padding-horizontal),
|
||||
var(--ti-float-button-size-small-min-width),
|
||||
);
|
||||
|
||||
&+& {
|
||||
margin-left: var(--ti-float-button-size-small-margin-left);
|
||||
}
|
||||
}
|
||||
|
||||
&&--mini {
|
||||
.button-size(var(--ti-float-button-size-mini-font-size),
|
||||
var(--ti-float-button-size-mini-height),
|
||||
var(--ti-float-button-size-mini-padding-horizontal),
|
||||
var(--ti-float-button-size-mini-min-width),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix-iconfont}-loading {
|
||||
font-size: var(--ti-common-font-size-1);
|
||||
line-height: 1;
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const tinyFloatButtonSmbTheme = {}
|
||||
|
|
@ -0,0 +1,445 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
.component-css-vars-float-button() {
|
||||
// 按钮圆角
|
||||
--ti-float-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 按钮字号
|
||||
--ti-float-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 朴素类按钮禁用文本色(非默认)
|
||||
--ti-float-button-plain-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 按钮边框尺寸
|
||||
--ti-float-button-border-width: var(--ti-common-border-weight-normal, 1px);
|
||||
// 按钮边框样式
|
||||
--ti-float-button-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 按钮加载时背景色
|
||||
--ti-float-button-loading-bg-color: rgba(255, 255, 255, 0.35);
|
||||
|
||||
// 默认按钮最小宽度
|
||||
--ti-float-button-size-normal-min-width: 20px;
|
||||
// 默认按钮最大宽度
|
||||
--ti-float-button-size-normal-max-width: 80px;
|
||||
// 默认按钮的高度
|
||||
--ti-float-button-size-normal-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 默认按钮水平内边距
|
||||
--ti-float-button-size-normal-padding-horizontal: var(--ti-common-size-5x, 20px);
|
||||
|
||||
// 超大按钮高度
|
||||
--ti-float-button-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
// 超大按钮字号
|
||||
--ti-float-button-size-large-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 超大按钮水平内边距
|
||||
--ti-float-button-size-large-padding-horizontal: var(--ti-common-size-8x, 32px);
|
||||
// 超大按钮最小宽度
|
||||
--ti-float-button-size-large-min-width: var(--ti-common-size-20x, 80px);
|
||||
// 超大按钮左侧外边距
|
||||
--ti-float-button-size-large-margin-left: 8px;
|
||||
|
||||
// 中等按钮高度
|
||||
--ti-float-button-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 中等按钮字号
|
||||
--ti-float-button-size-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 中等按钮水平内边距
|
||||
--ti-float-button-size-medium-padding-horizontal: var(--ti-common-size-7x, 28px);
|
||||
// 中等按钮最小宽度
|
||||
--ti-float-button-size-medium-min-width: var(--ti-common-size-12x, 48px);
|
||||
// 中等按钮左侧外边距
|
||||
--ti-float-button-size-medium-margin-left: 8px;
|
||||
|
||||
// 小型按钮高度
|
||||
--ti-float-button-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 小型按钮字号
|
||||
--ti-float-button-size-small-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 小尺寸按钮水平内边距
|
||||
--ti-float-button-size-small-padding-horizontal: var(--ti-common-size-3x, 12px);
|
||||
// 小尺寸按钮最小宽度
|
||||
--ti-float-button-size-small-min-width: var(--ti-common-size-7x, 28px);
|
||||
// 小尺寸按钮左侧外边距
|
||||
--ti-float-button-size-small-margin-left: 8px;
|
||||
|
||||
// 迷你尺寸按钮高度
|
||||
--ti-float-button-size-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 迷你尺寸按钮字号
|
||||
--ti-float-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 迷你尺寸按钮水平内边距
|
||||
--ti-float-button-size-mini-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
// 迷你尺寸按钮最小宽度
|
||||
--ti-float-button-size-mini-min-width: var(--ti-common-size-5x, 20px);
|
||||
|
||||
// 默认按钮文本色
|
||||
--ti-float-button-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 默认按钮边框色
|
||||
--ti-float-button-normal-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 默认按钮背景色
|
||||
--ti-float-button-normal-background-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮悬浮文本色
|
||||
--ti-float-button-normal-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮悬浮边框色
|
||||
--ti-float-button-normal-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮悬浮背景色
|
||||
--ti-float-button-normal-hover-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮点击瞬间文本色
|
||||
--ti-float-button-normal-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮点击瞬间边框色
|
||||
--ti-float-button-normal-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮点击瞬间背景色
|
||||
--ti-float-button-normal-active-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 默认按钮禁用文本色
|
||||
--ti-float-button-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认按钮禁用边框色
|
||||
--ti-float-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 禁用类默认按钮背景色
|
||||
--ti-float-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
|
||||
// 文字按钮文本色
|
||||
--ti-float-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 文字按钮悬浮文本修饰(hide)
|
||||
--ti-float-button-text-hover-text-decoration: none;
|
||||
// 文字按钮悬浮文本色
|
||||
--ti-float-button-text-color-hover: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 文字按钮悬浮文本字重
|
||||
--ti-float-button-text-hover-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 文字按钮点击瞬间文本色
|
||||
--ti-float-button-text-color-active: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 文字按钮禁用文本色
|
||||
--ti-float-button-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 文字按钮图标宽度
|
||||
--ti-float-button-text-svg-width: 1em;
|
||||
// 文字按钮图标高度
|
||||
--ti-float-button-text-svg-height: 1em;
|
||||
// 文字按钮悬浮背景色
|
||||
--ti-float-button-text-hover-bg-color: transparent;
|
||||
// 文字按钮只有图标悬浮背景色
|
||||
--ti-float-button-text-only-icon-hover-bg-color: transparent;
|
||||
// 文字按钮悬浮圆角
|
||||
--ti-float-button-text-hover-border-radius: 0px;
|
||||
// 文字按钮图标填充色
|
||||
--ti-float-button-text-svg-fill-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 文字按钮图标悬浮填充色
|
||||
--ti-float-button-text-svg-hover-fill-color: var(--ti-float-button-text-color-hover);
|
||||
// 文字按钮禁用时图标填充色
|
||||
--ti-float-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 图标加文字按钮图标右侧外边距
|
||||
--ti-float-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x, 8px);
|
||||
// 图标加文字按钮字体颜色
|
||||
--ti-float-button-text-has-svg-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 图标加文字按钮悬浮时字体颜色
|
||||
--ti-float-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 文字按钮只有svg时水平内边距
|
||||
--ti-float-button-text-svg-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
|
||||
// 主要按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-float-button-primary-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主要按钮的主题类边框色
|
||||
--ti-float-button-primary-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主题类主要按钮悬浮背景色
|
||||
--ti-float-button-primary-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主题类主要按钮悬浮边框色
|
||||
--ti-float-button-primary-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主要按钮点击瞬间背景色
|
||||
--ti-float-button-primary-active-bg-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 主要按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-float-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6);
|
||||
// 主题类主要按钮文本色
|
||||
--ti-float-button-primary-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类主要按钮文本色
|
||||
--ti-float-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8);
|
||||
// 禁用主题类主要按钮边框色
|
||||
--ti-float-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border, #dfe1e6);
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-float-button-primary-plain-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-float-button-primary-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类主要按钮背景色
|
||||
--ti-float-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// 朴素类主要按钮悬浮背景色
|
||||
--ti-float-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮边框色
|
||||
--ti-float-button-primary-plain-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮悬浮边框色
|
||||
--ti-float-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 禁用朴素类主要按钮背景色
|
||||
--ti-float-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color,
|
||||
rgba(191, 191, 191, 0.1));
|
||||
|
||||
// 成功按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-float-button-success-normal-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功按钮的主题类边框色
|
||||
--ti-float-button-success-normal-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功按钮悬浮背景色
|
||||
--ti-float-button-success-hover-bg-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 成功按钮悬浮边框色
|
||||
--ti-float-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 成功按钮点击瞬间背景色
|
||||
--ti-float-button-success-active-bg-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
// 成功按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-float-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor, #f5f5f6);
|
||||
// 成功按钮文本色
|
||||
--ti-float-button-success-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类成功按钮文本色
|
||||
--ti-float-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text, #adb0b8);
|
||||
// 禁用主题类成功按钮边框色
|
||||
--ti-float-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border, #dfe1e6);
|
||||
// 朴素类成功按钮文本色
|
||||
--ti-float-button-success-plain-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮悬浮文本色
|
||||
--ti-float-button-success-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类成功按钮背景色
|
||||
--ti-float-button-success-plain-bg-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
// 朴素类成功按钮悬浮背景色
|
||||
--ti-float-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮边框色
|
||||
--ti-float-button-success-plain-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮悬浮边框色
|
||||
--ti-float-button-success-plain-hover-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 禁用朴素类成功按钮背景色
|
||||
--ti-float-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color,
|
||||
rgba(166, 195, 185, 0.1));
|
||||
|
||||
// 警告按钮背景色|朴素类警告按钮悬浮背景色
|
||||
--ti-float-button-warning-normal-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告按钮的主题类边框色
|
||||
--ti-float-button-warning-normal-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告按钮悬浮背景色
|
||||
--ti-float-button-warning-hover-bg-color: var(--ti-common-color-warning-hover, #fac20a);
|
||||
// 警告按钮点击瞬间背景色
|
||||
--ti-float-button-warning-active-bg-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
// 警告按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-float-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6);
|
||||
// 警告按钮文本色
|
||||
--ti-float-button-warning-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用警告按钮文本色
|
||||
--ti-float-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text, #adb0b8);
|
||||
// 禁用主题类警告按钮边框色
|
||||
--ti-float-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border, #dfe1e6);
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-float-button-warning-plain-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-float-button-warning-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类警告按钮背景色
|
||||
--ti-float-button-warning-plain-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
// 朴素类警告按钮悬浮背景色
|
||||
--ti-float-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类警告按钮边框色
|
||||
--ti-float-button-warning-plain-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类警告按钮悬浮边框色
|
||||
--ti-float-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 禁用朴素类警告按钮背景色
|
||||
--ti-float-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color,
|
||||
rgba(211, 198, 162, 0.1));
|
||||
|
||||
// 危险按钮默认背景色|朴素类危险按钮边框色
|
||||
--ti-float-button-danger-normal-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险按钮的主题类边框色
|
||||
--ti-float-button-danger-normal-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险按钮悬浮背景色
|
||||
--ti-float-button-danger-hover-bg-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险按钮悬浮边框色
|
||||
--ti-float-button-danger-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险按钮点击瞬间背景色
|
||||
--ti-float-button-danger-active-bg-color: var(--ti-common-color-danger-active, #b12220);
|
||||
// 危险按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-float-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
// 危险按钮文本色
|
||||
--ti-float-button-danger-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类危险按钮文本色
|
||||
--ti-float-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text, #adb0b8);
|
||||
// 禁用主题类危险按钮边框色
|
||||
--ti-float-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border, #dfe1e6);
|
||||
// 朴素类危险按钮文本色
|
||||
--ti-float-button-danger-plain-text-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮悬浮文本色
|
||||
--ti-float-button-danger-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类危险按钮背景色
|
||||
--ti-float-button-danger-plain-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
// 朴素类危险按钮悬浮背景色
|
||||
--ti-float-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮边框色
|
||||
--ti-float-button-danger-plain-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮悬浮边框色
|
||||
--ti-float-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 禁用朴素类危险按钮背景色
|
||||
--ti-float-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
// 禁用朴素类危险按钮边框色
|
||||
--ti-float-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
|
||||
// 信息按钮背景色|朴素类信息按钮边框色
|
||||
--ti-float-button-info-normal-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息按钮的主题类边框色
|
||||
--ti-float-button-info-normal-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息按钮悬浮背景色
|
||||
--ti-float-button-info-hover-bg-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息按钮悬浮边框色
|
||||
--ti-float-button-info-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息按钮点击瞬间背景色
|
||||
--ti-float-button-info-active-bg-color: var(--ti-common-color-info-active, #5c6173);
|
||||
// 信息按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-float-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor, #f5f5f6);
|
||||
// 信息按钮文本色
|
||||
--ti-float-button-info-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用信息按钮文本色
|
||||
--ti-float-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text, #adb0b8);
|
||||
// 禁用信息按钮边框色
|
||||
--ti-float-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border, #dfe1e6);
|
||||
// 朴素类信息按钮文本色
|
||||
--ti-float-button-info-plain-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮悬浮文本色
|
||||
--ti-float-button-info-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类信息按钮背景色
|
||||
--ti-float-button-info-plain-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
|
||||
// 朴素类信息按钮悬浮背景色
|
||||
--ti-float-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮边框色
|
||||
--ti-float-button-info-plain-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮悬浮边框色
|
||||
--ti-float-button-info-plain-hover-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 禁用朴素类信息按钮背景色
|
||||
--ti-float-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color,
|
||||
rgba(191, 191, 191, 0.1));
|
||||
|
||||
// 默认类型幽灵按钮文本色
|
||||
--ti-float-button-ghost-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 默认类型幽灵按钮边框色
|
||||
--ti-float-button-ghost-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 默认类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-ghost-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-ghost-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认类型幽灵按钮禁用文本色
|
||||
--ti-float-button-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认类型幽灵按钮禁用边框色
|
||||
--ti-float-button-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 主要类型幽灵按钮文本色
|
||||
--ti-float-button-primary-ghost-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主要类型幽灵按钮边框色
|
||||
--ti-float-button-primary-ghost-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主要类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-primary-ghost-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主要类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-primary-ghost-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主要类型幽灵按钮禁用文本色
|
||||
--ti-float-button-primary-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 主要类型幽灵按钮禁用边框色
|
||||
--ti-float-button-primary-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 成功类型幽灵按钮文本色
|
||||
--ti-float-button-success-ghost-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功类型幽灵按钮边框色
|
||||
--ti-float-button-success-ghost-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-success-ghost-hover-text-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
// 成功类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-success-ghost-hover-border-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
// 成功类型幽灵按钮禁用文本色
|
||||
--ti-float-button-success-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 成功类型幽灵按钮禁用边框色
|
||||
--ti-float-button-success-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 信息类型幽灵按钮文本色
|
||||
--ti-float-button-info-ghost-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息类型幽灵按钮边框色
|
||||
--ti-float-button-info-ghost-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-info-ghost-hover-text-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-info-ghost-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息类型幽灵按钮禁用文本色
|
||||
--ti-float-button-info-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 信息类型幽灵按钮禁用边框色
|
||||
--ti-float-button-info-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 告警类型幽灵按钮文本色
|
||||
--ti-float-button-warning-ghost-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 告警类型幽灵按钮边框色
|
||||
--ti-float-button-warning-ghost-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 告警类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-warning-ghost-hover-text-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
// 告警类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-warning-ghost-hover-border-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
// 告警类型幽灵按钮禁用文本色
|
||||
--ti-float-button-warning-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 告警类型幽灵按钮禁用边框色
|
||||
--ti-float-button-warning-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 危险类型幽灵按钮文本色
|
||||
--ti-float-button-danger-ghost-text-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险类型幽灵按钮边框色
|
||||
--ti-float-button-danger-ghost-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险类型幽灵按钮悬浮文本色
|
||||
--ti-float-button-danger-ghost-hover-text-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险类型幽灵按钮悬浮边框色
|
||||
--ti-float-button-danger-ghost-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险类型幽灵按钮禁用文本色
|
||||
--ti-float-button-danger-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 危险类型幽灵按钮禁用边框色
|
||||
--ti-float-button-danger-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
|
||||
// 按钮垂直内边距
|
||||
--ti-float-button-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 默认圆形按钮内边距
|
||||
--ti-float-button-size-normal-padding: var(--ti-common-space-2x, 8px);
|
||||
|
||||
// 纯文本按钮超大尺寸最小宽度
|
||||
--ti-float-button-text-size-large-min-width: var(--ti-common-size-24x, 96px);
|
||||
// 纯文本按钮超大尺寸高度
|
||||
--ti-float-button-text-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
// 纯文本按钮超大尺寸图标宽度
|
||||
--ti-float-button-text-size-large-svg-width: 1em;
|
||||
// 纯文本按钮超大尺寸图标高度
|
||||
--ti-float-button-text-size-large-svg-height: 1em;
|
||||
// 纯文本按钮水平内边距
|
||||
--ti-float-button-text-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 纯文本按钮中等尺寸最小宽度
|
||||
--ti-float-button-text-size-medium-min-width: var(--ti-common-size-22x, 88px);
|
||||
// 纯文本按钮中等尺寸高度
|
||||
--ti-float-button-text-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 纯文本按钮中等尺寸图标宽度
|
||||
--ti-float-button-text-size-medium-svg-width: 1em;
|
||||
// 纯文本按钮中等尺寸图标高度
|
||||
--ti-float-button-text-size-medium-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮默认尺寸最小宽度
|
||||
--ti-float-button-text-size-default-min-width: var(--ti-common-size-20x, 80px);
|
||||
// 纯文本按钮默认尺寸高度
|
||||
--ti-float-button-text-size-default-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 纯文本按钮默认尺寸图标宽度
|
||||
--ti-float-button-text-size-default-svg-width: 1em;
|
||||
// 纯文本按钮默认尺寸图标高度
|
||||
--ti-float-button-text-size-default-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮小尺寸最小宽度
|
||||
--ti-float-button-text-size-small-min-width: var(--ti-common-size-18x, 72px);
|
||||
// 纯文本按钮小尺寸高度
|
||||
--ti-float-button-text-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 纯文本按钮小尺寸图标宽度
|
||||
--ti-float-button-text-size-small-svg-width: 1em;
|
||||
// 纯文本按钮小尺寸图标高度
|
||||
--ti-float-button-text-size-small-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮迷你尺寸最小宽度
|
||||
--ti-float-button-text-size-mini-min-width: var(--ti-common-size-16x, 64px);
|
||||
// 纯文本按钮迷你尺寸高度
|
||||
--ti-float-button-text-size-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 纯文本按钮迷你尺寸图标宽度
|
||||
--ti-float-button-text-size-mini-svg-width: 1em;
|
||||
// 纯文本按钮迷你尺寸图标高度
|
||||
--ti-float-button-text-size-mini-svg-height: 1em;
|
||||
|
||||
// 纯图标按钮最小宽度
|
||||
--ti-float-button-only-icon-min-width: unset;
|
||||
// 纯图标按钮水平内边距
|
||||
--ti-float-button-only-icon-padding-horizontal: 7px;
|
||||
// 纯图标按钮边框圆角
|
||||
--ti-float-button-only-icon-border-radius: 2px;
|
||||
// 纯图标按钮边框颜色
|
||||
--ti-float-button-only-icon-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 纯图标按钮悬浮时边框颜色
|
||||
--ti-float-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 纯图标按钮禁用时边框颜色
|
||||
--ti-float-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
}
|
||||
|
|
@ -152,6 +152,7 @@
|
|||
"@opentiny/vue-filter-bar": "workspace:~",
|
||||
"@opentiny/vue-filter-box": "workspace:~",
|
||||
"@opentiny/vue-filter-panel": "workspace:~",
|
||||
"@opentiny/vue-float-button": "workspace:~",
|
||||
"@opentiny/vue-floatbar": "workspace:~",
|
||||
"@opentiny/vue-floating-button": "workspace:~",
|
||||
"@opentiny/vue-flowchart": "workspace:~",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import FloatButton from './src/index'
|
||||
import { version } from './package.json'
|
||||
|
||||
/* istanbul ignore next */
|
||||
FloatButton.install = function (Vue) {
|
||||
Vue.component(FloatButton.name, FloatButton)
|
||||
}
|
||||
|
||||
FloatButton.version = version
|
||||
|
||||
/* istanbul ignore next */
|
||||
if (process.env.BUILD_TARGET === 'runtime') {
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
FloatButton.install(window.Vue)
|
||||
}
|
||||
}
|
||||
|
||||
export default FloatButton
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "@opentiny/vue-float-button",
|
||||
"version": "3.7.0",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "index.ts",
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"@opentiny-internal/vue-test-utils": "workspace:*",
|
||||
"vitest": "^0.31.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm -w build:ui $npm_package_name",
|
||||
"//postversion": "pnpm build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-renderless": "workspace:~"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
|
||||
import template from 'virtual-template?pc'
|
||||
|
||||
export const floatButtonProps = {
|
||||
...$props,
|
||||
trigger: {
|
||||
default: 'click',
|
||||
type: String,
|
||||
validator(val: string) {
|
||||
return ['click', 'hover', ''].includes(val)
|
||||
}
|
||||
},
|
||||
open: Boolean,
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle',
|
||||
validator(val: string) {
|
||||
return ['circle', 'square'].includes(val)
|
||||
}
|
||||
},
|
||||
top: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bottom: {
|
||||
type: String,
|
||||
default: '20px'
|
||||
},
|
||||
right: {
|
||||
type: String,
|
||||
default: '20px'
|
||||
},
|
||||
left: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
href: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
icon: {
|
||||
type: [Object, String],
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
resetTime: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
validator(val: string) {
|
||||
return ['large', 'medium', 'small', 'mini', ''].includes(val)
|
||||
}
|
||||
},
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
backTop: Boolean,
|
||||
// 以下属性只有backTop设置为true才生效
|
||||
// 滚动高度达到此参数值才出现悬浮按钮
|
||||
visibilityHeight: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
// 设置需要监听其滚动事件的元素
|
||||
element: {
|
||||
default: document.body,
|
||||
type: HTMLElement
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: $prefix + 'FloatButton',
|
||||
inject: {
|
||||
buttonGroup: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
props: floatButtonProps,
|
||||
setup(props, context) {
|
||||
return $setup({ props, context, template })
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<button
|
||||
v-show="state.show"
|
||||
ref="tinyFloatButton"
|
||||
class="tiny-float-button"
|
||||
@click="handleClick"
|
||||
:class="[
|
||||
type ? 'tiny-float-button--' + type : '',
|
||||
size ? 'tiny-float-button--' + size : '',
|
||||
{
|
||||
'is-disabled': state.buttonDisabled,
|
||||
'is-loading': loading,
|
||||
'is-icon': icon && !loading && (description || slots.default),
|
||||
'is-only-icon': icon && !loading && !(description || slots.default),
|
||||
'is-circle': shape === 'circle',
|
||||
'is-square': shape === 'square'
|
||||
}
|
||||
]"
|
||||
:style="{ top, bottom, right, left }"
|
||||
>
|
||||
<icon-loading v-if="loading" class="tiny-icon-loading tiny-svg-size" />
|
||||
<component v-if="icon && !loading && !state.open" :is="icon" :class="{ 'is-text': description || slots.default }" />
|
||||
<icon-close v-if="!loading && state.open"></icon-close>
|
||||
<div v-if="description && !state.open">{{ description }}</div>
|
||||
<div ref="tinyFloatButtonOpen" class="tiny-float-button--open" v-if="state.open">
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { renderless, api } from '@opentiny/vue-renderless/float-button/vue'
|
||||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
import { iconLoading, iconClose } from '@opentiny/vue-icon'
|
||||
import type { IFloatButtonApi } from '@opentiny/vue-renderless/types/float-button.type'
|
||||
import '@opentiny/vue-theme/float-button/index.less'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['click', 'mouseout', 'mouseover'],
|
||||
props: [
|
||||
...props,
|
||||
'type',
|
||||
'open',
|
||||
'description',
|
||||
'size',
|
||||
'icon',
|
||||
'resetTime',
|
||||
'tooltip',
|
||||
'loading',
|
||||
'disabled',
|
||||
'href',
|
||||
'target',
|
||||
'top',
|
||||
'bottom',
|
||||
'right',
|
||||
'left',
|
||||
'trigger',
|
||||
'shape',
|
||||
'backTop',
|
||||
'visibilityHeight',
|
||||
'element'
|
||||
],
|
||||
components: { IconLoading: iconLoading(), IconClose: iconClose() },
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api }) as unknown as IFloatButtonApi
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue