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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
antd form表单数据回显操作
Nov 02 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript操作referer详细解析
2014/03/10 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
全面理解闭包机制
2016/07/11 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python unittest实现api自动化测试
2018/04/04 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
python实现多进程通信实例分析
2019/09/01 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
运动会稿件200字
2014/02/07 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Python采集壁纸并实现炫轮播
2022/04/30 Python