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


Posted in Javascript onSeptember 09, 2020

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

label {
 font-size: 25px;
 cursor: pointer;
 position: absolute;
 top: -10px;
 right: 0px;
 z-index: 150;
}
 
label i {
 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: -2px 2px 1px 0px;
 border: #53c7f0 1px solid;
}
 
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显示出来

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

<div class="t-recommed-r" v-for="(item,index) in list" :key="index">
  <p><span></span> {{ item.name }} <span></span></p>
  <ul>
   <li v-for="(val,key) in item.data" :key="key" @click="checkTab(val.id)">
   <label v-for="(v, k) in checkedList" :key="k" v-show="val.id === v">
    <input type="checkbox" :checked="val.id === v">
    <i>✓</i>
   </label>
   <a><img src="@/assets/images/null.png"><em>{{ val.name }}</em></a>
   </li>
  </ul>
  </div>

最后一步,js部分

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

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

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

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

contentTxt: "",

dialogFormVisible: false,

<el-dialog :visible.sync="dialogFormVisible">
 <div ref="print" v-html="contentTxt">
 {{contentTxt}}
 </div>
 <div slot="footer" class="dialog-footer">
 <el-button type="primary" @click="printData()">打印</el-button>
 </div>
</el-dialog>

然后进行打印

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

说明:

vue框架使用是element

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

在main.js中进行注册

import Print from '@/plugs/print'

Vue.use(Print);

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

Javascript 相关文章推荐
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue组件间通信解析
Mar 01 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 #Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
You might like
一个查看session内容的函数
2006/10/09 PHP
main.php
2006/12/09 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
ES6的新特性概览
2016/03/10 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
初中毕业典礼演讲稿
2014/09/09 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
自主招生专家推荐信
2015/03/26 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL