vue中使用西瓜视频中引入自定义样式,绝对可以
首先配置sass-loader和raw-loader
方法,再vue-config.js中加上这一段代码
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule
.use('raw-loader')
.loader('raw-loader')
}
}
然后命令行输入npx xgplayer eject [targetDir] [skinName]实现将播放器样式相关代码复制到指定相对路径[targetDir]下的.xgplayer/skin文件夹中,然后就可以任意修改实现自定义样式了。[skinName]为自定义样式名,可不输入。
页面中引入
import Player from 'xgplayer';
import './.xgplayer/skin/index.js';
这样你就可以随心所欲地更改样式了么么哒
vue中使用西瓜视频中引入自定义样式,绝对可以的更多相关文章
- 头条小视频和西瓜视频signature签名算法
点击上方↑↑↑蓝字[协议分析与还原]关注我们 "分析今日头条内小视频和西瓜视频分享后浏览器打开所用的signature签名算法." 上月写的一篇关于使用微信的wxid加好友的文章, ...
- Vue:如何在vue-cli中创建并引入自定义组件
一.创建并引入一个组件 1.创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <t ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Android 工程引入自定义Library后,工程无法识别Library中的类
这个问题有点神啊. 在工程中导入第三方类库包(自定义Library)本来运行的好好的,突然间所有引用的Library中的类都无法在工程中引用了,一个劲的打红叉,eclipse也重启了,项目也clean ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...
- CKEDITOR 4.6.X 版本 插件 弹出对话框 Dialog中 表格 Table 自定义样式Style 问题
项目开发过程中,发现CKEDITOR 插件的弹出框 内 如果跟据项目需要写表格(table tr td),表格的边框等属性会被 CKEDITOR的清除或覆盖,导致表格很难看. 问题关键: 插件弹出框d ...
- C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形
原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 最近在写WPF界面的时候遇到一个情 ...
- Android短视频中如何实现720P磨皮美颜录制?
视频中磨皮.美颜功能已成为刚需,那么如何在Android短视频中实现720P磨皮美颜录制?本篇文章中,网易云信资深开发工程师将向大家介绍具体的操作方法. 相关阅读推荐 <短视频技术详解:Andr ...
- vue中嵌套的iframe中控制路由的跳转及传参
在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...
随机推荐
- #科技 #资讯 #生活 微信测试更多图片打开方式,神州圆满发射,英伟达或停产性价比神卡,SAMSUNG新一代显存带宽容量双翻倍,这就是今天的其它大新闻
今天是2022年12月01日 十一月初八 现在是中午12:10 下面是今天的其他大新闻 #NEWS 1 # 微信测试用不同小程序打开图片:快捷调用小程序打开图片.视频.文件 ( 新浪科技 ) 据悉,微 ...
- COLMAP论文阅读笔记——sfm算法、不定期更新
文章目录 structure from motion revisited 第一步 对应点搜索 特征提取feature extraction 匹配matching 几何验证geometric verif ...
- <c:forEach>循环获取下一次循环数据
<c:forEach>循环获取下一次循环数据 实现案例类似于多级导航栏下拉.双循环便利ul.li,利用外层循环的index获取数据.动态id设置. varLista[vs.index][l ...
- android studio 隐式Internet跳转
直接setAction方法 Intent intent = new Intent(); intent.setAction("com.hly.view.fling"); startA ...
- prometheus 配置数据保留7天时间storage.tsdb.retention.time
1.修改配置如下: 默认24h添加配置:retention: 168h
- 【项目记录】4:Pycharm激活方法
引用一下: 今天给大家带来一种全新的Pycharm安装激活方式.可以激活到2099年. 安装 1.我们首先进入idea官网 jetbrains.com 找到最新版本的pycharm,这里就以windo ...
- 2003031120—廖威—Python数据分析第四周作业—matplotlib的学习
项目 内容 课程班级博客链接 20级数据班(本) 这个作业要求链接 python数据分析第四周作业要求 博客名称 2003031120-廖威-Python数据分析第四周作业-matplotlib的学习 ...
- mysql主从同步复制
主从同步原理 master记录数据操作 开启binlog日志 设置binlog日志格式 指定server_id slave启用俩个线程 slave_io:复制master主机binlog日志为文件里的 ...
- logic 运算符
- OpenCV图像拼接函数
图像拼接函数 第一种方法:通过遍历图像,将待拼接的图像每个像素赋值给输出图像 //图像拼接函数 //imageVector 输入图像数组 //outputImage 输出图像 //colCount_ ...