mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
54 lines
994 B
Vue
54 lines
994 B
Vue
<template>
|
|
<div
|
|
:class="['step-item', link ? 'linkable' : null]"
|
|
@click="go"
|
|
>
|
|
<span :style="titleStyle">{{title}}</span>
|
|
<a-icon :style="iconStyle" :type="icon" />
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AIcon from 'ant-design-vue/es/icon/icon'
|
|
|
|
const Group = {
|
|
name: 'AStepItemGroup',
|
|
render (h) {
|
|
return h(
|
|
'div',
|
|
{attrs: {style: 'text-align: center; margin-top: 8px'}},
|
|
[h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
|
|
)
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'AStepItem',
|
|
Group: Group,
|
|
components: {AIcon},
|
|
props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'],
|
|
methods: {
|
|
go () {
|
|
const link = this.link
|
|
if (link) {
|
|
this.$router.push(link)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.step-item{
|
|
cursor: pointer;
|
|
}
|
|
:global{
|
|
.ant-steps-item-process{
|
|
.linkable{
|
|
color: #40a9ff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|