<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价： <em> </em></div> <div class="btn-area">去结算</div> </div> </div>帮我改成组件

可以将上述代码封装成一个名为 "CartFloatBar" 的组件，代码如下所示：

<template>
  <div class="cart-floatbar">
    <div class="select-all">
      <input type="checkbox" name="" id="d" class="checkall">全选
    </div>
    <div class="operation">
      <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
      <a href="javascript:;" class="clear-all">清理购物车</a>
    </div>
    <div class="toolbar-right">
      <div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
      <div class="price-sum">总价： <em>{{ totalPrice }}</em></div>
      <div class="btn-area">去结算</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartFloatBar',
  props: {
    selectedCount: {
      type: Number,
      default: 0
    },
    totalPrice: {
      type: Number,
      default: 0
    }
  }
}
</script>

在使用该组件时，可以通过传递不同的 props 来动态显示已选商品数量和总价。例如：

<CartFloatBar :selectedCount="1" :totalPrice="99"></CartFloatBar>