93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<template>
|
|
<div class="content">
|
|
<e-row :gutter="24">
|
|
<e-col :span="24" class="box-card">
|
|
<e-card shadow="always">
|
|
<div slot="header" class="clearfix">
|
|
<span>基本用法</span>
|
|
</div>
|
|
<div>
|
|
<e-link href="https://element.eleme.io" target="_blank">默认链接</e-link>
|
|
<e-link type="primary">主要链接</e-link>
|
|
<e-link type="success">成功链接</e-link>
|
|
<e-link type="warning">警告链接</e-link>
|
|
<e-link type="danger">危险链接</e-link>
|
|
<e-link type="info">信息链接</e-link>
|
|
</div>
|
|
</e-card>
|
|
</e-col>
|
|
<e-col :span="24" class="box-card">
|
|
<e-card shadow="always">
|
|
<div slot="header" class="clearfix">
|
|
<span>禁用状态</span>
|
|
</div>
|
|
<div>
|
|
<e-link disabled>默认链接</e-link>
|
|
<e-link type="primary" disabled>主要链接</e-link>
|
|
<e-link type="success" disabled>成功链接</e-link>
|
|
<e-link type="warning" disabled>警告链接</e-link>
|
|
<e-link type="danger" disabled>危险链接</e-link>
|
|
<e-link type="info" disabled>信息链接</e-link>
|
|
</div>
|
|
</e-card>
|
|
</e-col>
|
|
<e-col :span="24" class="box-card">
|
|
<e-card shadow="always">
|
|
<div slot="header" class="clearfix">
|
|
<span>下划线</span>
|
|
</div>
|
|
<div>
|
|
<e-link :underline="false">无下划线</e-link>
|
|
<e-link>有下划线</e-link>
|
|
</div>
|
|
</e-card>
|
|
</e-col>
|
|
<e-col :span="24" class="box-card">
|
|
<e-card shadow="always">
|
|
<div slot="header" class="clearfix">
|
|
<span>图标</span>
|
|
</div>
|
|
<div>
|
|
<e-link icon="el-icon-edit">编辑</e-link>
|
|
<e-link>查看<i class="el-icon-view el-icon--right"></i> </e-link>
|
|
</div>
|
|
</e-card>
|
|
</e-col>
|
|
</e-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.marginLeft {
|
|
margin-left: 10px
|
|
}
|
|
.content {
|
|
height: 100%;
|
|
padding: 30px;
|
|
background:#fff;
|
|
}
|
|
|
|
.block {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.box-card .el-col{
|
|
margin-bottom:10px;
|
|
}
|
|
</style>
|