Alert 警告
1,基本用法
用于页面中展示重要的提示信息。
Alert 组件提供四种主题,由type
属性指定,默认值为info
。代码如下:
"成功提示的文案" type="success"> "消息提示的文案" type="info"> "警告提示的文案" type="warning"> "错误提示的文案" type="error">
点击X号关闭提示,不需要自己在写js逻辑很方便,
2,主题
Alert 组件提供了两个不同的主题:light
和dark
。
通过设置effect
属性来改变主题,默认为light
。代码如下:
"成功提示的文案" type="success" effect="dark"> "消息提示的文案" type="info" effect="dark"> "警告提示的文案" type="warning" effect="dark"> "错误提示的文案" type="error" effect="dark">
3,自定义关闭按钮
自定义关闭按钮为文字或其他符号。
在 Alert 组件中,你可以设置是否可关闭,关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭,接受boolean,默认为true。你可以设置close-text属性来代替右侧的关闭图标,注意:close-text必须为文本。设置close事件来设置关闭时的回调。代码如下:
"不可关闭的 alert" type="success" :closable="false"> "自定义 close-text" type="info" close-text="知道了"> "设置了回调的 alert" type="warning" @close="hello"> export default { methods: { hello() { alert('Hello World!'); } } }
4,带有 icon
表示某种状态时提升可读性。
通过设置show-icon
属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。代码如下:
"成功提示的文案" type="success" show-icon> "消息提示的文案" type="info" show-icon> "警告提示的文案" type="warning" show-icon> "错误提示的文案" type="error" show-icon>
根据 type来设置显示的图标样式
5,文字居中
使用 center
属性让文字水平居中。
除了必填的title
属性外,你可以设置description
属性来帮助你更好地介绍,我们称之为辅助性文字。辅助性文字只能存放单行文本,会自动换行显示。(项目中经常用到)代码如下:
"带辅助性文字介绍" type="success" description="这是一句绕口令:黑灰化肥会挥发发灰黑化肥挥发;灰黑化肥会挥发发黑灰化肥发挥。黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
6,带有 icon 和辅助性文字介绍
最后,这是一个同时具有 icon 和辅助性文字的样例。
"成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> "错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
以上就是alert组件的介绍,但是项目中用到比较少,一般用到的Message 消息提示 比较多,后面会单独写一篇Message 消息提示。