<template>
|
<div class="lin-container">
|
<div class="lin-title">Alert 警告</div>
|
<div class="lin-wrap-ui">
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>基础用法</span></div>
|
<el-row>
|
<div>
|
<el-alert title="成功提示的文案" type="success"> </el-alert>
|
<el-alert title="消息提示的文案" type="info"> </el-alert>
|
<el-alert title="警告提示的文案" type="warning"> </el-alert>
|
<el-alert title="错误提示的文案" type="error"> </el-alert>
|
</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>
|
<template>
|
<el-alert title="成功提示的文案" type="success" effect="dark"> </el-alert>
|
<el-alert title="消息提示的文案" type="info" effect="dark"> </el-alert>
|
<el-alert title="警告提示的文案" type="warning" effect="dark"> </el-alert>
|
<el-alert title="错误提示的文案" type="error" effect="dark"> </el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse class="test" style="color:red;">
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ effect }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>自定义关闭按钮</span></div>
|
<el-row>
|
<div>
|
<template>
|
<el-alert title="不可关闭的 alert" type="success" :closable="false"> </el-alert>
|
<el-alert title="自定义 close-text" type="info" close-text="知道了"> </el-alert>
|
<el-alert title="设置了回调的 alert" type="warning" @close="hello"> </el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse class="test" style="color:red;">
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ close }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>带有 icon</span></div>
|
<el-row>
|
<div>
|
<template>
|
<el-alert title="成功提示的文案" type="success" show-icon> </el-alert>
|
<el-alert title="消息提示的文案" type="info" show-icon> </el-alert>
|
<el-alert title="警告提示的文案" type="warning" show-icon> </el-alert>
|
<el-alert title="错误提示的文案" type="error" show-icon> </el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ showIcon }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>文字居中</span></div>
|
<el-row>
|
<div>
|
<template>
|
<el-alert title="成功提示的文案" type="success" center show-icon> </el-alert>
|
<el-alert title="消息提示的文案" type="info" center show-icon> </el-alert>
|
<el-alert title="警告提示的文案" type="warning" center show-icon> </el-alert>
|
<el-alert title="错误提示的文案" type="error" center show-icon> </el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ center }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card style="margin-bottom:50px;">
|
<div slot="header"><span>带有辅助性文字介绍</span></div>
|
<el-row>
|
<div>
|
<template>
|
<el-alert
|
title="带辅助性文字介绍"
|
type="success"
|
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"
|
>
|
</el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse>
|
<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>带有 icon 和辅助性文字介绍</span></div>
|
<el-row>
|
<div>
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon
|
>
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon
|
>
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon
|
>
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon
|
>
|
</el-alert>
|
</template>
|
</div>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ descriptionAndShowIcon }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'LinCmsUiButton',
|
components: {},
|
data() {
|
return {
|
text: '',
|
base: `
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success">
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info">
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning">
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error">
|
</el-alert>
|
</template>`,
|
effect: `
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success"
|
effect="dark">
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info"
|
effect="dark">
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning"
|
effect="dark">
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error"
|
effect="dark">
|
</el-alert>
|
</template>`,
|
/* eslint-disable */
|
close: `
|
<template>
|
<el-alert
|
title="不可关闭的 alert"
|
type="success"
|
:closable="false">
|
</el-alert>
|
<el-alert
|
title="自定义 close-text"
|
type="info"
|
close-text="知道了">
|
</el-alert>
|
<el-alert
|
title="设置了回调的 alert"
|
type="warning"
|
@close="hello">
|
</el-alert>
|
</template>
|
<script>
|
export default {
|
methods: {
|
hello() {
|
alert('Hello World!');
|
}
|
}
|
}
|
<\/script>`,
|
showIcon: `
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error"
|
show-icon>
|
</el-alert>
|
</template>`,
|
center: `
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success"
|
center
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info"
|
center
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning"
|
center
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error"
|
center
|
show-icon>
|
</el-alert>
|
</template>`,
|
description: `
|
<template>
|
<el-alert
|
title="带辅助性文字介绍"
|
type="success"
|
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
</el-alert>
|
</template>`,
|
descriptionAndShowIcon: `
|
<template>
|
<el-alert
|
title="成功提示的文案"
|
type="success"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="消息提示的文案"
|
type="info"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="警告提示的文案"
|
type="warning"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon>
|
</el-alert>
|
<el-alert
|
title="错误提示的文案"
|
type="error"
|
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
show-icon>
|
</el-alert>
|
</template>`,
|
}
|
},
|
// 计算属性设置
|
computed: {},
|
// 数据变更监听
|
watch: {},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
hello() {
|
// eslint-disable-next-line
|
alert('Hello World!')
|
},
|
// 执行获取数据等初始化动作
|
init() {},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../assets/style/container.scss';
|
.el-alert + .el-alert {
|
margin-top: 20px;
|
}
|
</style>
|
