css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证

css磨砂效果

效果图

实现方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html,body {width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;}.container {height: 100vh;background-repeat: no-repeat;}.container,.box::before {background: url("xxx") 0 / cover fixed;z-index: -1;}.box {z-index: 5; /* 设置为最高层，不影响内容显示 */position: absolute;top: 30%;left: 35%;width: 500px;height: 370px;border-radius: 4%;text-align: center;background: hsla(0, 0%, 100%, 0.3);color: #f2e2e2;}.box::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;filter: blur(20px);}</style></head><body><div class="container"><div class="box"></div></div></body>
</html>

关键点

/* 模糊处理 */
background: hsla(0, 0%, 100%, 0.3);
filter: blur(20px);

HSLA(H,S,L,A)
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

filter: blur(radius)
radius是半径，即屏幕上有多少像素相互融合，较大的值会产生更多模糊,单位px，不接受%

只给边框背景设置hsla只有边框半透明的效果:

要有像毛玻璃那样背景模糊的效果需要在box的底下再加上模糊的底层:

 .box::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;filter: blur(20px);}

el-progress进度条渐变

效果图:

实现方法

直接改内部样式:

::v-deep .el-bg-inner-running .el-progress-bar__inner {background: #9cecfb; /* fallback for old browsers */background: -webkit-linear-gradient(to left,#0052d4,#65c7f7,#9cecfb); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left,#0052d4,#65c7f7,#9cecfb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

axios的使用

安装

npm install axios
# 用于提交表单
npm install qs

配置

没有就自己建个

import axios from 'axios'
import qs from "qs"
const request = axios.create({timeout: 10 * 1000,headers: {// 这里取决于后端要哪种'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
})
export default {// post类型postLogin: (data) => {return axios.post('/api/login', qs.stringify(data))},// get类型recommendmovieforuser: (data) => {return axios.get('/api/recommendmovieforuser?', data)}
}

使用

在需要用到接口的页面引入

调用接口

 某个方法名 () { // 接口调用api.之前暴露出的接口名(要传的数据).then((res) => {if (!res) {return}console.log('res.data=', res.data)if (res.data.status != 200) {this.$message({message: res.data.message || "请求失败",type: "error",})return}this.$message({message: "请求成功",type: "success",})console.log('res.data.data=', res.data.data)}).catch(() => {this.$message.error('资源获取错误！')})},

跨域配置

修改vue.configs.js

比如说请求接口:http://192.168.222.11:3000/login,在api那里地址要写/api/login

 devServer: {host: 'localhost',port: 8080,proxy: {'/api': {target: "http://192.168.xxx.xxx:xx/",//后端地址changeOrigin: true,//确定跨域pathRewrite: {'^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api}}}}

注意点: vue.configs.js修改后要再次yarn serve/npm run serve使其生效

关闭eslint验证

一般还是需要的，如果觉得没必要的话:

注释.eslintrc.js

2. 修改vue.config.js

transpileDependencies: true //

css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证相关推荐

使用css渐变色。实现动态进度条效果
基本上现在的ui框架都有自己的进度条组件封装但是有的时候我们需要自己定制的时候还是比较麻烦比如下面的这个效果双色进度条贴合效果.可能有点业务会用到吧就是使用渐变色和动画的效果实现, 第 ...
android 进度条渐变方法
进度条渐变效果如下图: 在drawable文件夹中创建jian.xml 主要代码: //半径<corners android:radius="5dip"/><g ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
elementui进度条如何设置_ElementUI之Progress进度条底色设置
ElementUI中Progress进度条组件官网给了如下属性: 这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好).但是官网并没有给出设置底色的属性,只给了一个默认的颜色,F1 ...
CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条一.Box-shadow圆环进度条二.效果预览三.原理刨析四.实际应用五.总结 ...
python 视频播放拖动_视频画中画效果，拖动进度条可以seek到相应视频帧显示
在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面. 这个需求,如果是你,你会如何做? 通常一个需求,不仅要考虑实现,还有考虑一些是 ...

css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证

css磨砂效果

效果图

实现方法

关键点

el-progress进度条渐变

效果图:

实现方法

axios的使用

安装

配置

使用

跨域配置

修改vue.configs.js

关闭eslint验证

css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证相关推荐

最新文章

热门文章