YXGJ/components/floatBut.vue

<template>
    <view>
        <view v-if="isSlot" class="box">
            <slot />
        </view>
        <view v-else class="float-but box" hover-class="navigator-hover" :style="{ 'z-index': zIndex }" @click.stop="click1">
            {{ text }}
        </view>
    </view>
</template>

<script>

export default {
    name: "floatBut",
    props: {
        text: {
            type: String,
            default: "上传"
        },
        onClick: {
            type: Function
        },
        zIndex: {
            type: [String, Number],
            default: 99
        },
        isSlot: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    methods: {
        click1() {
            this.$emit("onClick")
        }
    },
}
</script>

<style lang="scss" scoped>
.float-but {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: radial-gradient(100% 0% at 50% 50%, #E2041E 0%, #C30D23 100%);
    border-radius: 50%;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
}

.box {
    position: fixed;
    bottom: 120px;
    right: 10px;
}
</style>