<template>
|
<div class="lin-container">
|
<div class="lin-title">Steps 步骤条</div>
|
<div class="lin-wrap-ui">
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>基础用法</span></div>
|
<el-row>
|
<div>
|
<el-steps :active="active" finish-status="success">
|
<el-step title="步骤 1"></el-step>
|
<el-step title="步骤 2"></el-step>
|
<el-step title="步骤 3"></el-step>
|
</el-steps>
|
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ base }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>含状态步骤条</span></div>
|
<el-row>
|
<div>
|
<el-steps :space="200" :active="1" finish-status="success">
|
<el-step title="已完成"></el-step>
|
<el-step title="进行中"></el-step>
|
<el-step title="步骤 3"></el-step>
|
</el-steps>
|
</div>
|
</el-row>
|
<el-collapse class="test" style="color:red;">
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ title }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>有描述的步骤条</span></div>
|
<el-row>
|
<div>
|
<el-steps :active="1">
|
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
|
</el-steps>
|
</div>
|
</el-row>
|
<el-collapse class="test" style="color:red;">
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ description }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>居中的步骤条</span></div>
|
<el-row>
|
<div>
|
<el-steps :active="2" align-center>
|
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
|
</el-steps>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ alignCenter }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>带图标的步骤条</span></div>
|
<el-row>
|
<div>
|
<el-steps :active="1">
|
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
</el-steps>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ icon }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>竖式步骤条</span></div>
|
<el-row>
|
<div>
|
<div style="height: 300px;">
|
<el-steps direction="vertical" :active="1">
|
<el-step title="步骤 1"></el-step>
|
<el-step title="步骤 2"></el-step>
|
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
|
</el-steps>
|
</div>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ vertical }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>简洁风格的步骤条</span></div>
|
<el-row>
|
<div>
|
<el-steps :active="1" simple>
|
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
</el-steps>
|
|
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
|
<el-step title="步骤 1"></el-step>
|
<el-step title="步骤 2"></el-step>
|
<el-step title="步骤 3"></el-step>
|
</el-steps>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ simple }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
/* eslint-disable */
|
name: 'LinCmsUiButton',
|
components: {},
|
data() {
|
return {
|
active: 0,
|
base: `
|
<el-steps :active="active" finish-status="success">
|
<el-step title="步骤 1"></el-step>
|
<el-step title="步骤 2"></el-step>
|
<el-step title="步骤 3"></el-step>
|
</el-steps>
|
|
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
|
|
<script>
|
export default {
|
data() {
|
return {
|
active: 0
|
};
|
},
|
|
methods: {
|
next() {
|
if (this.active++ > 2) this.active = 0;
|
}
|
}
|
}
|
<\/script>`,
|
title: `
|
<el-steps :space="200" :active="1" finish-status="success">
|
<el-step title="已完成"></el-step>
|
<el-step title="进行中"></el-step>
|
<el-step title="步骤 3"></el-step>
|
</el-steps>`,
|
alignCenter: `
|
<el-steps :active="2" align-center>
|
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
|
</el-steps>`,
|
description: `
|
<el-steps :active="1">
|
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
|
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
|
</el-steps>`,
|
icon: `
|
<el-steps :active="1">
|
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
</el-steps>`,
|
vertical: `
|
<div style="height: 300px;">
|
<el-steps direction="vertical" :active="1">
|
<el-step title="步骤 1"></el-step>
|
<el-step title="步骤 2"></el-step>
|
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
|
</el-steps>
|
</div>`,
|
simple: `
|
<el-steps :active="1" simple>
|
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
</el-steps>
|
|
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
|
<el-step title="步骤 1" ></el-step>
|
<el-step title="步骤 2" ></el-step>
|
<el-step title="步骤 3" ></el-step>
|
/el-steps>`,
|
}
|
},
|
// 计算属性设置
|
computed: {},
|
// 数据变更监听
|
watch: {},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
next() {
|
if (this.active++ > 2) this.active = 0
|
},
|
// 执行获取数据等初始化动作
|
init() {},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../assets/style/container';
|
</style>
|
