vue3项目使用frame标签页嵌入B站视频

1.在template模板中加入

<iframe

              id="bili-radio"

              src="//player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1"

              scrolling="no"

              border="0"

              frameborder="no"

              framespacing="0"

              allowfullscreen="true"

              autoplay=false

            >

            </iframe>

2.在style样式中添加你想要视频的样式,包括宽度高度

#bili-radio {

          width: 40%;

          height: 82px;

          border-radius: 6px;

        }

3.如果想要在第60秒开始,可以自行加入&t=60,如果要让它自动播放的话,可以加入&autoplay=true。还有其他想要的配置可以自行添加。

缺点:画质不清晰

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果您想通过页面标签的 `ref` 属性来实现在 a 页面往 b 页面传值的话,可以使用 `inject` 和 `provide` 这两个 API。 具体实现步骤如下: 1. 在 a 页面中定义一个变量,用来存储要传递的值。然后将该变量通过 `provide` 方法提供出去。 ```typescript import { defineComponent, ref, provide } from 'vue'; export default defineComponent({ setup() { const value = ref('hello world'); provide('value', value); return {}; }, }); ``` 2. 在 b 页面中,使用 `inject` 方法来获取 a 页面传递过来的值。先在 `setup` 方法中使用 `ref` 定义一个变量,然后使用 `inject` 方法获取 a 页面传递过来的值,并将其赋值给该变量。 ```typescript import { defineComponent, ref, inject } from 'vue'; export default defineComponent({ setup() { const value = ref(''); const valueFromA = inject('value', ''); value.value = valueFromA; return { value }; }, }); ``` 3. 在 a 页面使用 `ref` 属性引用该标签,并将该标签的值传递给 b 页面。 ```html <template> <div ref="myDiv" @click="handleClick">点击我跳转到 B 页面</div> </template> <script> import { defineComponent, ref } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ setup() { const router = useRouter(); const myDiv = ref(null); const handleClick = () => { router.push({ path: '/b', query: { value: myDiv.value.innerText } }); }; return { myDiv, handleClick }; }, }); </script> ``` 这样就完成了通过页面标签的 `ref` 属性实现在 a 页面往 b 页面传值的操作。需要注意的是,使用这种方式传递的值只适合传递简单的字符串或数字等数据。如果需要传递复杂的对象,可以使用 `JSON.stringify()` 方法将对象转换成字符串进行传递,然后在 b 页面使用 `JSON.parse()` 方法将字符串转换成对象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值