首页 > 其他分享 >【技术实战】Vue技术实战【五】

【技术实战】Vue技术实战【五】

时间：2023-07-29 12:35:40浏览次数：31  
标签：实战 Vue container transform 进度条 button 技术 number 组件

需求实战一

效果展示

代码展示

<template>
    <div class="home-component">
        <div class="progress-container">
            <a-progress type="circle" :percent="number" />
        </div>
        <ARow>

        <div class="button-container">
            <a-button type="primary" @click="addNumber">增加数值</a-button>
        </div>
            &nbsp
            &nbsp
            &nbsp
        <div class="button-container">
            <a-button type="primary" @click="minNumber">减少数值</a-button>
        </div>
        </ARow>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const number = ref(80);
const addNumber = () => {
    number.value = number.value + 10;
};
const minNumber = () => {
    number.value = number.value - 10;
};
</script>
<style scoped>
.home-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.progress-container {
    padding: 30px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.button-container {
    padding: 30px 0;
}
.button-container a-button {
    color: #fff;
    border: none;
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
/* Additional Effects and Styles */
.progress-container {
    background-color: #f2f2f2;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.button-container {
    display: flex;
    justify-content: center;
}
.button-container a-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>

代码解读

这段代码是一个Vue组件的模板，用于展示一个带有进度条和增减按钮的页面组件。下面是对代码的解读：   1. <template> 标签中定义了组件的HTML结构。    - home-component 类名的 <div> 元素是整个组件的容器，设置了居中对齐和垂直居中。    - progress-container 类名的 <div> 元素是进度条的容器，设置了内边距和一个动画效果。    - <a-progress> 是Ant Design Vue库中的进度条组件，通过 :percent 属性绑定了一个名为 number 的响应式数据。    - <ARow> 是Ant Design Vue库中的布局组件，用于创建一个行容器。   2. <script setup> 标签中定义了组件的逻辑部分。    - import { ref } from 'vue' 导入了Vue的 ref 函数，用于创建响应式数据。    - const number = ref(80) 创建了一个名为 number 的响应式数据，初始值为80。    - const addNumber 是一个箭头函数，用于增加 number 的值。    - const minNumber 是一个箭头函数，用于减少 number 的值。   3. <style scoped> 标签中定义了组件的样式。    - .home-component 类名设置了容器的样式，使其居中对齐和垂直居中。    - .progress-container 类名设置了进度条容器的样式，包括内边距和一个动画效果。    - .button-container 类名设置了按钮容器的样式，包括内边距和一个动画效果。    - .button-container a-button 类名设置了按钮的样式，包括颜色、边框和一个动画效果。   这段代码的作用是创建一个带有进度条和增减按钮的页面组件，用户可以通过点击按钮来增加或减少进度条的数值。

需求实战二

效果展示

代码展示

<template>
  <div class="home-component">
    <div class="progress-container">
      <a-progress type="circle" :percent="number" />
    </div>
    <ARow>
    <ACol span="10">
    <div class="button-container">
      <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
    </div>
    </ACol>
      <ACol span="4">
      </ACol>
      <ACol span="10">

    <div class="button-container">
      <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
    </div>
    </ACol>
    </ARow>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const number = ref(80);
const addNumber = () => {
  number.value = number.value + 10;
};
const minNumber = () => {
  number.value = number.value - 10;
};
</script>
<style scoped>
.home-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.progress-container {
  padding: 30px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.button-container {
  padding: 30px 0;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* Additional Effects and Styles */
.progress-container {
  background-color: #f2f2f2;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite, bounce 2s infinite;
}
.button-container {
  display: flex;
  justify-content: center;
}
.increase-button {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
  animation: bounce 2s infinite;
}
.increase-button:hover {
  background-color: #38b2ac;
  transform: scale(1.1);
}
.decrease-button {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
  animation: bounce 2s infinite;
}
.decrease-button:hover {
  background-color: #eb5766;
  transform: scale(1.1);
}
</style>

代码解读

这段代码是一个Vue组件的模板，用于展示一个带有进度条和增减按钮的页面组件。下面是对代码的解读：   1. <template> 标签中定义了组件的HTML结构。    - home-component 类名的 <div> 元素是整个组件的容器，设置了居中对齐和垂直居中。    - progress-container 类名的 <div> 元素是进度条的容器，设置了内边距和一个动画效果。    - <a-progress> 是Ant Design Vue库中的进度条组件，通过 :percent 属性绑定了一个名为 number 的响应式数据。    - <ARow> 是Ant Design Vue库中的布局组件，用于创建一个行容器。    - <ACol> 是Ant Design Vue库中的布局组件，用于创建一个列容器。   2. <script setup> 标签中定义了组件的逻辑部分。    - import { ref } from 'vue' 导入了Vue的 ref 函数，用于创建响应式数据。    - const number = ref(80) 创建了一个名为 number 的响应式数据，初始值为80。    - const addNumber 是一个箭头函数，用于增加 number 的值。    - const minNumber 是一个箭头函数，用于减少 number 的值。   3. <style scoped> 标签中定义了组件的样式。    - .home-component 类名设置了容器的样式，使其居中对齐和垂直居中。    - .progress-container 类名设置了进度条容器的样式，包括内边距和一个动画效果。    - .button-container 类名设置了按钮容器的样式，包括内边距。    - .increase-button 类名设置了增加按钮的样式，包括字体大小、字体粗细、文本转换和一个动画效果。    - .decrease-button 类名设置了减少按钮的样式，包括字体大小、字体粗细、文本转换和一个动画效果。   这段代码的作用是创建一个带有进度条和增减按钮的页面组件，用户可以通过点击按钮来增加或减少进度条的数值。进度条容器和按钮容器都设置了动画效果，增加按钮在鼠标悬停时会有背景颜色和缩放的变化，减少按钮也有类似的效果。

需求实战三

效果展示

代码展示

<template>
  <div class="home-component">
    <div class="progress-container">

      <a-progress type="circle" :percent="number" strokeColor="#38b2ac" strokeWidth="10"/>
    </div>
    <ARow>
      <ACol span="10">
        <div class="button-container">
          <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
        </div>
      </ACol>
      <ACol span="4">
      </ACol>
      <ACol span="10">
        <div class="button-container">
          <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
        </div>
      </ACol>
    </ARow>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
const number = ref(80);
const addNumber = () => {
  number.value = (number.value + 10) % 100;
};
const minNumber = () => {
  number.value = (number.value - 10 > 0) ? (number.value - 10) : 0;
};
</script>


<style scoped>
.home-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.progress-container {
  position: relative;
  padding: 30px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.button-container {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  animation: bounce 2s infinite;
  animation-delay: 1s;
}
.increase-button,
.decrease-button {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
  transition: all 0.3s;
  border-radius: 5px;
}
.increase-button {
  background-color: #38b2ac;
  margin-right: 10px;
}
.decrease-button {
  background-color: #eb5766;
  margin-left: 10px;
}
.increase-button:hover,
.decrease-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
</style>

代码解释

这段代码是一个Vue组件的模板，用于展示一个带有自定义样式的进度条和增减按钮的页面组件。下面是对代码的解读：   1. <template> 标签中定义了组件的HTML结构。    - home-component 类名的 <div> 元素是整个组件的容器，设置了居中对齐和垂直居中。    - progress-container 类名的 <div> 元素是进度条的容器，设置了内边距和一个动画效果。    - <a-progress> 是Ant Design Vue库中的进度条组件，通过 :percent 属性绑定了一个名为 number 的响应式数据。strokeColor 属性设置了进度条的颜色，strokeWidth 属性设置了进度条的宽度。    - <ARow> 是Ant Design Vue库中的布局组件，用于创建一个行容器。    - <ACol> 是Ant Design Vue库中的布局组件，用于创建一个列容器。   2. <script setup> 标签中定义了组件的逻辑部分。    - import { ref } from 'vue' 导入了Vue的 ref 函数，用于创建响应式数据。    - const number = ref(80) 创建了一个名为 number 的响应式数据，初始值为80。    - const addNumber 是一个箭头函数，用于增加 number 的值。增加后的值通过取模运算限制在0到100之间。    - const minNumber 是一个箭头函数，用于减少 number 的值。减少后的值通过判断是否小于0来限制在0以上。   3. <style scoped> 标签中定义了组件的样式。    - .home-component 类名设置了容器的样式，使其居中对齐和垂直居中。    - .progress-container 类名设置了进度条容器的样式，包括内边距和一个动画效果。    - .button-container 类名设置了按钮容器的样式，包括内边距和一个动画效果。    - .increase-button 和 .decrease-button 类名设置了增加按钮和减少按钮的样式，包括字体大小、字体粗细、文本转换、背景颜色、边框、过渡效果和边框半径。   这段代码的作用是创建一个带有自定义样式的进度条和增减按钮的页面组件。进度条的颜色和宽度可以通过属性进行自定义，增加和减少按钮有鼠标悬停时的缩放和阴影效果。

需求实战四

效果展示

代码展示

<template>
  <div class="home-component">
    <div class="progress-container">
      <a-progress type="circle" :percent="number" :strokeColor="progressColor" strokeWidth="10"/>
    </div>
    <ARow>
      <ACol span="10">
        <div class="button-container">
          <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
        </div>
      </ACol>
      <ACol span="4"></ACol>
      <ACol span="10">
        <div class="button-container">
          <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
        </div>
      </ACol>
    </ARow>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const number = ref(80);
const addNumber = () => {
  number.value = (number.value + 10) % 100;
};
const minNumber = () => {
  number.value = number.value - 10 > 0 ? number.value - 10 : 0;
};
const progressColor = computed(() => {
  return number.value > 50 ? '#38b2ac' : '#eb5766';
});
</script>
<style scoped>
.home-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.progress-container {
  position: relative;
  padding: 30px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.button-container {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  animation: bounce 2s infinite;
  animation-delay: 1s;
}
.increase-button,
.decrease-button {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
  transform: scale(1.05) rotate(360deg);
  transition: transform 1s;
  border-radius: 5px;
}
.increase-button {
  background-color: #38b2ac;
  margin-right: 10px;
}
.decrease-button {
  background-color: #eb5766;
  margin-left: 10px;
}
.increase-button:hover,
.decrease-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
.progress-container {
  background-image: -webkit-linear-gradient(left, #38b2ac, #eb5766);
}
</style>

代码解读

这段代码是一个Vue组件的模板，用于展示一个带有自定义样式的进度条和增减按钮的页面组件。下面是对代码的解读：   1. <template> 标签中定义了组件的HTML结构。    - home-component 类名的 <div> 元素是整个组件的容器，设置了居中对齐和垂直居中。    - progress-container 类名的 <div> 元素是进度条的容器，设置了内边距和一个动画效果。    - <a-progress> 是Ant Design Vue库中的进度条组件，通过 :percent 属性绑定了一个名为 number 的响应式数据。strokeColor 属性通过计算属性 progressColor 来动态设置进度条的颜色，strokeWidth 属性设置了进度条的宽度。    - <ARow> 是Ant Design Vue库中的布局组件，用于创建一个行容器。    - <ACol> 是Ant Design Vue库中的布局组件，用于创建一个列容器。   2. <script setup> 标签中定义了组件的逻辑部分。    - import { ref, computed } from 'vue' 导入了Vue的 ref 和 computed 函数，用于创建响应式数据和计算属性。    - const number = ref(80) 创建了一个名为 number 的响应式数据，初始值为80。    - const addNumber 是一个箭头函数，用于增加 number 的值。增加后的值通过取模运算限制在0到100之间。    - const minNumber 是一个箭头函数，用于减少 number 的值。减少后的值通过判断是否小于0来限制在0以上。    - const progressColor 是一个计算属性，根据 number 的值动态返回进度条的颜色。   3. <style scoped> 标签中定义了组件的样式。    - .home-component 类名设置了容器的样式，使其居中对齐和垂直居中。    - .progress-container 类名设置了进度条容器的样式，包括内边距和一个动画效果。    - .button-container 类名设置了按钮容器的样式，包括内边距和一个动画效果。    - .increase-button 和 .decrease-button 类名设置了增加按钮和减少按钮的样式，包括字体大小、字体粗细、文本转换、背景颜色、边框、过渡效果和边框半径。    - .progress-container 类名设置了进度条容器的背景渐变色。   这段代码的作用是创建一个带有自定义样式的进度条和增减按钮的页面组件。进度条的颜色根据进度值动态变化，增加和减少按钮有鼠标悬停时的缩放和阴影效果。进度条容器的背景使用了渐变色。你可以根据这段代码的解读来写博客，介绍这个组件的功能和实现原理。

标签：实战,Vue,container,transform,进度条,button,技术,number,组件
From： https://www.cnblogs.com/yyyyfly1/p/17586837.html

相关文章

  • vue-cli3.0 项目无法通过ip访问
    第一:在 package.json中添加 --host0.0.0.0 第二：在 vue.config.js中添加host：0.0.0.0 ......
  • app直播源码平台开发防护技术鉴权功能的部署
    我们在生活中，常常会遇到身份验证的事情，我们每个人也会有证明身份的各种工具，就比如：在考试中我们会使用准考证进行身份验证；在乘坐高铁、飞机时，我们会用身份证或是高铁票、机票证明我们的身份。这也是为了防止有些人去顶替、冒充别人的身份去占有别人的权益的事情，也防止一些不法分子去......
  • vue3 TS vite element ali-oss使用方式
    vue3TSviteelementali-oss使用方式安装ali-oss包npmiali-oss-S使用oss封装函数constOSS=require('ali-oss')//importOssfrom'ali-oss'/***[accessKeyId]{String}：通过阿里云控制台创建的AccessKey。*[accessKeySecret]{String}：通过阿里云控制......
  • 的接口自动化测试框架实战训练目录
    1.目前市面上实现接口自动化测试行情2.Requests请求方法和传参详解3.Post请求中Data传参和Json传参的差异以及请求头4.Response对象属性和方法详解5.正则表达式提取器和JsonPath提取器的应用6.接口自动化测过实战以及Cookie.TokenSession鉴权7.接口自动化测试框架封装之统一......
  • app直播源码平台开发防护技术鉴权功能的部署
     我们在生活中，常常会遇到身份验证的事情，我们每个人也会有证明身份的各种工具，就比如：在考试中我们会使用准考证进行身份验证；在乘坐高铁、飞机时，我们会用身份证或是高铁票、机票证明我们的身份。这也是为了防止有些人去顶替、冒充别人的身份去占有别人的权益的事情，也防止一些不法分......
  • vue3单页面的写法
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>......
  • AIGC与NLP大模型实战-经典CV与NLP大模型及其下游应用任务实现
    点击下载：AIGC与NLP大模型实战-经典CV与NLP大模型及其下游应用任务实现提取码:hqq8当今社会是科技的社会，是算力快速发展的时代。随着数据中心、东数西算、高性能计算、数据分析、数据挖掘的快速发展，大模型得到了快速地发展。大模型是“大算力+强算法”相结合的产物，是人工智能的发展......
  • Vue3下的axios跨域问题
    0、vue-cli版本vue-Vvue--version   1、根目录找vue.config.js，无则添加文件；然后添加节点： const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭语法检查de......
  • vue使用directives V-指令限制输入框内容
    在一些表单中输入框需要前端加入限制，比如需要用户输入的是非负数的整数，这时候我们可以使用v-指令只要在input里加上就行。不需要一个个的去校验，省去的校验的代码<el-input-numberv-model="typeModel.jyCheckNum"clearableplaceholder="请输入不合格数"size="small"v-ente......
  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况，好奇怎么通过ref取到render中jsx里的节点，一开始试了以下的尝试，结果是undefined的：import{defineComponent,ref,onMounted}from"vue";exportdefault......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99