131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title fui-align__center" @tap="vip">Fab <image
|
||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||
</view>
|
||
<view class="fui-page__desc">Fab 浮动按钮，主要特点是轻盈、便捷、高效，用于在屏幕上执行主要或最常见的操作。</view>
|
||
</view>
|
||
<view class="fui-page__bd">
|
||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']" @click="fab(1)">
|
||
</fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="更换背景色" bold @click="fab(2)">
|
||
</fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="图标换为文本" bold :margin="['24rpx']" @click="fab(3)">
|
||
</fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="切换位置" bold @click="fab(4)">
|
||
</fui-button>
|
||
</view>
|
||
<fui-fab :background="background" :position="isLeft?'left':'right'" :fabs="fabs" @click="handleClick"></fui-fab>
|
||
|
||
<fui-fab :zIndex="10" :position="isLeft?'right':'left'" @click="fabClick">
|
||
<fui-icon name="edit-fill" color="#fff"></fui-icon>
|
||
</fui-fab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLeft: true,
|
||
items: [{
|
||
name: 'star',
|
||
text: '收藏'
|
||
}, {
|
||
name: 'share',
|
||
text: '分享'
|
||
}, {
|
||
name: 'fabulous',
|
||
text: '点赞'
|
||
}, {
|
||
name: 'comment',
|
||
text: '评论'
|
||
}],
|
||
items2: [{
|
||
name: 'calendar',
|
||
text: '日程安排',
|
||
background: '#3BBE88'
|
||
}, {
|
||
name: 'location',
|
||
text: '地理位置',
|
||
background: '#F7953B'
|
||
}, {
|
||
name: 'community',
|
||
text: '社区交流',
|
||
background: '#3493F0'
|
||
}],
|
||
list: [{
|
||
abbr: 'A',
|
||
abbrSize: 48,
|
||
text: 'Apple'
|
||
}, {
|
||
abbr: 'F',
|
||
abbrSize: 48,
|
||
text: 'firstui@126.com'
|
||
}, {
|
||
abbr: 'S',
|
||
abbrSize: 48,
|
||
text: 'subject@126.com'
|
||
}, {
|
||
name: 'message-fill',
|
||
abbrSize: 56,
|
||
text: '提醒'
|
||
}],
|
||
background: '#465CFF',
|
||
fabs: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.fabs = this.items
|
||
},
|
||
methods: {
|
||
vip() {
|
||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||
},
|
||
fab(type) {
|
||
switch (type) {
|
||
case 1:
|
||
this.fabs = this.items
|
||
this.background = '#465CFF';
|
||
this.fui.toast('已恢复默认状态~')
|
||
break;
|
||
case 2:
|
||
this.fabs = this.items2
|
||
this.background = 'linear-gradient(300deg, #F53423 0%, #F67F48 100%)';
|
||
this.fui.toast('已更换~')
|
||
break;
|
||
case 3:
|
||
this.fabs = this.list
|
||
this.background = '#465CFF';
|
||
this.fui.toast('已切换~')
|
||
break;
|
||
case 4:
|
||
this.isLeft = !this.isLeft
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
},
|
||
handleClick(e) {
|
||
console.log(e)
|
||
this.fui.toast(`您点击了【${this.fabs[e.index].text}】按钮~`)
|
||
},
|
||
fabClick() {
|
||
this.fui.toast('这是一个单独的按钮~')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-page__bd {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
</style> |