jset编写测试vue代码_视觉完美 四角边框（带圆弧）组件 代码编写和分享 Vue.js...

最新推荐文章于 2022-10-13 17:02:36 发布
最新推荐文章于 2022-10-13 17:02:36 发布
阅读量318 收藏
点赞数
文章标签： jset编写测试vue代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39566914/article/details/112431545
版权

b413bcc46ed3ca2f97d028f88ba64cad.png

业务场景需要一个边框组件 三角边框和一个角为圆弧的组件

  1. 谷歌了一番 最多的是 四个角为直角 但是业务需求是三个角为直角和一个角为弧形 其余的时候为四个角直角
  2. 最终实现:

5c90748ae6b9084687c06e7c197be7d1.png

3.经过N次修改改成的

方案思路

  1. 一开始看网络上的 发现大部分都是用背景渐变完成的 不行 因为弧形的边框背景渐变无法完成.
  2. 开始使用伪类来解决问题 弧形用图片解决 不行 因为项目是大屏一旦放到大屏上图片弧形的就会出现像素模糊再加上切图困难 放弃
  3. 没办法 只能用 div 解决 弧形就用 border-radius 来解决问题

具体解决

  1. 只能用div做的话 一下子变得简单起来了
  2. 首先我们先做一个div边框作为为外层的边框
  3. 在做四个作为角的边框
  4. 对着四个角用相对路径进行定位
  5. 需要less的calc()方法进行精确计算
  6. 用props进行传值
  7. 用sloit作为内容插槽

需要参数和参数作用

  1. arc: border-radius 边框弯曲弧度 比如你是右下角弯曲就传值 '0 0 20px 0'
  2. arcSrc： 共有 topLeft topRight bottomLeft bottomRight 这些参数 比如你是右下角弯曲就传值 'bottomRight'
  3. colors： 顾名思义这是边框颜色 因为 边框和四个角的颜色不同所以就需要连个颜色 比如内边框为#2d6c90 四角的边框颜色为#153a4f 你应该传值: ['#2d6c90','#153a4f']

完成

具体代码可以点击我的github地址 因为用的是css-model大家可以根据具体业务进行修改 难是不难 主要的是思路~~~

github地址点击

