Element框架之Notice-Alert警告

1.Alert 警告
用于页面中展示重要的提示信息。
¶ 基本用法
页面中的非浮层元素,不会自动消失。
在这里插入图片描述
Alert 组件提供四种主题,由type属性指定,默认值为info。

<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>

¶ 主题
Alert 组件提供了两个不同的主题:light和dark。
在这里插入图片描述
通过设置effect属性来改变主题,默认为light。

<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>

¶ 带有 icon
表示某种状态时提升可读性。
在这里插入图片描述
通过设置show-icon属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。

<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>

¶ 带有 icon 和辅助性文字介绍
在这里插入图片描述

<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>

2.Loading 加载
区域加载(在表格等容器中加载数据时显示)
在这里插入图片描述
Element 提供了两种调用 Loading 的方法&

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用webstorm导入element-ui时,可能会出现警告。这个警告通常是由于缺少样式文件导致的。我们可以通过以下几种方法来解决这个问题: 1. 完整引入Element:这种方法是在入口文件中引入Element的样式文件,可以解决警告问题。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 在入口文件中引入Element的样式文件,可以参考中的代码示例。 - 重新运行项目,警告应该已经消失了。 2. 按需引入Element:按需引入只导入所需的Element组件和样式,可以减小打包体积。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 执行命令 `npm i babel-plugin-component -D` 安装 `babel-plugin-component`。 - 在项目的Babel配置文件中添加以下代码: ``` module.exports = { plugins: [ ['component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }] ] } ``` - 在需要使用Element组件的文件中按需引入,可以参考中的代码示例。 - 重新运行项目,警告应该已经消失了。 3. 使用npm安装:如果以上方法无法解决问题,可以尝试使用npm的方式安装element-ui,这种方式能够更好地和webpack打包工具配合使用。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 执行命令 `npm i element-ui -S` 安装element-ui。 - 重新运行项目,警告应该已经消失了。 综上所述,你可以根据你的需求选择合适的方法来解决webstorm导入element-ui的警告问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值