vue 步骤条: 虚线样式、进度条


1. 图:


2.代码:

div:

<div class="killwrap">

      <div class="killBox" v-for="(item, index) in subList" :key="index">

        <li class="killTitle">{ { item.createTime }}</li>

        <li class="killBottom">

          <span></span>

          <span></span>

          <span class="Killvoid"></span>

        </li>

        <!--  -->

        <div class="Jsts">

          <div class="JstsBox">

            <span>接收投诉</span>

            <span>接收人: 刘建筑</span>

            <span @click="edit(item)"><i class="bj">编辑</i></span>

          </div>

          <div class="Jsts_wrap">

            <div class="Jsts_left" v-if="item.name">

              <span clas

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要修改 Vue 步骤条(steps)的样式,可以通过以下步骤: 1. 在组件中引入需要的样式文件,比如 `element-ui/lib/theme-chalk/steps.css`。 2. 在 `style` 标签或单独的 `.css` 文件中编写自定义样式。例如,以下示例代码将步骤条的颜色修改为红色: ```css .el-step.is-process .el-step__line, .el-step.is-finish .el-step__line { background-color: red; } .el-step.is-process .el-step__icon-inner, .el-step.is-finish .el-step__icon-inner { border-color: red; } ``` 3. 将自定义样式应用到步骤条组件中。可以通过以下两种方式实现: - 使用 `class` 属性。在步骤条组件上添加 `class` 属性,并在自定义样式中使用该 `class` 选择器。例如: ```html <el-steps class="my-steps"></el-steps> ``` ```css .my-steps .el-step.is-process .el-step__line, .my-steps .el-step.is-finish .el-step__line { background-color: red; } .my-steps .el-step.is-process .el-step__icon-inner, .my-steps .el-step.is-finish .el-step__icon-inner { border-color: red; } ``` - 使用 `scoped` 属性。在步骤条组件的 `style` 标签上添加 `scoped` 属性,这样样式只会应用到该组件内部。例如: ```html <el-steps> <style scoped> .el-step.is-process .el-step__line, .el-step.is-finish .el-step__line { background-color: red; } .el-step.is-process .el-step__icon-inner, .el-step.is-finish .el-step__icon-inner { border-color: red; } </style> </el-steps> ``` 以上是修改 Vue 步骤条(steps)样式的方法,可以根据具体的需求进行自定义。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值