wxc-progress使用

<wxc-progress>的本质是两个嵌套的<div>。外层<div>负责背景,内层<div>负责进度条。

<wxc-progress :value=70
              bar-color=
'#0fee0f'
             
:bar-height="
16"
             
:bar-radius="
8"
             
:bar-width=
640></wxc-progress>

<wxc-progress>共有5个属性:

1.    value:百分比。只能是0-100的数值。上面使用v-bind的方式来设置值,可直接赋值int或float或string。对于<0或>100的值,会自动转成0或100。

2.    bar-color:进度条颜色。上面直接设置了颜色数值。也可使用v-bind来绑定data中的颜色变量。

3.    bar-height:进度条高度。单位是px。由于组件会将该值与“px”进行拼接,所以这里只能设置一个数值,而不能设置“16px”这样的值。

4.    bar-radius:圆角半径值。需设为<=bar-height/2的值。同bar-height一样,组件内会拼接“px”,所以必须设置int值。

5.    bar-width:进度条宽度。同bar-height。

<wxc-progress>没有slot,且没有默认事件。

猜你喜欢

转载自blog.csdn.net/fyyyr/article/details/80351056
今日推荐