H5_Embedded_Page/src/view/index/components/btnGroup/index.vue

<template>
  <div class="btngroup">
    <van-button
      v-if="weibo && weibo['6m'][type] && weibo['6m'][type].length"
      :type="readType === '6m' ? 'info' : 'default'"
      @click="() => selectClick('6m')"
      size="mini"
    >
      1小时
    </van-button>
    <van-button
      v-if="weibo && weibo['24h'][type] && weibo['24h'][type].length"
      :type="readType === '24h' ? 'info' : 'default'"
      @click="() => selectClick('24h')"
      size="mini"
    >
      24小时
    </van-button>
    <van-button
      v-if="weibo && weibo['7d'][type] && weibo['7d'][type].length"
      :type="readType === '7d' ? 'info' : 'default'"
      @click="() => selectClick('7d')"
      size="mini"
    >
      7天
    </van-button>
    <van-button
      v-if="weibo && weibo['30d'][type] && weibo['30d'][type].length"
      :type="readType === '30d' ? 'info' : 'default'"
      @click="() => selectClick('30d')"
      size="mini"
    >
      30天
    </van-button>
  </div>
</template>

<style scoped>
.btngroup {
  float: right;
  padding-right: 5px;
  display: inline-block;
}
</style>

<script>
import { Button as vanButton } from "vant";
import "vant/lib/button/style";
export default {
  components: {
    vanButton,
  },
  props: {
    type: {
      type: String,
      value: "",
    },
    weibo: {
      type: Object,
      value: () => {
        return {};
      },
    },
  },
  data() {
    return {
      readType: "30d",
    };
  },
  created() {},
  methods: {
    selectClick(key) {
      if (key === this.readType) return;
      this.$emit("changeBtn", { key, type: this.type }, () => {
        this.readType = key;
      });
    },
  },
};
</script>