下载插件

npm i aix-plugins-aitools@latest

在main.js中引入

import aiAudio from 'alx-plugins' import '../node_modules/alx-plugins/AITools.css' app.use(aiAudio)

import aiVideo from 'aix-plugins-aitools' app.use(aiVideo)

-----------------------------------------音频组件-----------------------------------------------------------

在页面中使用，具体使用方法参考 本项目下views/index

<aiAudio ref="audioRef" :audioSrc="audioSrc" @saveClick="saveClick" @auditionClick="auditionClick">

auditionClick方法为【试听按钮】抛出方法

requestData 为插件返回的参数数据，用于请求api接口

const auditionClick = (requestData) => {

• 开启按钮loading audioRef.value.startLoading = true
• 定义api接口 api(requestData).then(res => {
  • 处理业务逻辑，获取到返回的res.data.url，并给插件传递生成的音频src audioSrc.value = res.data.url .......
  • 关闭按钮loading audioRef.value.startLoading = false }) }

saveClick 方法为【存储按钮】抛出方法

const saveClick = (requestData) => { audioRef.value.saveLoading = true ....... audioRef.value.saveLoading = false }

-----------------------------------------视频组件-----------------------------------------------------------

在页面中使用，具体使用方法参考 本项目下views/index1

<AiVideo :options="options" # 配图风格选项 :config="applyVal" # 语音生成配置 :emotionConfig="emotionObj" # 语音多情感配置 :showItemList="visibleList" # 是否显示故事列表 :backgroundMusic="backgroundMusicInfo" # 背景音乐 :items="itemList" # 故事列表。 @createNow="handleCreateNow" # 立即生成按钮回调 @back="handleBack" # 返回按钮回调 @addItem="handleAddItem" # 新增章节回调 @delItem="handleDelItem" # 删除章节回调 @upload="handleFileChange" # 图片、语音上传回调 @delMusic="handleDelMusic" # 删除背景音乐回调 @generate="handleGenerate" # 生成动画回调 @save="handleSave" # 保存绘本回调 @recreate="handeRecreate" # 重新创建回调 @contentChange="handleContentChanged" # 章节故事变更回调 >