weixin_39566914
关注
Vue大屏实战四：公共组件边框的实现
博主逸尘
09-19 1802
Vue大屏开发之公共边框组件的实现
jset编写测试vue代码_使用 Jest 进行 Vue 单元测试
weixin_31542739的博客
12-23 494
本文介绍：1、vue-cli3下jest环境的搭建2、vue组件基本的测试方法环境配置vue-cli3 的插件使安装流程变得格外简单，通过 vue ui 启动可视化管理系统，在插件栏，点击 ‘添加插件’，搜索 @vue/cli-plugin-unit-jest，点击安装就可以了，对应命令行的 vue add @vue/cli-plugin-unit-jest 命令；这个过程实际上是包含了安装和调用...
css 实现边框四个角效果
每日秃头
07-08 2508
<div class="bottom"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"&gt
DIV外边框圆角样式(任何图片)
04-23
用DIV很方便的控制外边框圆角，以达到不用任何图片而达到美观的效果!!!
组件边框（Border）
WUTAO2213的博客
04-07 763
组件边框（Border） 转载于:https://www.cnblogs.com/trnanks/p/10667697.html
边框，圆角和阴影以及浮动布局的应用！
id2359955624的博客
07-20 1098
边框，圆角和阴影以及浮动布局的应用！
vue之双击实现可编辑组件
weixin_47409897的博客
02-16 1873
目录vue之双击实现可编辑组件editText/EditText.vueeditText/index.jsmain.js使用组件 vue之双击实现可编辑组件 editText/EditText.vue <template> <div> <div v-if="isEdit"> <input type="text" v-model="newVal" /> <button @click="save">保存</b
jset编写测试vue代码_Vue 单元测试 使用mocha+jest
weixin_28389377的博客
12-23 174
vue 单元测试定义：单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。指令：package.json文件"test:unit": "vue-cli-service test:unit"测试驱动开发(tdd：test-driven development)mocha+jest使用expect断言语句是javascript的一种单元测试框架。mocha的特点主要有：既可以测试简...
JSET99Setup.exe
12-15
JSET99Setup.exe
PART2-PFC3D命令集.docx
10-13
它的命令集是程序的核心，通过一系列的命令控制程序的运行和模型的建立。本文件详细介绍了PFC3D的命令集，特别是针对颗粒流问题的命令。 0. 命令格式说明： PFC3D的命令由三部分组成：命令名、必需关键词和可选...
前端自动化测试
阿星君
06-16 786
前端测试 编写测试代码的好处： 更快的发现bug，让绝大多数bug在开发阶段发现，提高产品质量 单元测试，通过运行测试代码，观察输入和输出，有时会比注释更让人理解你的代码。 有利于代码重构，如果一个项目的测试代码写的比较完善，重构过程中改动时可以迅速的通过测试代码是否通过检查来查看重构是否正确，提高重构效率。 编写测试代码的过程，可以让开发人员深入思考业务流程，让代码写的更加完善和规范。 缺点： 并不是所有的项目都需要前端测试，写测试代码是需要花费一定时间的，当项目比较简单的时候，花时间写测试代
vue实现双击编辑
weixin_34326179的博客
07-22 4713
JS 实现双击编辑原始 HTML代码：<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <me...
圆角边框***
weixin_47481102的博客
05-12 2313
在css3中，新增了圆角边框样式，这样盒子就可以变圆角了。 border-radius属性用于设置元素的外边框圆角。 语法： border-radius：length； radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 以上为圆角边框原理 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以做 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下.
ehcarts vue 水球图、边框四个角样式 页面布局
扬帆前行
09-04 2803
echarts+element+vue 水球图和一些css小样式（四个边框角） 1、引入echarts npm install echarts -s npm install echarts-liquidfill -s 2、main.js import echarts from "echarts"; Vue.prototype.$echarts = echarts; import 'echarts-liquidfill' 3、页面调用 // 基于准备好的dom，初始化echarts实例
div边框弧形设计，css3的border-radius属性
weixin_58032613的博客
02-21 3254
border-radius属性 向 div 元素添加圆角边框： <div></div> <style> div { background-color: #15dfdf; width: 350px; height: 350px; border-radius: 36px 36px 36px 36px; } </style>
vue设置圆角半径
xyyyss的博客
10-13 3107
注意，如果你设置了圆角半径还去设置图片的padding和margin会挤压照片使圆角半径变形，会变成矩形。当你想要一个矩形图片能够设置成圆角矩形的时候不需要去修改图片，只需要在style中设置样式即可。只需要在样式里加border-radius：；即可，它一起控制了四个角的圆角半径。这个是单个圆角半径的代码。
内边框直角，外边框圆角
幸福有多远
04-02 1429
Vue弧形轮播菜单导航栏
weixin_44143279的博客
12-30 4753
搞了个弧形轮播导航栏，轮播有动画过渡，可设置自动轮播，以及手动左右切换，只提供我的实现方法，没有集成为组件，大家可做参考根据自己的需求进行修改，优化封装成组件使用。 视频演示，有点模糊，手机拍的。 有什么问题评论见 <template> <div class="user_callback"> <div class="user_pic" id="user_pic"> <span class="prev"></s
noaa日出日落算法
最新发布
12-20
以下是使用NOAA日出日落算法计算日出和日落时间的示例代码： ```python import datetime import math def calculate_julian_day(year, month, day): if month <= 2: year -= 1 month += 12 A = math.floor(year / 100) B = 2 - A + math.floor(A / 4) julian_day = math.floor(365.25 * (year + 4716)) + math.floor(30.6001 * (month + 1)) + day + B - 1524.5 return julian_day def calculate_sunrise_sunset(latitude, longitude, date): julian_day = calculate_julian_day(date.year, date.month, date.day) n = julian_day - 2451545.0 + 0.0008 Jc = n / 36525.0 Jd = 2451545.0 + 0.0009 + Jc M = (357.5291 + 0.98560028 * (Jd - 2451545.0)) % 360 L = (280.46646 + 0.98564736 * (Jd - 2451545.0)) % 360 ec = 0.016708634 - 0.000042037 * Jc C = (1.914602 - 0.004817 * Jc - 0.000014 * Jc**2) * math.sin(math.radians(M)) + (0.019993 - 0.000101 * Jc) * math.sin(math.radians(2 * M)) + 0.000289 * math.sin(math.radians(3 * M)) true_longitude = L + C omega = 125.04 - 1934.136 * Jc lambda_sun = true_longitude - 0.00569 - 0.00478 * math.sin(math.radians(omega)) epsilon = 23.439291 - 0.0130042 * Jc sin_alpha = math.cos(math.radians(epsilon)) * math.sin(math.radians(lambda_sun)) cos_alpha = math.sqrt(1 - sin_alpha**2) alpha = math.degrees(math.atan2(sin_alpha, cos_alpha)) hour_angle = math.degrees(math.acos((math.sin(math.radians(-0.83)) - math.sin(math.radians(latitude)) * math.sin(math.radians(alpha))) / (math.cos(math.radians(latitude)) * math.cos(math.radians(alpha))))) Jtransit = 2451545.0 + 0.0009 + ((hour_angle + longitude) / 360.0) + n delta_Jtransit = Jtransit - math.floor(Jtransit) Jset = Jtransit + (0.0053 * math.sin(math.radians(omega))) - (0.0069 * math.sin(2 * math.radians(lambda_sun))) delta_Jset = Jset - math.floor(Jset) Jrise = Jtransit - delta_Jtransit Jrise_next = Jrise + 1.0 sunrise_time = datetime.datetime.utcfromtimestamp((Jrise - 2451545.0) * 86400.0) sunset_time = datetime.datetime.utcfromtimestamp((Jset - 2451545.0) * 86400.0) return sunrise_time, sunset_time # 示例使用 latitude = 37.7749 # 纬度 longitude = -122.4194 # 经度 date = datetime.datetime(2022, 1, 1) # 日期 sunrise, sunset = calculate_sunrise_sunset(latitude, longitude, date) print("日出时间：", sunrise) print("日落时间：", sunset) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值