native-view.uvue

<template>
  <view>
    <native-button class="native-button" style="width: 200px; height: 100px;" :text="buttonText" @buttonTap="ontap"
      @load="onload"></native-button>
    <native-time-picker class="native-time-picker" :hour=2 :minute=3 @changed="onChanged"></native-time-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello',
        buttonText: "native-button",
        isLoad: false,
        clickCount: 0
      }
    },
    onLoad() {

    },
    methods: {
      ontap(e : UniNativeViewEvent) {
        uni.showToast({
          title: "按钮被点击了"
        })
        this.clickCount ++
        this.buttonText = "native-button"+this.clickCount
      },
      onload() {
        //标记已初始化 用于自动化测试
        this.isLoad = true
      },
      onChanged(e : UniNativeViewEvent) {
        console.log("onchanged-----", e.detail)
      }
    }
  }
</script>

<style>
  .native-button {
    height: 100px;
    width: 100px;
    margin: 25px auto 25px auto;
  }

  .native-time-picker {
    margin: 10px auto 25px auto;
    border-style: solid;
    border-radius: 5px;
  }
</style>