关于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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
js实现简单五子棋游戏
May 28 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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/03/23 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Javascript 类型转换方法
2010/10/24 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
js定时器实例分享
2016/12/20 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
浅谈python中的占位符
2017/11/09 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
C面试题
2015/10/08 面试题
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers