Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘

最终效果
下载看板娘文件
csdn下载地址
将下载后的压缩包解压，复制到vue项目的public文件夹下
在index.html文件中引入js

 <!-- 看板娘 --><script type="text/javascript" src="./live2dw/lib/L2Dwidget.min.js"></script>

在APP.vue中创建动画

APP.vue

<template><div class="app" ref="box"><!-- <router-view /> --><div class="star" style="width: 200px; height: 300px; background-color: red;">鼠标放在此处和我互动</div></div>
</template><script>export default {name: 'App',created() {window.L2Dwidget//此处是对点击人物时触发事件的监听.on('*', (name) => {console.log('%c 你点击了 ' + '%c -> ' + name, 'background: #222; color: yellow','background: #fff; color: #000')})//对人物的属性配置.init({pluginRootPath: '../live2dw/', //人物文件夹的位置pluginJsPath: 'lib/',pluginModelPath: 'live2d-widget-model-shizuku/assets/',model: {jsonPath: '../live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json'},dialog: {enable: true, //是否开启对话框script: {//每20s，显示一言（调用一言Api返回的句子）'every idle 20s': '$hitokoto$',//触摸到class='star'对象,将会展示的文字'hover .star': '星星在天上而你在我心里 (*/ω＼*)',//触摸到身体'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',//触摸到头部'tap face': '~~'}},display: { //人物的属性配置position: 'left',width: 350,height: 800,hOffset: 200, // 横向偏移vOffset: -100 // 纵向偏移}, mobile: {show: true, //是否在移动端展示scale: 0.5 //t透明度}});}}
</script><style>body {margin: 0;width: 100%;}html {width: 100%;height: 100%;}.app {width: 100%;height: 100%;}
</style>

注意：只有部分人物可以展示对话框

如果需要替换人物，只需修改对应人物文件夹的位置

销毁看板娘

在beforeDestroy钩子函数中，直接移除dom元素

这个办法不是最好的，因为本人查阅了很多资料，并没有找到相关解决方案，所以只能使用这种比较粗暴的方法，如果有更好的答案，欢迎评论区交流

beforeDestroy() {//移除动画人物document.querySelector('#live2d-widget').remove();}

html中使用看板娘
参考博客链接
点击按钮切换人物
csdn下载demo

Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘相关推荐

vue main.js中引入js_web前端的同学不容错过，大厂Vue最佳实践总结，提高竞争力...
随着这几年前端技术的快速发展,Vue框架在国内普及率极高,人人都会用.那么,如何才能写得比别人优雅?比别人漂亮? 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入,直接向他们取经,是最便捷也是最 ...
vue里面_Vue中如何使用自定义插件（plugin）
Vue中如何使用自定义插件(plugin) 1.在根目录src下创建一个libs文件夹,在libs文件夹下面创建一个myPlugins文件夹,用来存放我们的自定义插件,在myPlugins文件夹下面再 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
vue更新data中的数据页面不渲染_vue更新obj类data的属性无效，页面data没刷新解决方法vue.set...
问题描述 Vue的data使用有坑啊,它不能直接修改创建的对象的属性,例如想要给 user 添加一个 name 属性,值是 Jay . 先来一个添加的错误示例(这是一个大坑,请注意),这样写页面不渲染 ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
超优 Vue+Element+Spring 中后端解决方案
今日推荐推荐一款开源 Java 版的视频管理系统推荐3个快速开发平台前后端都有项目经验又有着落了 14个项目转载:toutiao.com/i6911704074815767048 作者:we ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...

Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘

Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘相关推荐

最新文章

热门文章