#はじめに
Vuetifyではあらかじめ用意されているコンポーネントを使用することで簡単に様々な機能が作成できます。
今回はそのVuetifyのコンポーネントv-progress-circular
とv-progress-linear
を使って使用容量を示すサンプルを作成します。
参考にしてくれると嬉しいです!
#環境
- vue 2.6.14
- vuetify 2.6.2
- npm: 7.21.1
- node: 14.17.5
Vuetifyをインストールされていない方は以下のリンクから準備をお願いします。
#実装
今回作成したのはCircleStorage.vue
とLinearStorage.vue
です。
これらのコンポーネントは親コンポーネントから
- name : 名前
- usage : 使用容量
- limit : 制限容量
を受け取ることを想定しています。
今回は容量の単位をGBにしていますが、そこは適宜変更してください。
#円グラフでの使用容量コンポーネント
###CircleStorage.vue
CircleStorage.vue
<template>
<v-card
elevation="0"
class="mt-2 mb-6 mx-1"
>
<v-progress-circular
:rotate="-90"
:size="140"
:width="11"
:value="this.usageRate"
color="primary"
>
<div class="d-flex flex-column black--text " >
<p class="pb-0 ma-0 text-h7 black--text text-center text--secondary font-weight-bold">{{this.name}}</p>
<div class="d-flex pt-2 pl-2 ">
<p class="text-h5 text--primary mt-auto mb-0 pb-0">
{{this.usage}}
</p>
<p class="mt-auto mb-0 pb-0 " >
/{{this.limit}}GB
</p>
</div>
</div>
</v-progress-circular>
</v-card>
</template>
<script>
export default {
name: 'CircleStorage',
props:['name','usage','limit'],
data () {
return {
}
},
computed:{
usageRate(){
return this.usage/this.limit*100
}
},
}
</script>
###LinearStorage.vue
LinearStorage.vue
<template>
<v-card
elevation="0"
class="mt-2 mb-6 mx-1"
>
<v-progress-linear
:value="usageRate"
rounded
disabled
height="35"
color="#4ECDC4"
background-color="grey lighten-3"
>
<div class=" grey--text text--darken-2"> {{ usageText }} </div>
</v-progress-linear>
</v-card>
</template>
<script>
export default {
name: 'LinearStorage',
props:['name','usage','limit'],
data () {
return {
}
},
computed:{
usageRate(){
return this.usage/this.limit*100
},
usageText(){
return ` ${this.name}: ${this.usage} / ${this.limit} GB (${Math.round(this.usageRate*10)/10}%) `
}
},
}
</script>
#使用例
CircleStorage.vue
とLinearStorage.vue
を使用したHelloWorld.vueのサンプルコードを載せます。
HelloWorld.vue
<template>
<div class="mx-auto mt-3 mb-6 text-center" style="width:600px;">
<CircleStorage v-for="item in items" :key="item.name"
:name="item.name"
:usage="item.usage"
:limit="item.limit"
/>
<LinearStorage v-for="item in items" :key="item.name"
:name="item.name"
:usage="item.usage"
:limit="item.limit"
/>
</div>
</template>
<template>
<div class="mx-auto mt-3 mb-6 text-center" style="width:600px;">
<CircleStorage v-for="item in items" :key="item.name"
:name="item.name"
:usage="item.usage"
:limit="item.limit"
/>
<LinearStorage v-for="item in items" :key="item.name"
:name="item.name"
:usage="item.usage"
:limit="item.limit"
/>
</div>
</template>
<script>
import CircleStorage from "./CircleStorage.vue"
import LinearStorage from "./LinearStorage.vue"
export default {
name: 'HelloWorld',
components:{CircleStorage,LinearStorage},
data () {
return {
items:[
{
name:"アイテム1",
usage:1.44,
limit:2
},
{
name:"アイテム2",
usage:0.55,
limit:2
},
],
}
},
}
</script>
#まとめ
今回は使用容量を表示する自作サンプルを紹介しました。どなたかの助けになれば幸いです。ご指摘等あればコメントお願いします。
#参考