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. PL/SQL 循环

    ----PL/SQL基本循环语句 LOOP DECLARE x ; BEGIN LOOP dbms_output.put_line(x); x :; THEN exit; END IF; END LO ...

  2. php strpos()函数 语法

    php strpos()函数 语法 作用:寻找字符串中某字符最先出现的位置.大理石平台怎么选择 语法:strpos(string,find,start) 参数: 参数 描述 string     必需 ...

  3. Angular:自定义表单控件

    分享一个最近写的支持表单验证的时间选择组件. import {AfterViewInit, Component, forwardRef, Input, OnInit, Renderer} from & ...

  4. (线性基)Operation

    http://acm.hdu.edu.cn/showproblem.php?pid=6579 线性基https://blog.csdn.net/a_forever_dream/article/deta ...

  5. GCD 和 NSOperationQueue 的差别

    http://stackoverflow.com/questions/10373331/nsoperation-vs-grand-central-dispatch http://www.cocoach ...

  6. centos7中yum安装lamp环境

    一.准备工作 1.1 环境 操作系统:centos7(CentOS-7-x86_64-Minimal-1708) 硬件:(这个根据项目运行和配置建议设置,一般我先配个1核1G) 1.2 关闭selin ...

  7. oracle12.2 CDB PDB基本管理操作

    容器间切换 切换到对应的PDBSSQL> alter session set container=pdb1;Session altered.SQL> alter database open ...

  8. PHP-会话技术

    B/S 请求响应模式是无状态的.任意的请求间不存在任何的联系,不能将请求状态保持下去. 会话技术可以给每个浏览器分配持久数据,这些数据不会随着一次请求和相应结束而销毁. COOKIE cookie 是 ...

  9. Oracle查询中文乱码

    1.查询Oracle服务端字符集 SQL> select userenv('language') from dual ; USERENV('LANGUAGE') ---------------- ...

  10. tools-eclipse-003-下载安装优化

    一.下载 1.1.jdk安装 下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html 安装:不需要安装jre,默认会 ...