circle vant3环形组件

<template>
  <div class="circle-page1">
    <van-circle
      :id="id"
      class="circle-box"
      v-model:current-rate="currentRate"
      layer-color="rgba(212,214,230,0.72)"
      :stroke-width="100"
      :clockwise="false"
      :color="gradientColor"
      :rate="rate"
      :speed="speed"
      text=""
    />
    <!-- <div :class="props.total_score-0 > 9999 ? 'point-box1' : 'point-box'">
            <span class="point-number" :class="props.total_score-0 > 9999 ?'numberMore':''">{{props.total_score}}</span>
            <span class="fen">分</span>
        </div> -->
  </div>
</template>
<script setup>
  import { ref, onMounted, defineProps, nextTick } from 'vue'
  let props = defineProps({
    total_score: {},
    id: {},
    total_full_score: {}
  })
  let rate = ref(0)
  let speed = ref(0)
  onMounted(() => {
    nextTick(() => {
      let dom = document.getElementById(props.id)?.getElementsByTagName('linearGradient')[0]
      dom && dom.setAttribute('x1', '0%')
      dom && dom.setAttribute('y2', '100%')
    })
    rate.value = Math.ceil((+props.total_score / +props.total_full_score) * 100)
    speed.value = rate.value / 6
  })
  const currentRate = ref(0)
  const gradientColor = {
    '0%': '#89D2FA',
    '50%': '#6CAFF6',
    '100%': '#4F8CF2'
  }
</script>
<style scoped lang="scss">
  .circle-page1 {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    .circle-box {
      width: 298px;
      height: 298px;
    }

    // .point-box {
    //   position: absolute;
    //   left: 50%;
    //   height: 36px;
    //   top: 50%;
    //   width: 100%;
    //   transform: translate(-50%, -50%);
    //   width: fit-content;
    //   display: flex;
    //   justify-content: center;

    //   span.fen {
    //     font-size: 20px;
    //     color: #292a2d;
    //     display: block;
    //     padding-top: 5px;
    //     box-sizing: border-box;
    //     height: 100%;
    //   }

    //   .point-number {
    //     font-size: 34px;
    //     line-height: 36px;
    //     font-weight: 600;
    //     color: #5491f3;
    //     &.numberMore {
    //       font-size: 28px;
    //     }
    //   }
    // }
    // .point-box1 {
    //   position: absolute;
    //   left: 50%;
    //   height: 36px;
    //   top: 50%;
    //   width: 100%;
    //   transform: translate(-50%, -50%);
    //   width: fit-content;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;

    //   span.fen {
    //     font-size: 20px;
    //     line-height: 36px;
    //     color: #292a2d;
    //   }

    //   .point-number {
    //     font-size: 34px;
    //     line-height: 36px;
    //     font-weight: 600;
    //     color: #5491f3;
    //     &.numberMore {
    //       font-size: 28px;
    //     }
    //   }
    // }
  }
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vant中的Address组件是一个地址栏编辑组件,用于在Vue项目中进行地址信息的编辑和保存。首先,你需要在项目中引入Vant库并注册AddressEdit组件。可以使用以下代码进行引入和注册: ```javascript import Vue from 'vue'; import { AddressEdit } from 'vant'; Vue.use(AddressEdit); ``` 接下来,你需要提供AddressEdit组件所需的数据,其中包括地址信息列表(areaList)。你可以从Vant团队的vant库中下载area.js文件,并将其粘贴到你的项目文件夹中。然后,在你的.vue文件中引入area.js文件,并将其作为areaData导入。你可以使用以下代码进行引入: ```javascript import areaData from './area.js' ``` 在你的模板中,你可以使用AddressEdit组件,并传入相应的props和事件处理函数。例如,你可以使用以下代码: ```html <template> <div> <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result :search-result="searchResult" :area-columns-placeholder="\['请选择', '请选择', '请选择'\]" @save="onSave" /> </div> </template> ``` 在点击保存按钮时,AddressEdit组件会触发save事件,并将表单内容作为参数传递给事件处理函数。你可以在事件处理函数中获取表单内容,并进行相应的操作。例如,你可以使用以下代码来获取表单内容: ```javascript // 点击保存按钮 onSave(content) { console.log(content); } ``` 在这个例子中,content变量将包含表单的最终结果。你可以根据需要对其进行处理。 #### 引用[.reference_title] - *1* *2* *3* [使用vant中的地址编辑组件](https://blog.csdn.net/weixin_43709908/article/details/103412746)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值