精华内容
下载资源
问答
  • el-dialog vue弹窗播放视频video

    千次阅读 2019-01-03 18:25:44
    <el-dialog title :visible.sync="dialogPlay" width="30%" @close="closeDialog"> width="100%"> </el-dialog> mounted() { this.$refs.btn.onclik(function() { if (this.$refs.dialogVideo.paused) { ...
         主要代码如下:
    
          <el-table-column align="center" label="视频url">
            <template slot-scope="scope">
              <el-button type="primary" @click="playVideo(scope.row)" ref="btn" size="mini"> 
              播 放
              </el-button>
            </template>
          </el-table-column>
    
          <el-dialog title :visible.sync="dialogPlay" width="30%" @close="closeDialog">
             <video :src="videoUrl" controls autoplay class="video" :ref="dialogVideo" 
             width="100%"></video>
          </el-dialog>
          
    
    mounted() {
        this.$refs.btn.onclik(function() {
          if (this.$refs.dialogVideo.paused) {
            this.$refs.dialogVideo.play();
          } else {
            this.$refs.dialogVideo.pause();
          }
        });
    },
    methods:{
    // 视频播放
        playVideo(row) {
          this.dialogPlay = true;
          this.videoUrl = row.videoUrl;
        },
    }
    closeDialog() {
        this.videoUrl = ""; //清空数据 关闭视频播放
    },

     

    展开全文
  • VueDialog 弹窗组件,包含了 alert 和 confirm 对话框。 参考代码: Use npm install vue-m-dialog import MDialog from 'vue-m-dialog' // ro import { Dialog, Alert, Confirm } from 'vue-m-dialog' import '...
  • 具体参考博客: https://blog.csdn.net/qq_33599109/article/details/79883766
  • art-dialog-vue —— 经典、优雅的网页对话框控件 优点 支持普通与 12 方向气泡状对话框 支持 ARIA 标准 面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话框 丰富且友好的编程接口 能自适应内容尺寸 安装 ...
        

    art-dialog-vue —— 经典、优雅的网页对话框控件

    优点

    1. 支持普通与 12 方向气泡状对话框
    2. 支持 ARIA 标准
    3. 面向未来:基于 HTML5 Dialog 的 API
    4. 支持标准与模态对话框
    5. 丰富且友好的编程接口
    6. 能自适应内容尺寸

    安装

     npm install art-dialog-vue //插件文件在plugin目录下

    url引入

    <script src="plugin/dist/static/css/dialog.min.css"></script>
    <script src="plugin/dist/static/js/dialog.js"></script>
    <script>
        Vue.use(Dialog.default)//使用插件,注意以url引入时use的参数是Dialog.default
    </script>

    模块化引入

    import Dialog from 'art-dialog-vue' //esm
    const Dialog = require('art-dialog-vue').default //RequireJS,非esm形式要加.default
    Vue.use(Dialog)//使用插件

    基本使用

    const d = Vue.dialog({
        title: 'art-dialog-vue',
        content: {
                  template: '<div>{{name}},欢迎使用</div>',
                  data() {
                      return {
                          name: 'hello'
                    }
                  }
        },
        button: [
         {
             id: '1',
             value: '确定',
             callcack() {      
                //do something                                      
                return false;//返回false 表示弹窗不关闭
            }
         },
         {
             id: '2',
             value: '取消',
             callcack() {      
                //do something                                      
                return false;//返回false 表示弹窗不关闭
            }
         },
        ]
    });
    d.show();

    详细使用文档请参考:https://leeseean.github.io/vu...,项目github地址:https://github.com/leeseean/v...(求star)

    展开全文
  • npm install @ xpf0000 / vue - element - dialog 使用 // 引用 import Vue from 'vue' import VueBaseDialog from '@xpf0000/vue-element-dialog' Vue . use ( VueBaseDialog ) // 弹出组件中 methods: { // 弹窗...
  • Dialog in Vue 传值

    千次阅读 2018-10-24 18:17:50
    ... &lt;xx-dialog v-if="dialogData" :dialog-data="dialogData"/&...父控件绑定动态值到DialogDialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。...
    ...
    <xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
    ...
    
    data () {
        return {
        ...
        dialogData: xxx
        ...
        }
    }

    问题描述:

    父控件绑定动态值到Dialog,Dialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。

    关于将v-if换成v-show,让dialog积极渲染,dialog在父控件渲染时就加载出来了,不能实现初始隐藏。

    目标:

    第一次打开就能接收到变化的值(已解决)。

    解决方案:

    1. 针对不需要动态更新的数据,可采用将绑定值设置为props。
    ...
    <xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
    ...
    
    props: {
        ...
        dialogData: {
            default: xxx
        }
        ...
    }
    
    
    1. 需要将值动态传入Dialog解决方案。其实很简单,在原来基础上,做一下代码调整及即可,将父控件的 v-if 移动到子控件
    // 父控件
    <xx-dialog :dialog-data="dialogData"/>
    
    // 子控件
    <xx-dialog
        v-if="dialogData"
        ...>
        ...
    </xx-dialog>
    
    ...
    props:['dialogData']
    ...

    前端菜鸟,入行不久,找了半天经验都未能找到解决方案,只找到一些类似的问题存在,发表博客纯属经验分享。

    展开全文
  • el-dialog vue-baidu-map,百度地图加载,中心点偏移组上角左上角处理方法 问题原因: 百度地图加载出来的时候,地图中心点偏移到左上角。 加载地图的el-dialog展示前,el-dialog为隐藏状态,但el-dialog显示的时候,...

    el-dialog vue-baidu-map,百度地图加载,中心点偏移组上角左上角处理方法

    问题原因:
    百度地图加载出来的时候,地图中心点偏移到左上角。
    加载地图的el-dialog展示前,el-dialog为隐藏状态,但el-dialog显示的时候,地图相对页面的坐标发生偏移。(正常直接显示 不存在这个问题)。

    解决核心:延迟加载 代码片.

    // An highlighted block
    handleEdit(index,row){
      let _this = this;
      this.dialogVisible = true;
      setTimeout(function () {
          _this.center={lng:row.lng,lat:row.lat};
          _this.markerPoint={lng:row.lng,lat:row.lat};
      } ,1000 * 0.1);
    }
    
    展开全文
  • vue dialog 模态 vue-router-twitter-style-modals (vue-router-twitter-style-modals) Vue router twitter style modals. Vue路由器Twitter样式模态。 View demo 查看演示 Download Source 下载源 vue-router-...
  • 具体参考博客:
  • dialog方式弹出嵌入的vue页面,dialog高度不够,嵌入的页面多出一块,非常难看,给嵌入页面加上overflow:auto属性。 这样嵌入的页面就可以滚动显示,不会多出一块。 <el-dialog title="添加" :visible.sync=...
  • vue封装dialog

    2020-08-12 20:26:34
    子组件:templateDialog.vue <template> <div> <el-dialog width="60%" title="模板名称" :visible.sync="dialogVisible" :before-close="handleClose" > <div>{
  • vue dialog样式

    2019-10-04 10:32:11
    el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible2" width="40%">   width="40%"可以调节dialog宽度 <el-table :key='tableKey' :data="list" v-loading.body...
  • vue自定义组件dialog

    2019-10-07 09:46:06
    自定义组件 dialog.vue源码: <template> <divclass="dialog"v-show="showMask"> <divclass="dialog-container"> <divclass="dialog-title">{{title}}</div>...
  • vue封装dialog弹框组件

    千次阅读 2020-05-31 22:51:07
    vue封装dialog弹框组件 dialog.vue <template> <div class="dialog" v-show="showMask"> <div class="dialog-container"> <div class="dialog-title">{{title}}</div> <div ...
  • vue实现dialog对话框

    万次阅读 2018-05-03 14:56:47
    一、为实现该dialog的复用,我这里把它写成一个组件(Vue中定义的组件)&lt;template&gt; &lt;div id="dialog"&gt; &lt;div class="border"&gt; &lt;div @click...
  • vue-dialog-drag简单的可拖动对话框演示功能:拖放支持(仅用于拖放,不用于拖放)拖放区域组件“ Pin模式”,以锁定vue-dialog-drag简单的可拖动对话框演示功能:拖放支持(仅用于拖动,不用于放置)放置区域组件...
  • vue dialog对话框模块

    2021-01-23 22:30:04
    el-dialog title="修改" v-if="updateDialog" :visible.sync="updateDialog" @close="handleAddClose" :model-append-to-body="false" :close-on-click-modal="false"> <update-Dialog :updateChild="update...
  • vue dialog 弹窗组件

    2020-09-29 17:26:49
    因为官方组件不是很好用所以自己写了一个弹窗组件 ```javascript ...view class="cu-modal show dialog" v-if="isShow"> <view class="cu-dialog"> <view class="cu-bar bg-white ju
  • 原因:对象使用错误 解决办法:Dialog挂载到vue后,引用对象为this.$dialog
  • vue ElementUI清空dialog

    2020-07-02 17:59:35
    (1)template中(引入组件的dialog 或 直接dialog均可) <!-- 运费 --> <div class="feeDialog"> <el-dialog v-if="reFreshShowModeratorFee" width="1200px" :visible.sync="showModeratorFee"&...
  • vue使用dialog标签

    2018-12-29 14:11:20
    不想写组件,查了下h5,发现dialog标签能实现我想要的效果 注意 dialog标签只有Chrome、Safari 6 支持; template &lt;dialog class="dialog" :open="dialog" v-if="bigPicture[0]&...
  • 遇到一个这样的问题,实际页面中用到dialog,并且引入了其他页面,当然这里用的vue + elementUI 如果想要引入页面在弹框每次弹出时进行初始化,如图: 但是dialog中子页面只会在父页面加载完后,第一次点击事件时...
  • vue element dialog 对话框

    2021-02-16 14:20:02
    通过绑定:visible.sync属性来控制对话框 <template> <el-card> <el-button type="text" @...el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息<

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,329
精华内容 931
关键字:

dialogvue

vue 订阅