代码做网站图片怎么插,网络公司排名最新排名,做园区门户网站的需求分析,百科网站建设文章目录 需求效果如下图所示代码逻辑代码参考 需求
开发一个箭头组件#xff0c;根据父组件传递的 props 来修改 css 的颜色
效果如下图所示 代码逻辑 代码
父组件#xff1a;
Arrow colorred /子组件#xff1a;
templatediv class根据父组件传递的 props 来修改 css 的颜色
效果如下图所示 代码逻辑 代码
父组件
Arrow colorred /子组件
templatediv classarrow :style{ --arrow-color: color, --arrow-width: ${width}px,--arrow-rotation: ${rotation}deg}/div
/templatescript langts setup
import { defineProps } from vue;const props defineProps({color: {type: String,default: black},width: {type: Number,default: 30},rotation: {type: Number,default: 0 // 旋转角度默认不旋转}
});
/scriptstyle scoped
.arrow {display: inline-block;position: relative;margin: 10px;width: var(--arrow-width);transform: rotate(var(--arrow-rotation)); /* 添加旋转样式 */
}.arrow::before {content: ;position: absolute;top: 50%;left: 0;width: var(--arrow-width);border-top: 2px dotted var(--arrow-color);transform: translateY(-50%);
}.arrow::after {content: ;position: absolute;top: 50%;left: calc(var(--arrow-width) - 8px);width: 0;height: 0;border-left: 10px solid var(--arrow-color);border-top: 7px solid transparent;border-bottom: 7px solid transparent;transform: translateY(-50%);
}
/style参考
1. 使用 CSS 自定义属性变量 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
