关于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实现的抽象CSS圆角效果!!
May 03 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
继续学习javascript闭包
Dec 03 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
layui表格数据复选框回显设置方法
Sep 13 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
一套带答案的C++笔试题
2014/01/10 面试题
爱心募捐感谢信
2015/01/22 职场文书
安全生产协议书
2016/03/22 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers