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 RadioButtonList获取选中值
Apr 09 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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 验证码的实现代码
2011/07/17 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js 判断上传文件大小及格式代码
2013/11/13 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
vue debug 二种方法
2018/09/16 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
详解Python中的路径问题
2020/09/02 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
大学生村官事迹材料
2014/01/21 职场文书
商场消防演习方案
2014/02/12 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
安全生产年活动总结
2014/08/29 职场文书
2014年稽查工作总结
2014/12/20 职场文书
关于颐和园的导游词
2015/01/30 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Python 图片添加美颜效果
2022/04/28 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript