如何在原有基础上加入点击按钮试听音频功能
<template>
<div>
<!-- 面包屑导航 -->
<Breadcrumb></Breadcrumb>
<!-- 1. 产品搜索 -->
<!--
el-form 表单
:inline="true" 设置 inline 属性可以让表单域变为行内的表单域
:model="formInline" 表单数据对象 object
el-form-item 表单控件 每一项内容
label 标签文本 string
el-input 表单输入框
el-date-picker 日期组件
-->
<div class="header">
<div class="form">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="产品名称">
<el-input v-model="formInline.name" @blur="blur" size="small" placeholder="产品名称"></el-input>
</el-form-item>
<el-form-item label="添加时间">
<el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" size="small">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="group">
<el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button>
<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteAll">批量删除</el-button>
</div>
</div>
<!-- 2. 产品列表 -->
<!--
el-table 表格组件
:data="tableData" 注入data对象数组 [{},{}]
stripe属性可以创建带斑马纹的表格
border 边框
el-table-column 表格列
prop="date" prop属性来对应对象中的键名即可填入数据
label="日期" label属性来定义表格的列名
width属性来定义列宽
event：
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
-->
<div class="content">
<el-table :data="tableData" style="width: 100%;" border header-cell-class-name="active-header"
cell-class-name="table-center" @select="selectHandle" @select-all="selectHandle">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="id" label="商品编号" width="120">
</el-table-column>
<el-table-column prop="title" label="商品名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">
<span style="color:blue;cursor: pointer;" @click="handleLook(scope.$index, scope.row)">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column prop="category" label="商品类目" width="120">
</el-table-column>
<el-table-column label="添加时间">
<template slot-scope="scope">
<span>{{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</el-table-column>
<el-table-column label="商品描述" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ removeHTMLTag(scope.row.descs) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
<el-table-column label="试听" width="200">
<template slot-scope="scope">
<el-button size="mini" type="success" @click="handleListen(scope.$index, scope.row)"
icon="el-icon-edit">试听</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="pagination">
<Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>
</div>
</div>
</div>
</template>
<script>
import Pagination from '@/components/pagination/Pagination.vue'
import moment from 'moment'
import { removeHTMLTag } from '@/utils/common.js'
import {mapMutations} from 'vuex'
export default {
components: {
Pagination
},
data() {
return {
formInline: {
name: '',
date: ''
},
tableData: [],
total: 10,
pageSize: 1,
current: 1,//
ids: [],//存储选中的id
}
},
methods: {
moment,//注册方法
removeHTMLTag,
...mapMutations('product',['changeRowData','changeTitle']),
//批量删除-------------------------------------
deleteAll() {
console.log('批量删除---ids---', this.ids);
//传递的ids必须是字符串
let idStr = this.ids.join(',')
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//请求批量删除接口
this.$api.batchDelete({ ids: idStr })
.then(res => {
console.log('批量删除-------', res.data);
if (res.data.status === 200) {
//删除成功
this.$message({
type: 'success',
message: '删除成功!'
});
//------批量删除-----------------------
//获取当前是否是最后一页的数据操作-----------
//获取当前的数据可以展示多少页码 16/8=2 17/8=3 --- 最大的页码数
let maxPage = Math.ceil(this.total/this.pageSize);
console.log('最大的页码数--',maxPage);
//获取选中的个数---
let len = this.ids.length;
console.log('选中的个数--- ',len);
//分析：批量删除的时候 删的位置最后一页的数据 再去比较删除的个数与最后一页的条数比较
//删除个数==最后一页的条数 选中高亮的页码-1 请求页码数据也就是高亮页码
if(maxPage == this.current){//最后一页的批量删除操作
//最后一页的数据条数---------------
let num = this.total%this.pageSize ==0?this.pageSize:this.total%this.pageSize;
console.log('最后一页的数据条数---',num);
if(num===len){
this.current = this.current-1 >0?this.current-1:1;
}
}
this.projectList(this.current)
//提示信息-------------
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//点击勾选选择框------选中id------------------------
selectHandle(selection) {
console.log('selection---', selection);
let arr = []
selection.forEach(ele => {
arr.push(ele.id)
});
this.ids = arr;
},
//点击添加跳转界面---------------11111111111111111
toProductPage() {
console.log('添加跳转界面-----');
this.changeTitle('添加')
this.$router.push('/product/add-product')
},
onSubmit() {
console.log('submit!', this.formInline.name);
this.search(this.formInline.name)
},
//查看商品详情操作---------------------------
handleLook(index, row){
this.changeRowData(row)
this.changeTitle('详情')
//跳转编辑界面------------------
this.$router.push('/product/add-product')
},
//编辑操作------------------------------------------
handleEdit(index, row) {
console.log(index, row);
//存储当前行的数据--vuex---跳转到另外一个界面--获取vuex行数据
this.changeRowData(row)
this.changeTitle('编辑')
//跳转编辑界面------------------
this.$router.push('/product/add-product')
},
//删除操作--------------------------------------------
handleDelete(index, row) {
console.log('删除操作---', index, row);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//删除这个数据---请求后台接口----同步数据库-----------------
this.deleteItemById(row.id)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//分页传过来的页码------------------------------------
CurrentChange(val) {
console.log('--val--页码', val);
this.current = val;
this.projectList(val)
},
//失去焦点-------------------------------------------
blur() {
if (!this.formInline.name) {
this.projectList(1)
}
},
//获取产品列表数据-------------------------------------
async projectList(page) {
let res = await this.$api.projectList({ page })
console.log('产品列表数据----', res.data);
this.tableData = res.data.data;
this.total = res.data.total
this.pageSize = res.data.pageSize;
},
//搜索接口-----------------------------------------
async search(search) {
if (!search) {//点击空的查询按钮
return;
}
let res = await this.$api.search({ search })
console.log('搜索数据--', res.data);
if (res.data.status === 200) {//有数据
this.tableData = res.data.result;
//分页处理
this.total = res.data.result.length;
this.pageSize = res.data.result.length;
} else {//查无数据
this.tableData = []
this.total = 1;
this.pageSize = 1
}
},
//删除接接口---------------------------------------
async deleteItemById(id) {
let res = await this.$api.deleteItemById({ id })
console.log('删除----', res.data);
if (res.data.status === 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
//重新渲染视图-----------------------------
//删除视图---如果当前是最后一页的最后一条数据-删除后--获取上一页的数据
//判断 this.total总数目
if (this.total % this.pageSize === 1) {
this.current = this.current - 1 > 0 ? this.current - 1 : 1;//最好>1
}
this.projectList(this.current)
}
}
},
created() {
this.projectList(1);
console.log('获取当前的时间', new Date(), moment().format('YYYY-MM-DD hh:mm:ss'));
}
}
</script>
<style lang="less" scoped>
.header {
background: #fff;
margin-bottom: 20px;
padding: 10px;
.el-form-item {
margin-bottom: 16px;
}
.group {
border: 1px solid #eee;
padding: 8px;
}
}
.content {
background: #fff;
/deep/ .active-header {
color: #333;
text-align: center;
}
/deep/ .table-center {
text-align: center;
}
.pagination {
padding: 10px;
}
}
</style>
要在原有基础上加入点击按钮试听音频功能，可以使用HTML和JavaScript来实现。
首先，在HTML中添加一个按钮和一个音频元素，如下所示：
<button id="playButton">试听音频</button>
<audio id="audioPlayer" src="audio.mp3"></audio>
然后，在JavaScript中获取按钮和音频元素的引用，并添加事件处理程序，如下所示：
var playButton = document.getElementById("playButton");
var audioPlayer = document.getElementById("audioPlayer");
playButton.addEventListener("click", function() {
if(audioPlayer.paused) {
audioPlayer.play();
playButton.innerHTML = "暂停";
} else {
audioPlayer.pause();
playButton.innerHTML = "试听音频";
}
});
在这个代码中，我们使用addEventListener函数为按钮的click事件添加了一个匿名函数作为事件处理程序。当按钮被点击时，该函数会检查音频元素的paused属性来判断音频是否在播放。如果音频是暂停的，它将播放音频，并将按钮的文本改为"暂停"；如果音频正在播放，它将暂停音频，并将按钮的文本改为"试听音频"。
此外，在HTML中的audio元素的src属性中指定音频文件的URL。在这个例子中，我们假设音频文件名为audio.mp3。
这样，当用户点击按钮时，就可以试听音频了。按钮的文本会根据音频的播放状态进行更新。
1. 原理
图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
2. 实现
思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。
图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现
<img src="loading.gif" data-src="1.jpg" alt="">
<img src="loading.gif" data-src="2.jpg" alt="">
<img src="loading.gif" data-src="3.jpg" alt="">
<img src="loading.gif" data-src="4.jpg" alt="">
<img src="loading.gif" data-src="5.jpg" alt="">
<img src="loading.gif" data-src="6.jpg" alt="">
<img src="loading.gif" data-src="7.jpg" alt="">
<img src="loading.gif" data-src="8.jpg" alt="">
<img src="loading.gif" data-src="9.jpg" alt="">
<img src="loading.gif" data-src="10.jpg" alt="">
......
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
width: 100%;
height: auto;
}
let img = document.getElementsByTagName('img');
let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload();
window.addEventListener('scroll',lazyload);
function lazyload(){ //监听页面滚动事件
var seeHeight = window.innerHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n; i < img.length; i++){
if(img[i].offsetTop < seeHeight + scrollTop){
if(img[i].getAttribute("src") == 'loading.gif'){
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
图片懒加载也可以结合节流和防抖函数进行使用，优化页面。下次就来介绍一下节流和防抖如何实现！
可以使用HTML5的
具体实现步骤如下：
<audio src="audio_file.mp3" id="myAudio"></audio>
#audioPlayer {
width: 300px;
height: 50px;
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
overflow: hidden;
}
#audioPlayer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(play.png);
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
transition: transform 0.3s ease;
}
#audioPlayer.paused::before {
transform: scale(1.2);
}
#audioPlayer::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #f00;
z-index: -1;
transition: width 0.1s linear;
}
#audioPlayer.playing::after {
width: 100%;
}
以上是一个简单的CSS样式示例，可自由调整以实现自己想要的效果。
const audio = document.querySelector("#myAudio");
const playBtn = document.querySelector("#playBtn");
playBtn.addEventListener("click", () => {
if (audio.paused) {
audio.play();
playBtn.classList.add("playing");
playBtn.classList.remove("paused");
} else {
audio.pause();
playBtn.classList.add("paused");
playBtn.classList.remove("playing");
}
});
audio.addEventListener("ended", () => {
playBtn.classList.remove("playing");
playBtn.classList.add("paused");
});
以上示例为一个简单的控制播放和暂停的JavaScript代码，还可以根据需要添加进度条、音量控制等功能，具体可以参考相关文档和教程。