Element Popover 弹出框的使用示例


Posted in Javascript onJuly 26, 2020

组件— 弹出框

基础用法

Element Popover 弹出框的使用示例

<template>
 <el-popover
  placement="top-start"
  title="标题"
  width="200"
  trigger="hover"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  <el-button slot="reference">hover 激活</el-button>
 </el-popover>

 <el-popover
  placement="bottom"
  title="标题"
  width="200"
  trigger="click"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  <el-button slot="reference">click 激活</el-button>
 </el-popover>

 <el-popover
  ref="popover"
  placement="right"
  title="标题"
  width="200"
  trigger="focus"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
 </el-popover>
 <el-button v-popover:popover>focus 激活</el-button>

 <el-popover
  placement="bottom"
  title="标题"
  width="200"
  trigger="manual"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
  v-model="visible">
  <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
 </el-popover>
</template>

<script>
 export default {
  data() {
   return {
    visible: false
   };
  }
 };
</script>

嵌套信息

Element Popover 弹出框的使用示例

<el-popover
 placement="right"
 width="400"
 trigger="click">
 <el-table :data="gridData">
  <el-table-column width="150" property="date" label="日期"></el-table-column>
  <el-table-column width="100" property="name" label="姓名"></el-table-column>
  <el-table-column width="300" property="address" label="地址"></el-table-column>
 </el-table>
 <el-button slot="reference">click 激活</el-button>
</el-popover>

<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 弄'
    }]
   };
  }
 };
</script>

嵌套操作

Element Popover 弹出框的使用示例

<el-popover
 placement="top"
 width="160"
 v-model="visible">
 <p>这是一段内容这是一段内容确定删除吗?</p>
 <div style="text-align: right; margin: 0">
  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
  <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
 </div>
 <el-button slot="reference">删除</el-button>
</el-popover>

<script>
 export default {
  data() {
   return {
    visible: false,
   };
  }
 }
</script>

Attributes

Element Popover 弹出框的使用示例

Element Popover 弹出框的使用示例

Slot

Element Popover 弹出框的使用示例

Events

Element Popover 弹出框的使用示例

Element-UI表格点击Popover 弹出框确定取消

Element Popover 弹出框的使用示例

<el-table-column width="600">
     <template slot-scope="scope">
<el-popover trigger="click" placement="top" width="450" @show="handleStatus(scope)" :ref="`popover-${scope.$index}`">
       <div>
         <el-input type="textarea" :rows="5" maxlength="300" placeholder="请输入内容" v-model="scope.row.spaceAllocatePrice"></el-input>
       </div>
       <div style="text-align: left; margin-top: 20px">
        <el-button size="small" plain @click="cancelClick(scope)">取消</el-button>
        <el-button type="primary" size="small" @click="sureClick(scope)">确定</el-button>
       </div>
       <el-button slot="reference" type="text">说明</el-button>
      </el-popover>
     </template>
    </el-table-column>
cancelClick(scope){ 
   this.$message('点击了取消操作'); 
   scope._self.$refs[`popover-${scope.$index}`].doClose() 
  },
  sureClick(scope){
   // 可以在这里执行删除数据的回调操作.......删除操作......
   this.$message({
    message:"点击了确定操作了",type: 'success'
   });
   scope._self.$refs[`popover-${scope.$index}`].doClose()
  },

到此这篇关于Element Popover 弹出框的使用示例的文章就介绍到这了,更多相关Element Popover 弹出框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
You might like
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php数组和链表的区别总结
2019/09/20 PHP
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
js实现圆盘记速表
2015/08/03 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python实现的简单排列组合算法示例
2018/07/04 Python
python制作朋友圈九宫格图片
2019/11/03 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
孔庙导游词
2015/02/04 职场文书
大学生自我评价范文
2015/03/03 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
小学少先队活动总结
2015/05/08 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书