当前位置: 首页 > news >正文

vue竖向步骤条

效果图:

弹框组件代码:

<template><el-dialog:visible.sync="dialogVisible":append-to-body="true":close-on-click-modal="false":close-on-press-escape="false"titlewidth="8.2rem"custom-class="assistance-dialog"center><div class="assistance-cont flex-top-start"><div class="assistance-code-box">左边</div><div class="assistance-steps flex-column-between"><div class="assistance-steps-box"><div class="assistance-steps-title">助力步骤</div><div class="assistance-steps-cont"><div class="assistance-steps-line"></div><div class="assistance-steps-item-cont"><divclass="assistance-steps-item flex-start"v-for="(item, index) in stepsCont":key="index"><div class="assistance-steps-item-idx">{{ index + 1 }}</div><div class="assistance-steps-item-name">{{ item }}</div></div></div></div></div><div class="flex-end"><el-button type="primary">保存海报</el-button></div></div></div></el-dialog>
</template><script>
export default {name: "assistance-dialog",props: {value: {type: Boolean,default: false,},},components: {},data() {return {stepsCont: ["保存海报","发送海报给好友","好友扫码登录小程序","助力成功",],};},computed: {dialogVisible: {get() {return this.value;},set(val) {this.$emit("input", val);},},},watch: {},methods: {},created() {},mounted() {},beforeCreate() {},beforeMount() {},beforeUpdate() {},updated() {},beforeDestroy() {},destroyed() {},activated() {},
};
</script>
<style lang='scss' scoped>
.assistance-dialog {.assistance-code-box {width: 3.45rem;height: 5.07rem;background: #f4f6f9;border-radius: 0.08rem;margin-right: 0.32rem;}.assistance-steps {height: 5.07rem;flex: 1;}.assistance-steps-box {width: 100%;.assistance-steps-title {font-size: 0.21rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #242e42;line-height: 0.29rem;margin-bottom: 0.24rem;}.assistance-steps-cont {width: 100%;position: relative;}.assistance-steps-line {position: absolute;width: 0.32rem;height: 3.32rem;border-left: 1px dashed rgba(0, 101, 255, 1);top: 0.3rem;left: 0.16rem;z-index: 1;}.assistance-steps-item-cont {width: 100%;height: 4rem;position: absolute;z-index: 2;}.assistance-steps-item:not(:last-child) {margin-bottom: 0.8rem;}.assistance-steps-item-idx {width: 0.32rem;height: 0.32rem;line-height: 0.32rem;text-align: center;background: #0065ff;border-radius: 0.08rem;font-size: 0.18rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #ffffff;margin-right: 0.16rem;}.assistance-steps-item-name {font-size: 0.18rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #242e42;line-height: 0.25rem;}}
}
</style>

页面引用:

<template><div id="index"><!-- 助力 --><assistance-dialog v-model="showAssistance"></assistance-dialog></div>
</template>
<script>
export default {name: "index",layout: "default",components: {"assistance-dialog": () =>import("@/components/coupon/assistance-dialog.vue"), //助力},data() {return {showAssistance: true, //助力};},mounted() {},methods: {},
};
</script>

http://www.lryc.cn/news/150873.html

相关文章:

  • java八股文面试[多线程]——Synchronized优化手段:锁膨胀、锁消除、锁粗化和自适应自旋锁
  • 【数据结构】队列---C语言版(详解!!!)
  • java:详解http模块request对象
  • 力扣20. 有效的括号
  • 用springboot+elasticserach7的demo,对比sider和百度ai的异同
  • Python的pymysql模块与MySQL数据库的互动:基础与实例
  • 滑动窗口实例1(长度最小的子数组)
  • EI、Scopus双检索| 2023年第四届自动化、机械与设计工程国际会议
  • 【混合时变参数系统参数估计算法】使用范数总和正则化和期望最大化的混合时变参数系统参数估计算法(Matlab代码实现)
  • vue的公共方法封装以及class高阶封装
  • OpenGL-入门-BMP像素图glReadPixels(1)实现读取屏幕中间的颜色和获取屏幕上鼠标点击位置的颜色
  • 斥资4亿,收购这家WLAN厂商,结果……
  • 【简单】2511. 最多可以摧毁的敌人城堡数目
  • Linux用一键安装包部署禅道(18.5版本)
  • 【2】openGL shader着色器分析三角形填色
  • mysql数据表Table is marked as crashed and should be repaired 的解决办法
  • 【Unity基础】1.项目搭建与视图编辑
  • C语言每日一练---Day(14)
  • 基于孔雀算法优化的BP神经网络(预测应用) - 附代码
  • 【小沐学Unity3d】3ds Max 骨骼动画制作(蒙皮修改器skin)
  • 【Latex】使用技能站:(三)使用 Vscode 配置 LaTeX
  • 诗诺克科技引领数字资产智能交易革命
  • 混合编程python与C++
  • 【单片机】单片机入门指南
  • 【PyQt】下载文件时弹出提示用户选择保存文件位置的对话框
  • 工具分享 | PDF文档解析工具PyMuPDF
  • QML Book 学习基础5(An Image Viewer)
  • 解决Jackson解析JSON时出现的Illegal Character错误
  • feign和openfeign的区别
  • Python飞机大战小游戏