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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jquery选择器简述
Aug 31 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
js实现div色块碰撞
2020/01/16 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python绘制圆柱体的方法
2018/07/02 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
员工培训邀请函
2014/02/02 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
英语求职信范文
2014/05/23 职场文书
班训口号大全
2014/06/18 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL