1.安装

npm i vue-aplayer

2.引入

import VueAplayer from 'vue-aplayer'
 name: "Aplayer",
props: ["pdfurl"],
components: {
//别忘了引入组件
'a-player': VueAplayer
},

3.初始化

flag:false,
musicList:'',
songList:{
src:''
},

4.async await 异步加载,先加载出player再使用

 async mounted () {
//async await 异步加载,先加载出player再使用
await this.handleSuccess();
let aplayer = this.$refs.player.control;
console.log(this.$refs.player);
aplayer.play();
},

5.方法

在里面给数据赋值

 async   handleSuccess(res, file) {
console.log(res);
console.log(file);
let nm = [];
this.uploadList.map(item => {
nm.push(item.response.data.url);
});
this.formValidate.musicUrl = nm.toString();
//给音乐播放器的必要属性赋值
console.log(this.formValidate.musicUrl);
//给src 赋值
this.songList.src=this.formValidate.musicUrl;
//给标题赋值
this.songList.title= file.name;
//截取file.name 获取除后4位的字符串
this.formValidate.musicName = (file.name).substring(,(file.name).length-);
//给音乐播放器的作者赋值
var arr = (file.name).split("-");
this.songList.artist =arr[];
//让音乐播放器显示
this.flag = true;
console.log(this.formValidate.musicUrl);
},

demo

<template>
<Card>
<h2>
<Icon type="md-book"/>基本信息
</h2>
<Divider/>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="">
<FormItem label="最大年龄:" prop="musicMaxAge">
<Input type="text" v-model="formValidate.musicMaxAge" placeholder="请输入最大年龄" number></Input>
</FormItem>
<FormItem label="最小年龄:" prop="musicMinAge">
<Input type="text" v-model="formValidate.musicMinAge" placeholder="请输入最小年龄" number></Input>
</FormItem>
<FormItem label="音乐名称" prop="musicName">
<Input type="text" v-model="formValidate.musicName" placeholder="请输入音乐名称"></Input>
</FormItem>
<FormItem label="音乐风格" prop="musicStyle">
<Input type="text" v-model="formValidate.musicStyle" placeholder="请输入音乐名称"></Input>
</FormItem>
<FormItem prop="musicSex" label="音乐属性">
<Select v-model="formValidate.musicSex" style="width:100px">
<Option v-for="item in musicSex" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
<div style="position: relative">
<a-player :music="songList" :showLrc="true" :mine="true" theme="#b7daff" mode="circulation" v-if="flag" listMaxHeight='96px' ref="player"></a-player>
</div>
<FormItem style="width: 100%" label="音乐上传" prop="musicUrl">
<div class="demo-upload-list" v-for="item in uploadList" :key="item.index">
<template v-if="item.status === 'finished'">
<audio :src="item.response.data.url"></audio>
<div class="demo-upload-list-cover">
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['wma','mp3','ogg']"
:max-size=""
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="/rule/sys/oss/upload"
style="display: inline-block;width:58px;"
>
<div style="width:58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size=""></Icon>
</div>
</Upload>
<Modal title="View Image" v-model="visible">
<audio :src="imgs" v-if="visible" style="width: 100%"></audio>
</Modal>
</FormItem>
<FormItem v-if="formValidate.musicUrl !== null" label="音乐路径" prop="musicUrl">
<Input type="text" v-model="formValidate.musicUrl" placeholder></Input>
</FormItem>
<FormItem label="备注" prop="remarks">
<Input type="text" v-model="formValidate.remarks" placeholder="请输入"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
</FormItem>
</Form>
</Card>
</template>
<script>
//引入音乐播放器
import VueAplayer from 'vue-aplayer'
import { addMusic } from "../../api/music.js"; export default {
name: "Aplayer",
props: ["pdfurl"],
components: {
//别忘了引入组件
'a-player': VueAplayer
},
data() {
const validateminAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("最小年龄不能为空"));
}
// 模拟异步验证效果
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error("请输入一个整数"));
} else {
if (value < || value > ) {
callback(new Error("年龄只允许在0到135之间"));
} else {
callback();
}
}
}, );
};
const validatemaxAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("最大年龄不能为空"));
}
// 模拟异步验证效果
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error("请输入一个整数"));
} else {
if (value < || value > ) {
callback(new Error("年龄只允许在0到135之间"));
} else {
callback();
}
}
}, );
};
return {
flag:false,
musicList:'',
songList:{
src:''
},
uploadList: [],
imgName: "",
imgs: "",
visible: false,
defaultList: [],
formValidate: {
musicMaxAge: "",
musicMinAge: "",
musicName: "",
musicSex: "",
remarks: "",
musicUrl: ""
},
ruleValidate: {
musicMaxAge: [{ validator: validatemaxAge, trigger: "blur" }],
musicMinAge: [{ validator: validateminAge, trigger: "blur" }],
musicName: [
{ required: true, message: "音乐名称不能为空", trigger: "blur" }
],
musicSex: [
{ required: true, message: "音乐属性不能为空", trigger: "blur" }
],
musicUrl: [
{ required: true, message: "音乐路径不能为空", trigger: "blur" }
],
musicStyle: [
{ required: true, message: "音乐风格不能为空", trigger: "blur" }
]
},
musicSex: [
{
value: "",
label: "普通"
},
{
value: "",
label: "男性"
},
{
value: "",
label: "女性"
}
]
};
},
async mounted () {
//async await 异步加载,先加载出player再使用
await this.handleSuccess();
let aplayer = this.$refs.player.control;
console.log(this.$refs.player);
aplayer.play();
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
},
methods: {
handleSubmit(name) {
this.$refs[name].validate(valid => {
if (valid) {
addMusic(this.formValidate)
.then(res => {
this.$Message.success("Success!");
this.$router.go(-);
})
.catch(error => {});
} else {
this.$Message.error("Fail!");
}
});
},
handleReset(name) {
this.$refs[name].resetFields();
},
// 上传开始
handleRemove(file) {
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), );
this.formValidate.musicUrl = "";
this.formValidate.musicName="";
this.songList.src="";
this.flag = false;
},
async handleSuccess(res, file) {
console.log(res);
console.log(file);
let nm = [];
this.uploadList.map(item => {
nm.push(item.response.data.url);
});
this.formValidate.musicUrl = nm.toString();
//给音乐播放器的必要属性赋值
console.log(this.formValidate.musicUrl);
//给src 赋值
this.songList.src=this.formValidate.musicUrl;
//给标题赋值
this.songList.title= file.name;
//截取file.name 获取除后4位的字符串
this.formValidate.musicName = (file.name).substring(,(file.name).length-);
//给音乐播放器的作者赋值
var arr = (file.name).split("-");
this.songList.artist =arr[];
//让音乐播放器显示
this.flag = true;
console.log(this.formValidate.musicUrl);
},
handleFormatError(file) {
this.$Notice.warning({
title: "文件格式不正确",
desc: "文件" + file.name + "格式不正确,请上传MP3格式"
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: "超出文件大小范围",
desc: "文件" + file.name + " 太大了, 不允许超过 500M."
});
},
handleBeforeUpload() {
const check = this.uploadList.length < ;
if (!check) {
this.$Notice.warning({
title: "最多只能传一个音乐"
});
}
return check;
}
// 上次结束
}
};
</script>
<style scoped>
.demo-upload-list {
display: inline-block;
width: 80px;
height: 80px;
text-align: center;
line-height: 100px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 1px 1px rgba(, , , 0.2);
margin-right: 4px;
} .demo-upload-list img {
width: %;
height: %;
} .demo-upload-list-cover {
display: none;
position: absolute;
top: ;
bottom: ;
left: ;
right: ;
background: rgba(, , , 0.6);
} .demo-upload-list:hover .demo-upload-list-cover {
display: block;
} .demo-upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 2px;
}
</style>

vue2.0 使用 vue-aplayer的更多相关文章

  1. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  2. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  3. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  4. vue2.0 关于Vue实例的生命周期

    什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...

  5. Vue2.0 搭建Vue脚手架(vue-cli)

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...

  6. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  7. vue2.0搭建vue手脚架(vue-cli)

    1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. ...

  8. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  9. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  10. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

随机推荐

  1. ht-1 jdk calendar类

    package calendardemo; import java.util.Calendar; public class CalendarDemo { /** * @param args */ pu ...

  2. Python3解leetcode Subtree of Another Tree

    问题描述: Given two non-empty binary trees s and t, check whether tree t has exactly the same structure ...

  3. php substr()函数 语法

    php substr()函数 语法 作用:截取字符串 语法:substr(string,start,length)大理石平台 参数: 参数 描述 string 必需.规定要返回其中一部分的字符串. s ...

  4. 请问有支持直接从 word 文档复制图片的 editor 吗

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  5. promise以及async、await学习总结

    Promise/async.await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果 ...

  6. android7.0后对于detected problems with app native libraries提示框显示

    log信息: 03-27 09:08:25.887   397   400 W linker  : /data/app/com.guagua.qiqi-1/lib/arm/libMedia.so ha ...

  7. 测开之路七十七:shell之if、case、for、while

    选择语句(if语句) 大于:-gt判断目录是否存在:-d if [ 判断条件 ]; then statement1 Statement2elif [ 判断条件 ]; then statement1 S ...

  8. Vagrant 手册之 Vagrantfile - 概述

    原文地址 Vagrantfile 的主要用途是描述用于项目的机器类型,以及如何配置和提供这些机器. Vagrant 的每个项目运行一个 Vagrantfile,并且 Vagrantfile 应该被提交 ...

  9. JS DOM元素的操作(创建,添加,删除,和修改属性)

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  10. 阅读笔记05-架构师必备最全SQL优化方案(1)

    一.优化的哲学 1.优化可能带来的问题? 优化不总是对一个单纯的环境进行,还很可能是一个复杂的已投产的系统: 优化手段本来就有很大的风险,只不过你没能力意识到和预见到: 任何的技术可以解决一个问题,但 ...