使用vue开发实现XixunPlayer的功能.
XixunPlayer 获取设备音量并修改音量
/**
* @Author: 858834013@qq.com
* @Name: Volume
* @Date: 2022-04-26
* @Desc: XixunPlayer 获取设备音量并修改音量
*/
<template>
<div class="Volume">
<el-button class="mb20" type="primary" @click="getshow" size="mini">声音调节</el-button>
<el-dialog
title="声音调节"
:visible.sync="dialogVisible"
width="50%">
<div class="list">
<el-slider
v-model="num"
:max="15"
show-input>
</el-slider>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="setVolume">更改</el-button>
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getdata } from '@/api/led/led'
export default {
name: 'edit',
components: {},
props: {
id: {
type: String | Number,
default () {
return {}
}
}
},
data () {
return {
num: 0,
dialogVisible: false
}
},
filters: {},
watch: {
dialogVisible () {
if (this.dialogVisible) {
this.getData()
}
}
},
methods: {
// 修改音量
setVolume () {
var that = this
getdata(that.id,
{
type: 'callCardService',
fn: 'setVolume',
arg1: that.num
}
).then(function (res) {
if (res.result) {
that.$message({
message: '修改成功',
type: 'success'
})
that.dialogVisible = false
}
})
},
getshow () {
this.dialogVisible = true
},
// 获取音量
getData () {
var that = this
getdata(that.id, {
type: 'callCardService',
fn: 'getVolume'
}).then(function (res) {
that.num = res.result
})
},
}
}
</script>
<style lang="scss" scoped>
.Volume {
display: inline-block;
}
</style>