element---组件--Others

最新推荐文章于 2024-02-26 10:41:04 发布
最新推荐文章于 2024-02-26 10:41:04 发布
阅读量285 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45343973/article/details/98870165
版权
这篇博客详细介绍了Element UI中的多个组件，包括Dialog对话框、Tooltip文字提示、Popover弹出框、Card卡片、Carousel走马灯、Collapse折叠面板、Timeline时间线、Divider分割线、Calendar日历、Image图片、Backtop回到顶部以及InfiniteScroll无限滚动。内容涵盖各组件的基本用法、高级特性和注意事项，为开发者提供组件使用的全面指南。
摘要由CSDN通过智能技术生成

Others

一、Dialog 对话框（在保留当前页面状态的情况下，告知用户并承载相关操作）

  1. 基本用法
    在这里插入图片描述
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>
  1. 自定义内容
    在这里插入图片描述
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</el-dialog>

<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    }
  };
</script>
  1. 嵌套的 Dialog
    在这里插入图片描述
<template>
  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
  
  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
    <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  }
</script>
  1. 居中布局
    在这里插入图片描述
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>需要注意的是内容是默认不居中的</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>
  1. Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
  2. 如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

二、Tooltip文字提示（常用于展示鼠标 hover 时的提示信息）

  1. 基础用法
    在这里插入图片描述
<div class="box">
  <div class="top">
    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <el-button>上边</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
      <el-button>上右</el-button>
    </el-tooltip>
  </div>
  <div class="left">
    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
      <el-button>左上</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
      <el-button>左边</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
      <el-button>左下</el-button>
    </el-tooltip>
  </div>

  <div class="right">
    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
      <el-button>右上</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
      <el-button>右边</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
      <el-button>右下</el-button>
    </el-tooltip>
  </div>
  <div class="bottom">
    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
      <el-button>下左</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
      <el-button>下边</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
      <el-button>下右</el-button>
    </el-tooltip>
  </div>
</div>

<style>
  .box {
    width: 400px;

    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
最低0.47元/天 解锁文章
wyk.wyk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
button添加属性disabled，造成el-tooltip失效
fly_away5的博客
10-14 5562
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
el-form-item表单label添加提示图标
小马甲
10-08 3180
element-ui中el-form在编辑表单时，经常会在label添加一些需要提示的东西，可以用到Form-Item 的slot这个方法。
【vue】el-form-item添加icon和tooltip
CatalpaWoo的博客
07-20 7617
【vue】el-form-item添加icon和tooltip
怎么在el-form-item的后面加提示信息
migexiaoliang的博客
08-19 7364
使用element的el-form表单，怎么在el-form-item的后面加Tooltip文字提示信息
【el-form】表单label添加？及tooltip
SZnAl的博客
12-01 1088
【代码】【el-form】表单label添加？及tooltip。
element-plus打包
05-24
"element-plus打包" 指的是将 Element Plus 项目进行构建和打包的过程，以便在实际项目中使用。这个过程通常涉及以下步骤和知识点： 1. **项目初始化**： - `package.json` 文件是项目的核心配置文件，包含了项目...
element-plus-dev
05-24
element-plus-dev
element-2.15.8.zip
最新发布
08-24
vue2 的 ui 框架 element-ui 源码
element-2.15.3.zip
08-24
vue2 的 ui 框架 element-ui 源码
el-form label过长时显示省略号 鼠标悬浮使用el-tooltip展示完整内容
weixin_43971142的博客
02-10 4782
el-form label过长时显示省略号 鼠标悬浮使用el-tooltip展示完整内容
element实现文字后面加图标并且有提示文字
凡尘
10-31 1633
element实现文字后面加图标并且有提示文字
el-form 表单文本标签label增加tooltip提示图标
SM_Cute的博客
02-26 1359
el-form 表单文本标签label增加tooltip提示图标
el-form嵌套el-table编辑，校验信息显示在气泡框中
weixin_43939111的博客
06-02 2242
/}).catch(er=>{row.isEdit = true})//如果接口反馈失败，保持输入状态方便识别刚刚编辑的行。但是，我不得不将错误提示放到el-tooltip中显示，因为产品给出的校验失败信息实在是太太太太太长长长长长长了！//isEdit=是否显示输入框，ms1对应32位校验是否显示错误信息，ms2对应非空校验是否显示错误信息。//注意：这里是”==“而不是”===“，如果项目采用严格模式，需要用number转换一下。//非空不通，显示内容为非空校验错误提示，对应errorMess2。
Tooltip 文字提示
weixin_30268921的博客
03-14 468
常用于展示鼠标 hover 时的提示信息。 基础用法 在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start,end，默认为空。如placemen...
自定义Tooltip 组件：根据内容长度判断是否需要提示信息
热门推荐
zhengvipin的博客
01-02 1万+
elementUI中的Tooltip组件是用于展示鼠标 hover 时的提示信息，类似于原生html的title属性。我们实际开发中一般还会在此基础上提几个需求：（1）.自定义显示文本行数 （2）.文本超出行数，以省略号代替，并在鼠标 hover 出现提示信息 (3).文本过长时省略后，提供相应的快捷复制功能。基于这些原因，在此对elementUI之Tooltip组件进行了简单定制化。 ........................
【Element】el-form-item 下 slot="label" 使用 el-tooltip 不显示的问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
06-10 1221
问题描述 el-form-item 使用 label 插槽放入 el-tooltip 不显示(未使用 label-width 和 label-action 属性的情况下)。 解决方法 将标签的样式修改，去掉浮动。 成功！！！ ...
element组件------Others
weixin_44775723的博客
08-08 889
** 一、Dialog 对话框（在保留当前页面状态的情况下，告知用户并承载相关操作） ** （1）基本用法（Dialog 弹出一个对话框，适合需要定制性更大的场景） <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示"...
解决Vue中Element-UI组件使用常见问题
Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际使用过程中，可能会遇到一些问题，以下是一些常见的问题和解决方法： 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值