Tencent / kbone

一个致力于微信小程序和 Web 端同构的解决方案
Other
4.78k stars 454 forks source link

请问在vue3项目中使用kbone-ui的mp-navigation-bar组件时,如何绑定bindback事件? #476

Open zhuxl1997 opened 8 months ago

zhuxl1997 commented 8 months ago

如题,请问在vue3项目中使用kbone-ui的mp-navigation-bar组件时,如何绑定bindback事件?

已经尝试使用kbone-event-map,但是没有效果,代码如下:

<template>
    <mp-navigation-bar :loading.attr="mpNavigationBar.loading" :show.attr="mpNavigationBar.show.toString()"
                       :animated.attr="mpNavigationBar.animated.toString()" :color.attr="mpNavigationBar.color"
                       :background.attr="mpNavigationBar.background" :back.attr="true" :kbone-event-map="{bindback: () => goBack()}">
        <span slot="center">微信原生</span>
    </mp-navigation-bar>

</template>
<script>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

export default {
    setup() {

        const mpNavigationBar = reactive({
            loading: false,
            color: '#fff',
            background: '#1989fa',
            show: true,
            animated: false
        })

        const goBack = (e) => {
            console.log(123, e)
        }

        window.addEventListener('back', (e) => {
            console.log(123, e)
        })

        return {
            mpNavigationBar,
            goBack
        }
    }
}

</script>

<style lang='less'>
@primary: var(--statusbar-height);
.kbone-content {
  width: 100%;
  height: calc(~"100% - 46px - @{primary}");
  overflow-y: scroll;
  text-align: left;
}

</style>
JimmyVV commented 8 months ago

已经收到哦~~~~

JuneAndGreen commented 8 months ago

直接监听 back 事件试试,去掉 bind,bind 本身就是绑定的意思。

JimmyVV commented 8 months ago

已经收到哦~~~~