96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
||
<!-- <view class="float-container">
|
||
<view v-for="(item,index) of props.type" :key="index">
|
||
<view class="sub-btn" :style="getPosition(index)" v-if="item === 'defaultPopup'"
|
||
:class="{active: isOpen}" @click.stop="handleClick('defaultPopup')">
|
||
<span>{{ t('public.mrz') }}</span>
|
||
</view>
|
||
<view class="sub-btn" :style="getPosition(index)" v-if="item === 'scanRecord'"
|
||
:class="{active: isOpen}" @click.stop="handleClick('scanRecord')">
|
||
<span>{{ t('public.smjl') }}</span>
|
||
</view>
|
||
</view>
|
||
<view class="main-btn" :class="{active: isOpen}" @click.stop="toggleMenu()">＋</view>
|
||
</view> -->
|
||
|
||
<uni-fab :show="state.show" ref="fab" :pattern="state.pattern" :content="state.content"
|
||
:horizontal="state.horizontal" :vertical="state.vertical" :direction="state.direction" @trigger="trigger"
|
||
@fabClick="fabClick" />
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref, defineEmits, defineProps, computed, watch } from 'vue';
|
||
import i18n from '../../locale/index'
|
||
import { useI18n } from 'vue-i18n'
|
||
const getI18n = useI18n()
|
||
const { t, locale } = getI18n
|
||
const emit = defineEmits(['scanRecord', 'defaultPopup']);
|
||
const props = defineProps({
|
||
type: {
|
||
type: Array,
|
||
default: () => {
|
||
return ['scanRecord', 'defaultPopup']
|
||
}
|
||
}
|
||
})
|
||
const state = reactive({
|
||
show: false,
|
||
horizontal: 'right',
|
||
vertical: 'bottom',
|
||
direction: 'horizontal',
|
||
pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#007AFF',
|
||
iconColor: '#fff'
|
||
},
|
||
content: [
|
||
{
|
||
iconPath: '../../static/icons/mr.png',
|
||
selectedIconPath: '../../static/icons/mr-ac.png',
|
||
text: computed(() => t('public.mrz')),
|
||
emitText: 'defaultPopup',
|
||
active: false
|
||
},
|
||
{
|
||
iconPath: '../../static/icons/jl.png',
|
||
selectedIconPath: '../../static/icons/jl-ac.png',
|
||
text: computed(() => t('public.smjl')),
|
||
emitText: 'scanRecord',
|
||
active: false
|
||
},
|
||
]
|
||
})
|
||
watch(() => props.type, () => {
|
||
state.content.forEach((item:any,index:any) => {
|
||
if(props.type.indexOf(item.emitText) === -1){
|
||
state.content.splice(index,1)
|
||
}
|
||
})
|
||
}, { immediate: true, deep: true })
|
||
const trigger = (e : any) => {
|
||
state.show = false
|
||
console.log(e)
|
||
console.log(e.item.emitText);
|
||
emit(e.item.emitText)
|
||
|
||
}
|
||
const fabClick = (e : any) => {
|
||
console.log(e)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.uni-fab) {
|
||
box-shadow: 0 1px 5px 2px #efeaea !important;
|
||
}
|
||
|
||
:deep(.uni-fab__content--other-platform) {
|
||
box-shadow: 0 1px 5px 2px #e3e3e3 !important;
|
||
}
|
||
|
||
:deep(.uni-fab__item) {
|
||
margin: 0 8rpx;
|
||
}
|
||
</style> |