您现在的位置是:首页 > Javascript
当前栏目
Vue3.0概要小卡片组件
2023-04-18 14:09:04 时间
组件
<template>
<div id="card" :style="cardStyle">
<div class="main">
<img class="img" :src="image" :style="imgStyle"/>
<div class="text">
<label class="title" :style="titleStyle">{{title}}</label>
<label class="detail">{{detail}}</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Card",
props: {
image: {
type: String,
default: "https://file.zhtsu.cn/light-radius.png"
},
title: {
type: String,
default: "标题"
},
detail: {
type: String,
default: "这里是详细信息"
},
height: {
type: String,
default: "100"
},
color: {
type: String,
default: "#456D8A"
}
},
data() {
return {
ht: this.height,
cardStyle: "",
titleColor: this.color,
titleStyle: "",
imgStyle: ""
}
},
mounted() {
this.cardStyle = `width: ${3 * this.ht}px; height: ${this.ht}px;`
this.imgStyle = `width: ${this.ht - 20}px; height: ${this.ht - 20}px;`
this.titleStyle = `color: ${this.titleColor}`
}
};
</script>
<style scoped>
.main {
position: relative;
width: 100%;
height: 100%;
background-color: white;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
border-radius: 10px;
margin: 10px;
}
.main:hover {
background: rgba(255, 255, 255, 0.65);
transform: scale(102%, 102%);
}
.img {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
margin-left: 10px;
float: left;
}
.text {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.title {
display: block;
font-size: 24px;
color: #456D8A;
margin: 5px;
font-weight: bold;
text-shadow: 1px 1px 1px grey;
}
.detail {
display: block;
font-size: 15px;
display: block;
margin: 5px;
color: #7b7b7b;
}
</style>
可选参数
参数名 | 说明 |
---|---|
image | 图片的在线链接。不支持本地链接 |
height | 卡片的高度。宽度总是为高度的 3 倍 |
color | 卡片右侧上方标题字体颜色 |
title | 卡片右侧上方标题文本 |
detail | 卡片右侧下方详细信息文本 |
效果图
相关文章
- dart系列之:HTML的专属领域,除了javascript之外,dart也可以
- 软通动力鸿蒙生态建设再进一步 分布式技术抢先体验
- Kurento实战之五:媒体播放
- Kurento实战之六:云端录制
- Vue插件编写
- WiFi 7要来了,但它真的靠谱吗?
- 返乡潮疫情防控加码,腾讯云低码开发助力健康码快速升级
- SpringBoot自动配置原理,你真的懂吗?
- SpringBoot最佳实践,它来了,它来了
- 面向对象设计的九大基本原则 (GRASP)
- 【神笔aPaaS】11月能力月报
- Jetty架构设计之Connector、Handler组件
- HarmonyOS入门第一课:初识HarmonyOS
- [前端学习]一文 Vue指令
- [前端学习]文件组件专题
- [前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)
- 原生JS实现组件式开发
- Kettle教程[2] 程序员小姐姐的第二次邂逅——JOB(作业)开发
- 2021前端react高频面试题汇总
- 在JavaScript中支持“模式匹配技术”