Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

全部自定义化 右侧按钮点击事件失效了 when using full define , click not work #263

Closed
gs80140 opened this issue May 8, 2018 · 1 comment

Comments

@gs80140
Copy link

gs80140 commented May 8, 2018

<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <div>
        <div class="demo">
          <wxc-minibar title="右侧带文字的导航栏"
                       background-color="#009ff0"
                       text-color="#FFFFFF"
                       :left-button="leftButton"
                       @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                       @wxcMinibarRightButtonClicked="minibarRightButtonClick"
                       right-text="更多"></wxc-minibar>
        </div>
        <div class="demo">
          <wxc-minibar title="右侧带icon的导航栏"
                       @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                       @wxcMinibarRightButtonClicked="minibarRightButtonClick"
                       :right-button="rightButton"></wxc-minibar>
        </div>

      <div class="demo">
        <wxc-minibar background-color="#FFF3CD"
                     @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                     @wxcMinibarRightButtonClicked="minibarRightButtonClick">
          <image src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
                 slot="left"
                 style="height: 32px;width: 88px;"></image>
          <text style="font-size: 40px;" slot="middle">全部自定义化</text>
          <image slot="right"
                 src="https://img.alicdn.com/tfs/TB1j39Uc0fJ8KJjy0FeXXXKEXXa-160-128.png"
                 style="height: 32px;width: 40px"></image>
        </wxc-minibar>
      </div>
        <div class="demo">
          <wxc-minibar background-color="#800000"
                       text-color="#FFFFFF"
                       @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                       @wxcMinibarRightButtonClicked="minibarRightButtonClick">
                <image src="http://www.dmaio.com/wap/tmpl/images/t3.png"
                 slot="left"
                 style="height: 32px;width: 32px;"></image>
                 <text style="font-size: 40px; color:#FFFFFF" slot="middle">赚星币,看攻略</text>
                 <image slot="right"
                 src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
                 style="height: 60px;width: 100px"></image>
          </wxc-minibar>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }

  .scroller {
    flex: 1;
  }

  .demo {
    width: 750px;
    height: 180px;
    align-items: flex-start;
    padding-top: 6px;
  }
</style>

<script>
  import { WxcMinibar } from 'weex-ui';
  const modal = weex.requireModule('modal');
  const CART_ICON = 'https://gw.alicdn.com/tfs/TB1HrvtbBTH8KJjy0FiXXcRsXXa-32-32.png';
  const RETURN_ICON = 'https://gw.alicdn.com/tfs/TB1cAYsbv2H8KJjy0FcXXaDlFXa-30-53.png';

  export default {
    components: {WxcMinibar },
    data: () => ({
      rightButton: CART_ICON,
      leftButton: RETURN_ICON
    }),
    created () {
      
    },
    methods: {
      minibarLeftButtonClick () {
      },
      minibarRightButtonClick () {
        modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
      }
    }
  };
</script>
@tw93
Copy link
Member

tw93 commented May 13, 2018

谢谢反馈,已经修复,升级weex-ui 到 weex-ui@0.6.3-beta3

npm i weex-ui@latest -S

@tw93 tw93 closed this as completed May 13, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants