关于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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JavaScript设计模型Iterator实例解析
Jan 22 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 curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
浅谈python import引入不同路径下的模块
2017/07/11 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python实现批量命名照片
2020/06/18 Python
Django中使用Celery的方法步骤
2020/12/07 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
2014年组织委员工作总结
2014/12/01 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
培训督导岗位职责
2015/04/10 职场文书
热爱劳动主题班会
2015/08/14 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python