cube-ui框架文档网址：https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet

首先展示页面效果：

               

编辑的时候会获取到你长按的列表的课程名称

下面就是代码：

<template>
	<div>
		<template v-for="(item,index) in list">			
			<div class="row" :class="{ active : index == currentIndex}" @touchstart.prevent="start(index)" @touchend.prevent="test">
				<img src="../../assets/class.png" alt="" class="course">
				<div class="left">{{item.coursename}}</div>
				<div class="right">{{item.updatetime}}</div>
			</div>
		</template>
	</div>

</template>

<script>
	export default {
		data: function() {
			return {
				currentIndex: -1,
				index: -1,
				list: [],
			}
		},
		mounted() {
			let token = sessionStorage.getItem('token')
			this.$request({
				method: 'post',
				url: '/schoolmanager.course/index',
				data: {
					token
				}
			}).then(res => {
//因为后台传过来的时间是年月日时分秒，所以我在前台就对时间做了处理，用map方法对传过来的数据进行遍历，修改数据中包含的时间
				this.list = res.message.map(item=>{
					item['updatetime']=this.$formatYmd(item['updatetime'])
					return item					
				})
			}).catch(res => {})
		},
		methods: {
			start: function(index) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {					
					this.showActive()
					console.log(index)
				}, 800)
				this.currentIndex = index
				this.index = index
			},
			test: function() {
				clearTimeout(this.timer)
				this.currentIndex = -1
				console.log('touchend')
			},
			showActive() {
				this.$createActionSheet({
					title: '操作提示',
					active: 0,
					data: [{
							content: '编辑'
						},
						{
							content: '删除'
						},
					],
					onSelect: (item, index) => {
						console.log(index)
						if (index == 0) {
							//编辑
							this.edit(this.index)
						} else if (index == 1) {
							//删除
							this.del(this.index)
						}
					},
				}).show()
			},
			edit: function(index) {
				this.dialog = this.$createDialog({
					type: 'prompt',
					title: '编辑课程名称',
					prompt: {
						value: this.list[index].coursename,
						placeholder: '请输入课程名称'
					},
					onConfirm: (e, promptValue) => {
						//班级名称
						let coursename = promptValue						
						let courseid=this.list[index].courseid
						let token = sessionStorage.getItem('token')
						let data = {
							token: token,
							coursename: coursename,
							courseid:courseid
						}
						this.$request({
							method: 'post',
							url: '/schoolmanager.course/edit',
							data: data
						}).then(res => {
							if (res.error == true) {
								this.$createToast({
									type: 'error',
									txt: res.message,
									time: 1000,
								}).show()
							} else {
								this.$createToast({
									type: 'correct',
									txt: res.message,
									time: 1000,
									onTimeout: () => {
										// res.message['updatetime']=this.$formatYmd(res.message['updatetime'])
										this.list[index].coursename = promptValue
									}
								}).show()
							}
						}).catch(res => {})
					}
				}).show()
			},
			del: function(index) {
				console.log(index)
				let coursename = this.list[index].coursename
				this.$createDialog({
					type: 'confirm',
					icon: 'cubeic-alert',
					content: '是否删除' + coursename,
					confirmBtn: {
						text: '确定',
						active: true,
						disabled: false,
						href: 'javascript:;'
					},
					cancelBtn: {
						text: '取消',
						active: false,
						disabled: false,
						href: 'javascript:;'
					},
					onConfirm: () => {
						let courseid = this.list[index].courseid
						let token = sessionStorage.getItem('token')
						let data = {
							token: token,
							courseid: courseid
						}
						this.$request({
							method: 'post',
							url: '/schoolmanager.course/delete',
							data: data
						}).then(res => {
							if (res.error == true) {
								this.$createToast({
									type: 'error',
									txt: res.message,
									time: 1000,
								}).show()
							} else {
								this.$createToast({
									type: 'correct',
									txt: res.message,
									time: 1000,
									onTimeout: () => {
										this.list.splice(index, 1)
									}
								}).show()
							}
						}).catch(res => {})
					}
				}).show()
			}
		}
	}
</script>

<style scoped>
	.row {
		box-sizing: border-box;
		padding: 15px 20px 15px 0px;
		display: flex;
		justify-content: space-between;
		position: relative;
		line-height: 25px;
	}

	.row::after {
		display: block;
		content: '';
		position: absolute;
		width: 100%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #ebebeb;
		-webkit-transform-origin: 0 bottom;
		transform-origin: 0 bottom;
		transform: scaleY(0.5);
	}

	.left {
		text-align: left;
		flex-grow: 0;
		padding-left: 10px;
		
	}

	.right {
		flex-grow: 1;
		text-align: right;
		color: gray;
	}

	.active {
		background-color: #ccc;
	}
	.btn{
		margin-top: 20px;
	}
	.course{
		width: 25px;
		height: 25px;
	}
</style>

 

其中用到的组件都是cube-ui框架中的，想具体了解的，请去cube-ui框架文档中了解

我的前台代码中用res.error进行判断操作是否成功了，因为我的后台操作成功会返回error为false,操作失败会返回error为true,用一个标志来区分操作的成功与否

还有处理时间的那个$formatYmd,是封装了一个common.js

common.js代码：

//转换成年月日
//str: 2020-05-26  15:30:56
const formatYmd=function(str){
	let date = new Date(str)
	let year = date.getFullYear() 
	let month = date.getMonth() + 1
	let day = date.getDate()
	
	return [year,month,day].join('-')
}

export {
	formatYmd
	}

 

再在main.js中进行引用，这样就可以使用了，

import {formatYmd} from './common.js'
Vue.prototype.$formatYmd = formatYmd 

 

还有就是vue代码中，我所用的方法，是封装了一个request.js，这个js中的具体内容，请去看我的另一篇博客（分组后对数据进行归档和删除），在这个博客里面有具体内容及如何使用。