iview的step组件自定义样式

最新推荐文章于 2025-02-24 16:23:50 发布

置顶过往深处少年蓝

最新推荐文章于 2025-02-24 16:23:50 发布

阅读量2.5k

点赞数 2

分类专栏： iview 文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/qq_39009348/article/details/120637594

版权

iview 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue中使用Steps组件并结合v-for指令动态渲染步骤条。通过slot插槽功能，实现了根据不同字段改变每个step的title和content样式，如颜色和字体大小。示例代码展示了根据流程状态显示不同的提示文字，同时利用计算属性处理审批日志内容。通过这种方式，可以灵活地在组件内部定制样式，实现组件样式的穿透和个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：当我们需要在step组件自己设置样式，该怎么做？样式穿透可以改变组件原有的样式，这是改变所有这个dom下的样式，当有step是循环生成的，每个step我要根据特定的字段生成不同样式呢？那可以在每个step组件中判断，那当要改变的样式是step绑定的title或者content呢？这是绑定的字符串呀，直接字符串放标签加样式，貌似解析不了。那就要用到强大的模板template加slot插槽功能。

代码：

 <Steps :current="currentLog" direction="vertical" size="small">
                <div v-for="(item, index) in processLogInfo" :key="index" style="height:80px">
                    <Step :title="item.nodeTitle">
                        <template slot="content">
                            <span>{{item.nickname}}</span>
                            <span v-if="item.flowState===null" style="color:#9ea7b4;font-weight:600;font-size:14px"> 待处理</span>
                            <span v-if="item.flowState==='1'" style="color:#3399ff;font-weight:600;font-size:14px"> 发起</span>
                            <span v-if="item.flowState==='2'" style="color:#00cc66;font-weight:600;font-size:14px"> 通过</span>
                            <span v-if="item.flowState==='3'" style="color:#ff3300;font-weight:600;font-size:14px"> 驳回</span>
                            <span>
                                {{stepContent(item)}}
                            </span>
                        </template>
                        <template slot="title">
                            <span style="color：red">你好啊</span>
                        </template>
                    </Step>
                </div>
            </Steps>

计算属性：

 computed: {
        // 处理审批日志内容
        stepContent() {
            return function(item) {
                let remark = ''
                let time = ''
                if (item.remark === null) {
                    remark = '无'
                } else {
                    remark = item.remark
                }
                if (item.createDate === null) {
                    time = '无'
                } else {
                    time = item.createDate
                }
                return `流程；意见：${remark}；时间：${time}`
            }
        }
    },

貌似iview要自定义组件样式，都可以通过slot插槽来解决

效果：