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