关于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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
vue地区选择组件教程详解
May 04 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
p5.js临摹动态图形的方法
Oct 23 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
php学习 函数 课件
2008/06/15 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
新手入门常用代码集锦
2007/01/11 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python求质数列表的例子
2019/11/24 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
小学生植树节活动总结
2014/07/04 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
志愿者事迹材料
2014/12/26 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
go语言求任意类型切片的长度操作
2021/04/26 Golang
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python