微客导航 » 文章资讯 » 关于vue的列表图片选中打钩操作

关于vue的列表图片选中打钩操作

2023-07-17 00:19:04 278

首先css,美化checkbox样式,这一段代码拿过去可以直接用

label{
font-size:25px;
cursor:pointer;
position:absolute;
top:-10px;
right:0px;
z-index:150;
}

labeli{
font-size:15px;
font-style:normal;
display:inline-block;
width:18px;
border-radius:15px;
height:18px;
text-align:center;
line-height:18px;
color:#fff;
vertical-align:middle;
margin:-2px2px1px0px;
border:#53c7f01pxsolid;
}

input[type="checkbox"],
input[type="radio"]{
display:none;
outline:none;
}

input[type="radio"]+i{
border-radius:7px;
}

input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i{
background:#fff;
color:#53c7f0;
}

接着是内容部分,这里变量命名比较乱,但是效果都是通过变量控制的,主要思路是点击后,将一个id传入一个临时数组,再遍历这个临时数组,拿数组中的值与当前值对比,如果对比成功,那么就让选中的checkbox显示出来

相对的,如果想要提交,那么只需要将临时数组传进去就好了


{{item.name}}




✓

{{val.name}}

最后一步,js部分

data(){
return{
checkedList:[],
list:[]
}
},
methods:{
checkTab(id){
letindex=this.checkedList.indexOf(id)
if(index===-1){
this.checkedList.push(id)
}else{
this.checkedList.splice(index,1)
}
},
}
//如果存在数组中,那么进行删除操作,如果不存在,则放入数组中

补充知识：vue列表获取勾选的内容并打印

先将勾选的内容通过弹出层显示出来

showPrintData:function(){
varid=this.checkedList[0].id;
axios.post(this.$api.contentGet,{id:id}).then(res=>{
this.contentTxt=res.body.txt;
this.dialogFormVisible=true;
});
},

contentTxt:"",

dialogFormVisible:false,



{{contentTxt}}

打印

然后进行打印

printData:function(){
this.$print(this.$refs.print);
},

说明：

vue框架使用是element

打印使用的插件地址：https://github.com/xyl66/vuePlugs_printjs

在main.js中进行注册

importPrintfrom'@/plugs/print'

Vue.use(Print);

以上这篇关于vue的列表图片选中打钩操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

关于vue的列表图片选中打钩操作

热门推荐

随机推荐