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 学习笔记(九)call和apply方法
Jan 11 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
JSX在render函数中的应用详解
Sep 04 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
最省空间的计数器
2006/10/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP _construct()函数讲解
2019/02/03 PHP
php实现映射操作实例详解
2019/10/02 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
春节请假条
2014/04/11 职场文书
离婚财产处理协议书
2014/09/30 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS