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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
详解VUE 数组更新
Dec 16 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
JavaScript中this关键字用法实例分析
Aug 24 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程序?
2006/12/08 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python实现日志按天分割
2019/07/22 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
2014年单位植树节活动方案
2014/03/23 职场文书
诚信考试承诺书
2014/03/27 职场文书
书法社团活动总结
2015/05/07 职场文书
发票退票证明
2015/06/24 职场文书
小学英语听课心得体会
2016/01/14 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL