Vue引入Udesk在线打电话组件

业务需求需要在我们的CRM后台引入在线打电话功能

可以直接拨打电话给客户，首先需要在Vue中引入Udesk打包后的文件，在Vue项目中有两个地方用来存放静态资源文件，分别是assets和static文件夹，两者的区别在于assets里面的文件会被webpack打包进你的代码里，而static里面的，就直接引用了，不会参与到文件的打包路径，因此一般在static里面放一些类库的文件，在assets里面放属于该项目的资源文件
在资源的引用方面来说，放在static目录下的文件可以通过相对路径的形式引入，在 <img src="./logo.png">和 background: url(./logo.png) 中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖，因为 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对/模块路径。放在static目录下的文件需要采用绝对路径的格式引入，static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终目录（默认是dist/static）下，必须使用绝对路径引用这些文件
Vue引入Udesk方式，首先可以在index.html中直接通过Script标签来引入Udesk相关文件，注意必须使用绝对路径引入，如果在这个文件中引入的话就相当于是在全局都引入了Udesk，每个文件都可以访问到，也可以只在我们所需要的文件中引入，在相关Vue文件中动态的生成Script标签，然后引入相关组件即可
生成Script标签

        var head = document.getElementsByTagName('head')[0]var script = document.createElement('script')script.type = 'text/javascript'script.charset = 'utf-8'script.defer = truescript.async = truescript.onload = function() {//引入后实例化放在这个位置}script.src = '.........'head.appendChild(script)

需要注意的是：因为Script引入的过程是一个异步的过程，因此在引入后实例化等一系列的操作要放到script.onload后的函数当中，很大程度上引入某些组件然后应用时样式不是很符合的，我们可以在实例化之后通过原生js来操作他的dom结构并且修改一些样式从而达到预期的标准

Vue引入Udesk在线打电话组件相关推荐

Vue引入并使用Element-UI组件库的两种方式
前言在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
vue引入 wps在线编辑版，可进行预览，编辑，打印等功能。
项目需求是, 在vue中进行文档管理, 因此最后选择了wps在线编辑版本. 一.使用方法在官网下载js-sdk js文件全局引入 import * as WPS from './assets/js ...
vue引入 wps在线编辑版
1.先去官网下载JS https://wwo.wps.cn/docs-js-sdk/#/base/quick-start 2.main.js import * as WPS from './asset ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
vue 版本发布在线跟新用户操作解决方案_Vue3.0正式发布，本次发布所有总结，一起看看!【附在线视频】...
B站在线视频 2020年09月18日,Vue.js 3.0 正式发布.本次发布框架本身带来了几个大点的改进,以及功能和历程的一些总结! 1.3.0历程 3.0版本代表了2年多的开发工作具有30多个R ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...

Vue引入Udesk在线打电话组件

Vue引入Udesk在线打电话组件相关推荐

最新文章

热门文章