miui-install v0.1.0

miui-install

install

npm i git+ssh://git@v9.git.n.xiaomi.com:browser-fe-component/miui-install.git --save

demo

<template>
  <div id="app">
    <install-btn
      :ad-info="adInfo"
      :start-callback="startCallback"
      :end-callback="endCallback"
      @toast="installToast"
    />
    <div
      class="toast"
      ref="toast" />
  </div>
</template>

<script>
import InstallBtn from 'MiuiInstall';
import { utilsToast } from './utils/utils'; 

export default {
  name: 'app',
  data() {
    return {
      adInfo: {
        actionUrl: null,
        allDownloadNum: 0,
        appChannel: null,
        appName: "想看",
        appRatingScore: 0,
        brand: null,
        categoryName: null,
        clickMonitorUrls: null,
        deeplink: "",
        dspName: null,
        ex: null,
        extApkChannel: "browser_mifestival",
        height: 0,
        iconUrl: "http://f2.market.xiaomi.com/download/Browser/061e0a5bf4b814b5213b7deb81fccc660aa832fcf/114-114icon.png",
        id: 0,
        imgUrls: null,
        landingPageUrl: "mimarket://details?id=com.xiangkan.android&nonce=-138006521261607160:25916361&ref=BROWSER_FEED&appClientId=1000274&appSignature=CuHMdxq0yDeEmuFvHVlDRiP37gRZcpfRf3beH20R0II&finishWhenDownload=false&finishWhenOpen=false&back=true&ext_apkChannel=browser_mifestival&startDownload=true",
        packageName: "com.xiangkan.android",
        sequence: 0,
        source: null,
        summary: "",
        tagId: null,
        targetType: 0,
        template: null,
        title: "想看",
        viewMonitorUrls: null,
        width: 0,
      },
    };
  },
  components: {
    InstallBtn,
  },
  methods: {
    startCallback() {
      console.log('start');
    },
    endCallback() {
      console.log('end');
    },
    installToast(msg) {
      let $toast = this.$refs.toast;
      utilsToast($toast, msg);
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.toast {
  position: fixed;
  display: none;
  bottom: 50px;
  padding: 14px 13px 12px;
  font: 0.11rem/0.11rem a;
  color: #fff;
  border-radius: 8px;
  background: rgba(79, 79, 79, 0.9);
  z-index: 10000;
}
</style>