关于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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
js 调整select 位置的函数
Feb 21 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
Bootstrap响应式表格详解
May 23 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
原生JS实现无缝轮播图片
Jun 24 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与SQL语句常用大全
2016/12/10 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
javascript工具库代码
2012/03/29 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
vue router demo详解
2017/10/13 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python的词法分析与语法分析
2013/05/18 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python日期相关操作实例小结
2019/06/24 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
秘书岗位职责
2013/11/18 职场文书
办公室岗位职责
2014/02/12 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
警察群众路线整改措施
2014/09/26 职场文书
给老婆的道歉信
2015/01/20 职场文书
单位工资证明范本
2015/06/12 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python