精华内容
下载资源
问答
  • vue渲染动态渲染图片 Vue-Viaudio (vue-viaudio) Dynamically/Reactively render videos and audios. 动态/动态渲染视频和音频。 View Documentation 查看文档 Reactive example React性示例 Dynamically Render ...

    vue渲染动态渲染图片

    Vue-Viaudio (vue-viaudio)

    Dynamically/Reactively render videos and audios.

    动态/动态渲染视频和音频。

    项目设置 (Project setup)

    Install the package:

    安装软件包:

    使用npm (Using npm)

    npm i @dongido/vue-viaudio

    或使用纱线 (OR Using yarn)

    yarn add @dongido/vue-viaudio

    用法示例 (Example Usage)

    基本用法-播放视频 (Basic usage - Play a video)

    <script>
    import Media from '@dongido/vue-viaudio'
    
    export default {
      name: 'app',
      components: {
        Media
      },
    }
    </script>
    
    <template>
      <div id="app">
        <Media 
          :kind="'video'"
          :controls="true"
          :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
        >
        </Media>
      </div>
    </template>

    基本用法-播放音频 (Basic usage - Play an audio)

    <script>
    import Media from '@dongido/vue-viaudio'
    
    export default {
      name: 'app',
      components: {
        Media
      },
    }
    </script>
    
    <template>
      <div id="app">
        <Media 
          :kind="'audio'"
          :controls="true"
          :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
        >
        </Media>
      </div>
    </template>

    A bit advanced usage - with events

    进阶用法-具有事件

    <template>
      <div id="app">
        <Media 
          :kind="'video'"
          :isMuted="(false)"
          :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
          :poster="'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217'"
          :autoplay="true"
          :controls="true"
          :loop="true"
          :ref="'fish'"
          :style="{width: '500px'}"
          @pause="handle()"
        >
        </Media>
      </div>
    </template>
    
    <script>
    import Media from '@dongido/vue-viaudio'
    
    export default {
      name: 'app',
      components: {
        Media
      },
      methods: {
        handle() {
          console.log('Video paused!, playing in 2 sec...')
    
          setTimeout( () => {
            this.$refs.fish.play() 
          }, 2000)
        }
      }
    }
    </script>
    
    <style>
    #app {
      width: 100%;
      text-align: center;
      margin-top: 40vh;
    }
    </style>

    媒体来源 (Media sources)

    This package can accept its source of media from either the :src or :srcObject property.

    该软件包可以通过:src:srcObject属性接受其媒体源。

    The src property can be either a string or an array.

    src属性可以是字符串或数组。

    The :srcObject is particularly useful when you need to render a stream source like from WebRTC.

    当需要从WebRTC渲染流源时, :srcObject特别有用。

    属性-支持所有“视频和音频元素”属性。 (Properties - supports all Video and Audio Element properties.)

    Props Required Description
    src [Array or String ] True (if srcObject is not provided) The source of the media
    srcObject [Object] True (if src is not provided) The source of the media
    kind [String] True It's either audio or video.
    isMuted [String] False Determines if a video will be muted or not. It's either true or false.
    道具 需要 描述
    src [数组或字符串] True (如果未提供srcObject ) 媒体来源
    srcObject [对象] True (如果未提供src ) 媒体来源
    kind [String] 真正 它可以是audiovideo
    isMuted [String] 确定是否将视频静音。 它是对还是错。

    It accepts all video and audio attributes. You just need to pass the one you need. You can also bind them if you need some reactivity.

    它接受所有视频音频属性。 您只需要通过所需的一项即可。 如果需要一些React性,也可以绑定它们。

    影片活动 (Video Events)

    You can listen to video element events when they happen. These events are available when you pass the prop kind as video.

    您可以在发生视频元素事件时收听它们。 当您将道具kind作为video传递时,这些事件可用。

    Events Description
    canplay The browser can play the media
    canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering.
    complete The rendering of an OfflineAudioContext is terminated.
    durationchange The duration attribute has been updated.
    emptied The media has become empty
    ended Playback has stopped because the end of the media was reached.
    loadeddata The first frame of the media has finished loading.
    pause Playback has been paused.
    play Playback has begun.
    loadedmetadata The metadata has been loaded.
    playing Playback is ready to start after having been paused or delayed due to lack of data.
    ratechange The playback rate has changed.
    seeked A seek operation completed.
    seeking A seek operation began.
    stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
    suspend Media data loading has been suspended.
    timeupdate The time indicated by the currentTime attribute has been updated.
    volumechange Trggers when volume has changed.
    waiting Triggers when the media has stoped playing because of temproray lack of data
    大事记 描述
    canplay 浏览器可以播放媒体
    canplaythrough 浏览器估计它可以播放媒体到最后,而无需停止内容缓冲。
    complete OfflineAudioContext的呈现终止。
    durationchange 持续时间属性已更新。
    emptied 媒体已空
    ended 播放已停止,因为已到达媒体结尾。
    loadeddata 媒体的第一帧已完成加载。
    pause 播放已暂停。
    play 播放已经开始。
    loadedmetadata 元数据已加载。
    playing 由于缺少数据而被暂停或延迟后,就可以开始播放了。
    ratechange 播放速率已更改。
    seeked 搜索操作完成。
    seeking 搜索操作开始。
    stalled 用户代理正在尝试获取媒体数据,但是数据出人意​​料地不可用。
    suspend 媒体数据加载已暂停。
    timeupdate currentTime属性指示的时间已更新。
    volumechange 音量改变时触发。
    waiting 由于临时缺少数据而在媒体停止播放时触发

    You can read more about these events here.

    您可以在此处阅读有关这些事件的更多信息。

    用法示例 (Example usage)

    Assuming, you want to listen to when the user pauses a video. You can do that using:

    假设您要在用户暂停视频时收听。 您可以使用:

    <script>
    import Media from '@dongido/vue-viaudio'
    
    export default {
      name: 'app',
      components: {
        Media
      },
      methods: {
        handlePauseEvent() {
          console.log('The video is now paused.')
        }
      }
    }
    </script>
    
    <template>
      <div id="app">
        <Media 
          :kind="'video'"
          :controls="true"
          :src="'https://www.w3schools.com/html/mov_bbb.mp4'"
          @pause="handlePauseEvent()" // The event
        >
        </Media>
      </div>
    </template>

    翻译自: https://vuejsexamples.com/dynamically-reactively-render-videos-and-audios/

    vue渲染动态渲染图片

    展开全文
  • https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/11440315.html
  • 动态渲染数据

    2020-03-07 18:06:15
    子组件用props接收 父组件用:进行绑定 动态渲染数据html中用v-for循环 对象也可以循环,第二个参数是key (item,key)of 名字 ...动态渲染数据是要引入axios 这是根组件 这是子组件 当前城...

    子组件用props接收 父组件用:进行绑定
    动态渲染数据html中用v-for循环
    对象也可以循环,第二个参数是key (item,key)of 名字
    mounted(){ 是调用methods中定义的函数 ,this.get…}
    动态渲染数据是要引入axios

    这是根组件

    这是子组件

    当前城市
    {{this.currentCity}}
    热门城市
    展开全文
  • 关于vue如何动态渲染单选框(radio)同时动态渲染页面 自己做的一个练习,这里记录一下。 首先是template部分 <template> <div class="hello"> <div v-for="item in msg" :key='item'>//首先...

    关于vue如何动态渲染单选框(radio)同时动态渲染页面

    自己做的一个练习,这里记录一下。
    首先是template部分

    <template>
      <div class="hello">
        <div v-for="item in msg" :key='item'>//首先循环渲染列表
          <input type="radio" :id="item.id" :value="item" v-model="ck"><label :for="item.id">{{ item.name }}</label>
          //这里是同时使用了v-model和v-bind:value,实现数据的绑定和单项选择
        </div>
        //这里是根据单选框动态渲染列表内容
          <p >{{ ck.id }}</p>
          <p >{{ ck.name }}</p>
          <p >{{ ck.title }}</p>
      </div>
    </template>
    
    

    之后是js部分,仅仅只是数据而已

    <script>
    export default {
      name: 'Radio',
      data(){
        return{
          msg:{
            hw:{
              id:'hw',
              name:'华为',
              title:'这是第一个列表'
            },
            ry:{
              id:'ry',
              name:'荣耀',
              title:'这是第二个列表'
            }
          },
         ck:{
              id:'hw',
              name:'华为',
              title:'这是第一个'
            }
        }
      },
     
    }
    </script>
    
    展开全文
  • JS动态渲染表格

    2020-12-12 20:02:21
    这里写自定义目录标题JS实现动态渲染表格数据以及增加删除操作 JS实现动态渲染表格数据以及增加删除操作 将一组数据动态的渲染到表格中,并且实现了增加和删除的功能。但是因为没有和后台的交互,数据并没有写入...

    JS实现动态渲染表格数据以及增加删除操作

    将一组数据动态的渲染到表格中,并且实现了增加和删除的功能。但是因为没有和后台的交互,数据并没有写入数据库,页面刷新后,渲染的数据会恢复为开始设定的数据。

    以下是html结构

    <div>
            姓名:<input type="text" value="" class="username">
            年龄:<input type="text" value="" class="userage">
            性别:<input type="text" value="" class="usergender">
            <input type="button" value="添加" class="addBtn">
        </div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    

    以下是CSS样式

    * {
                margin: 0;
                padding: 0;
            }
    
            html,body {
                overflow: hidden;
            }
    
            div {
                margin: 80px 0 0 288px;
            }
            table {
                width: 800px;
                margin: 20px auto;
                border-collapse: collapse;
                text-align: center;
                font-size: 16px;
            }
    
            tr {
                height: 40px;
            }
    
            thead {
                background: #add;
            }
    
            td {
                border-bottom: 1px solid #ccc;
            }
    

    以下是最关键的JS代码----实现功能的部分

    • 首先获取元素,初始化渲染的数据(用了数组存储对象)
    	var name_inp = document.querySelector('.username')
            var age_inp = document.querySelector('.userage')
            var gender_inp = document.querySelector('.usergender')
            var addBtn = document.querySelector('.addBtn')
    
            var tbody = document.querySelector('tbody')
    
            var arr = [
                { id: 1, name: '赵一', age: 18, gender: '男'},
                { id: 2, name: '钱二', age: 20, gender: '女'},
                { id: 3, name: '孙三', age: 22, gender: '男'},
                { id: 4, name: '李四', age: 24, gender: '女'}
            ]
    
    • 数据渲染表格
      用函数封装了这个部分。后面的添加、删除功能每次执行后,都需要重新渲染表格,封装成函数有利于调用
      用字符串拼接html结构和数据
      	function bindHtml () {
               var str = ''
      
               arr.forEach(function (item) {
                   str += '<tr>'
      
                   for (var key in item) {
                       str += '<td>' + item[key] + '</td>'
                   }
       			// 设置删除按钮自定义属性 data-id = 所在这行的id
                   str += '<td><input class="del" type="button" data-id=" ' + item.id + ' " value="删除"></td> </tr>' 
      
                   tbody.innerHTML = str
               })
           }
      
           bindHtml()
      
    • 点击添加事件
      把数据组装成对象,添加到数组中,再次调用开始的渲染表格函数
    		addBtn.onclick = function () {
                // trim 去除首尾空格
                var username = name_inp.value.trim()
                var userage = age_inp.value.trim()
                var usergender = gender_inp.value.trim()
    
                if (!username || !userage || !usergender) {
                    alert('请填写完整的表单')
                    return
                }
    
                var userInfo = {    
                    id: arr.length ? arr[arr.length - 1].id + 1 : 1,
                    name: username,
                    age: userage,
                    gender: usergender
                }
    
                arr.push(userInfo)
    			// 添加数据后要刷新表格
                bindHtml()
    			// 添加后把添加的输入框数据清除
                name_inp.value = ''
                age_inp.value = ''
                gender_inp.value = ''
            }
    
    • 给删除按钮绑定点击事件,实现删除功能
      点击事件并没有直接添加在删除按钮上,而是利用事件捕获,把点击事件绑定在删除按钮(.del)最近的固定结构的父级元素tbody上,通过target获取精确的事件源(即点击的是哪个删除按钮),省去循环给按钮绑定事件的繁琐
      删除后再次调用渲染数据函数,重新渲染一次表格
    tbody.addEventListener('click',function (e) {
    			// 处理事件对象兼容
                e = e || window.event
                // 处理事件对象目标信息兼容
                var target = e.target || e.srcElement
    
                if (target.className === 'del') {
                	// 获取到要删除的那行按钮的id(即这行数据的id)
                    var id =target.dataset.id - 0
    
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].id === id) {
                        	// 截取掉id那一行
                            arr.splice(i, 1)
                            break
                        }
                    }
                    // 重新渲染表格
                    bindHtml()
                }
                
            })
    
    展开全文
  • 动态渲染页面爬取

    千次阅读 2020-06-09 17:26:35
    04- 动态渲染页面爬取 文章目录04- 动态渲染页面爬取4-1 Selenium的安装4 -2 Selenium相关链接4-3 pip 安装4-4 ChromeDriver 的安装4-5 ChromeDriver 的相关链接4-6 ChromeDriver环境配置4-7 Selenium声明浏览器对象...
  • element-ui动态渲染表格
  • 通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
  • 动态渲染 selenium

    2019-08-06 16:53:12
    JavaScript动态渲染的页面不止Ajax这一种。比如中国青年网(详见http://news.youth.cn/gn/),它的分页部分是由JavaScript生成的,并非原始HTML代码,这其中并不包含Ajax请求。比如ECharts的官方实例(详见...
  • 本文实例为大家分享了vue+iview 动态渲染表格(iview插件table),供大家参考,具体内容如下 效果图 (表格头部和表格主体都是动态渲染) 重要代码 (item) columns=item.columns data=item.data border=false key='...
  • vue动态渲染组件

    2020-09-27 17:36:22
    component 动态渲染组件 使用<component v-bind:is="xxxComponent"></component>来动态渲染组件 使用方式: <keep-alive> <component :is="myComponent"></component> </keep-...
  • 处理动态渲染页面

    千次阅读 多人点赞 2020-09-29 17:30:57
    文章目录1.Selenium的使用2.查找节点3.交互4.动作链5.执行JavaScript6. 获取节点信息6.1 获取属性6.2 获取文本值6.3 获取id、位置、标签名的大小7.切换Frame8.延时等待8.1 隐式等待8.2 ...对于一些JavaScript动态渲染
  • 表格标题头冻结Demo,支持内容动态渲染 表格标题头冻结Demo,支持内容动态渲染 表格标题头冻结Demo,支持内容动态渲染
  • vue动态渲染表格

    2021-03-25 19:50:48
    所以需要动态渲染个表格的列,如下图中2人团价格以及3人团价格表头 需求描述: 当后台管理员选择开团的类型后,所关联的参团商品设置sku时,会动态渲染参团类型所对应的价格。 如下图sku设置。 ![]...
  • 动态渲染反爬虫

    2020-03-22 23:49:52
    为了提高用户的体验,大部分网站都使用动态渲染,即使用JavaScript代码来实现。   动态渲染,由JavaScript改变HTML DOM 导致页面内容发生变化的现象,不仅提高了网页的交互性,还提升网页的加载速度,为用户提供了...
  • Element动态渲染表格

    2020-03-04 17:13:28
    2,theadData是经过处理后需要动态渲染的数据,在渲染的时候也可以绑定id便于后面的修改提交操作 在这里需要添加元素来回切换显示隐藏操作后的界面,实现的效果如下: 1,以下是渲染后的界面 2,以下是要进行某一...
  • 今天咱们来说的主动态渲染的数据可视化是如何实现的呢? 要是地图的动态渲染功能,地图渲染是通过地图着色来实现预警的一种方式,也是地图上来显示统计图、地标和颜色预警的工具——webgis渲染,是亿信ABI的特色...
  • 怎么动态渲染出来
  • vue项目 样式动态渲染The question is - what will a browser do, given a page with several stylesheets, each of them probably overwriting definitions from the previous ones? Will the browser render the ...
  • <div><p>其实工作中,更多的情况是 表头和内容都是动态渲染的。刚接触这个插件, 这个插件能根据数据动态渲染表头吗?</p><p>该提问来源于开源项目:baukh789/GridManager</p></div>
  • 主要介绍了Vue切换Tab动态渲染组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。 子组件table中template模板 &lt;el-table :data="this....
  • echarts动态渲染数据 最近在用echarts时发现了问题,从后台获取的数据不能渲染到页面上,研究后发现渲染到页面的数据和自己从后端获取到后赋给的数据不同,分析得出其实echarts在页面创造阶段就进行了渲染,并且后期...
  • 动态渲染生成二维码

    2020-02-03 12:21:37
    动态渲染生成二维码 HTML代码: <div class="ewm"> <div class="ma" id="ewm"> //用于生成二维码进行填充 </div> </div> JS代码: $(function(){ // 扫描二维码对应跳转的链接地址 ...
  • // 动态渲染脚本类型下拉框 // 1.发送ajax请求得到data // 2.将data渲染到页面上 function getDataList() { // 请求 $.ajax({ type:'post', url: "/cd/workPlatform/tool/detail", success:function...
  • 在apicloud项目中,我们经常遇到通过接口获取到的数据对页面进行渲染...但是,遗憾的是我们经常发现,apicloud中定义的点击过程中添加的一些效果,在动态渲染的时候是没有效果的,比如在一个动态渲染的按钮,给它添...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,180
精华内容 4,872
关键字:

动态渲染