Vueはパーセンテージバー効果を実現します

<テンプレート>
  <div class="about">
    <!-- <h1>これはAboutページです</h1> -->
    <div class="step">
      <!-- 左側が 100% の場合、斜辺の三角形は表示されず、直角が増加します -->
      <div
        クラス="左"
        v-show="左パーセント"
        :class="[{ 'full-left': !rightPercent }, { 'tringle': rightPercent }]"
        :style="{ width: leftPercent+'%' }"
        @mouseover="onMouseTooltip(LEFT_BAR, SHOW_TIP)"
        @mouseleave="onMouseTooltip(LEFT_BAR, HIDE_TIP)"
      >
        <div class="bar-tip-box" v-show="leftBar.isShowTip">
          <p>合計: {{ totalNum }}</p>
          <p>緑の割合: {{ leftPercent }}%</p>
        </div>
        <div class="tip-arrow" v-show="leftBar.isShowTip"></div>
        {{ 左パーセント }}%
      </div>
      <div
        クラス="right"
        v-show="rightPercent"
        :class="[{ 'full-right': !leftPercent }]"
        @mouseover="onMouseTooltip(RIGHT_BAR, SHOW_TIP)"
        @mouseleave="onMouseTooltip(RIGHT_BAR, HIDE_TIP)"
      >
        <div class="bar-tip-box" v-show="rightBar.isShowTip">
          <p>合計: {{ totalNum }}</p>
          <p>グレーの割合: {{ rightPercent }}%</p>
        </div>
        <div class="tip-arrow" v-show="rightBar.isShowTip"></div>
        {{ 右パーセント }}%
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
const LEFT_BAR = "左";
const RIGHT_BAR = "右";
const SHOW_TIP = "表示";
const HIDE_TIP = "非表示";

エクスポートデフォルト{
  データ（） {
    戻る {
      左バー: 左バー、
      右バー: 右バー、
      SHOW_TIP: SHOW_TIP、
      ヒントを隠す: ヒントを隠す、
      合計数: 1000,
      左パーセント: 100,
      左バー: {
        isShowTip: false、
        遅延出力: null
      },
      右バー: {
        isShowTip: false、
        遅延出力: null
      }
    };
  },
  メソッド: {
    onMouseTooltip(ヒントタイプ、アクションタイプ) {
      bar = null とします。
      （tipType == LEFT_BAR）の場合{
        バー = this.leftBar;
      } そうでない場合 (tipType == RIGHT_BAR) {
        バー = this.rightBar;
      } それ以外 {
        戻る;
      }
      アクションタイプ === SHOW_TIP の場合 {
        this.showBarTooltip(バー);
      } そうでない場合 (actionType === HIDE_TIP) {
        this.hideBarTooltip(バー);
      } それ以外 {
        戻る;
      }
    },
    showBarTooltip(バー) {
      bar.delayOut が null の場合
        タイムアウトをクリアします(bar.delayOut);
      }
      bar.delayOut = null;
      bar.isShowTip = true;
    },
    非表示バーツールチップ(バー) {
      タイムアウトをクリアします(bar.delayOut);
      bar.delayOut = setTimeout(関数() {
        bar.isShowTip = false;
      }, 100);
    },
  },
  計算: {
    右パーセント: 関数(){
      100 を返します - this.leftPercent;
    }
  }
};
</スクリプト>

<style lang="less" スコープ>
。ステップ {
  位置: 相対的;
  ディスプレイ: フレックス;
  マージン: 100px;
  幅: 200ピクセル;
  フォントサイズ: 0;
  。左 {
    フレックス成長: 0;
    位置: 相対的;
    表示: インラインブロック;
    背景: #62c87f;
    色: #fff;
    テキスト配置: 中央;
    フォントの太さ: 太字;
    幅: 70%;
    フォントサイズ: 12px;
    行の高さ: 20px;
    高さ: 20px;
    最小幅: 30px;
    左上の境界線の半径: 5px;
    左下の境界線の半径: 5px;
  }
  // この疑似クラスは100%表示されるわけではありません。tringle::after {
    コンテンツ： " ";
    位置: 絶対;
    上: 0;
    右: -8px;
    境界線の幅: 20px 8px;
    境界線のスタイル: solid;
    境界線の色: #62c87f 透明 透明 透明;
    zインデックス: 10;
  }

  。右 {
    フレックス成長: 1;
    位置: 相対的;
    表示: インラインブロック;
    /* 幅:30%; */
    背景: #d0d4dc;
    色: #333;
    フォントの太さ: 太字;
    テキスト配置: 中央;
    フォントサイズ: 12px;
    行の高さ: 20px;
    高さ: 20px;
    テキスト配置: 中央;
    最小幅: 35px;
    右上の境界線の半径: 5px;
    右下の境界線の半径: 5px;
  }

  .full-left{
    右上の境界線の半径: 5px;
    右下の境界線の半径: 5px;
  }

  .full-right{
    左上の境界線の半径: 5px;
    左下の境界線の半径: 5px;
  }

  .tip-arrow {
    位置: 絶対;
    左: 50%;
    上: -10px;
    表示: インラインブロック;
    幅: 7px;
    高さ: 7px;
    変換: rotateZ(45deg);
    -webkit-transform:rotateZ(45度);
    背景色: #7f7f7f;
    zインデックス: 10;
  }

  .bar-tip-box {
    位置: 絶対;
    上: -5px;
    右: 50%;
    変換: translate(50%, -100%);
    テキスト配置: 左;
    パディング: 5px 10px;
    幅: 最大コンテンツ;
    色: #fff;
    フォントサイズ: 12px;
    フォントの太さ: 400;
    境界線の半径: 3px;
    背景色: #7f7f7f;
    zインデックス: 10;

    ｐ {
      マージン: 0;
      パディング下部: 5px;
    }
  }
}
</スタイル>