82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<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> |