vue复选功能实现
首先需要用到input里的 checkbox属性选择框vue实现购物车简单的功能-----单选全选总价计算、批量删除等：以下附上全部的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="./v...
2024-01-10
vue实现吸顶
data(){ return{ list:[], swiperOption:"", xiding : "", // 轮播高度 SwiperHeight:'' } }, mounted(){ this.onload() // 获取轮播图图片的高度 setTimeout(()=> { // 通过ref...
2024-01-10
vue实现键盘输入支付密码功能
本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码，供大家参考，具体内容如下支付密码功能界面如下图：主要代码如下：<template> <div class="pay-tool"> <div class="pay-tool-title border-bottom"> <span class="icon icon-back" @click="backHandle"></span><strong>请输入交易密码</strong> </div> <div class="pay-tool-con...
2024-01-10
使用vue实现打印功能时出现多余空白页的问题
在页面上加入代码可根据需求自己调整<style media="printContent" scoped>@page {size: auto; /* auto is the initial value /margin: 3mm; / this affects the margin in the printer settings */}html {background-color: #ffffff;margin: 0px; /* this affects the margin on the html befor...
2024-01-10
Opencv实现画笔功能
本文实例为大家分享了Opencv实现画笔功能的具体代码，供大家参考，具体内容如下#include<iostream>#include<opencv2/opencv.hpp> using namespace std;using namespace cv; Rect g_rectangle;bool g_bDrawing = false;RNG g_rng(12345);Point g_nCurrPoint;int g_nThick = 0, g_nBlue = 255, g_nGreen = 255, g_n...
2024-01-10vue.js实现的幻灯片功能示例
本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考，具体如下：1、在父组件中<slide-show :slides="slides"></slide-show>import SlideShow from '@/components/SlideShow'export default { components: { SlideShow, },2、在slideshow.vue中<template> <div class="slide-show" @mouseover="clearInv" @mo...
2024-01-10vue.js 实现输入框动态添加功能
代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> <div id="app"> <p> {{title}}</p> <p v-if='showSub'> {{subTitle}}</p> <div> ...
2024-01-10
vue实现页面打印自动分页的两种方法
本文实例为大家分享了vue实现页面打印自动分页的具体代码，供大家参考，具体内容如下一、通过ref方式获取元素进行打印1.封装一个js文件// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no...
2024-01-10vue实现2048小游戏功能思路详解
试玩地址项目地址使用方法：git clonenpm inpm run dev实现思路如下：用vue-cli搭建项目，对这个项目可能有点笨重，但是也懒的再搭一个4X4的方格用一个二维数组存放，绑定好后只关心这个二维数组，其他事交给vue监听键盘事件2048的核心部分就是移动合并的算法，因为是一个4X4的矩阵，所以只要实...
2024-01-10使用vue2实现购物车和地址选配功能
首先，vue基础js写法new Vue({ el:"#app", //模型 data:{ }, filters:{ }, mounted:function(){ this.$nextTick(function(){ //初始化调用 }); }, computed:{ //实时计算 }, methods:{ }});v-for<li v-for="(item,index) in productList"> <div class="item-name">{{it...
2024-01-10vue实现抖音时间转盘
本文实例为大家分享了vue实现抖音时间转盘的具体代码，供大家参考，具体内容如下做了一个抖音时间转盘，还挺简单的，可能我做的很粗糙用vue做的 才160行代码。其实很简单 只是大部分人被这个圆给迷惑了这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。然后贴代码。<templat...
2024-01-10vue 实现走马灯效果
Part.1 问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果Part.2 实现我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果Part.3 代码HTML<template> <div class="home"> <div class="home-box"> <div style="background: #fdfbde"> <div class="marquee"> <div class=...
2024-01-10vue组件实践之可搜索下拉框功能
之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。效果图：子组件 DROPDOWN.VUE<template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemlist.cur.name}}</div> <div class="list-and-search" :class="isSho...
2024-01-10
Java Web实现用户登录功能
java web 学习记录一下mvc结构实现mysql 连接什么是mvcMVC是模型（model)、视图（view)、控制（controller）这三个单词上的首字母组成。它是一种应用模型，它的目的是实现Web系统的职能分工。避免all in one 所有代码全部写在一个文件里的一种分工模型。实现简单登录功能登录成功，进入sccess.jsp界面...
2024-01-10
原生JS 实现框选功能（Vue）
效果分析该过程，可拆分成两个步骤：鼠标框选一段区域判断框选区域包含的 checkbox，进行对应处理HTML 和 CSS 布局该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute;并且其宽、高、偏移值根据鼠标当前位...
2024-01-10
vue实现树结构展开行？
vuevue 有什么插件可以满足树结构表格并且点击每一行可以展开显示详细内容，或者有什么方法可以实现吗？回答：https://element.eleme.cn/2.3/#/zh-CN/component/table回答：ant 嵌套子表格可以套娃，试试看回答：推荐你使用vxe-tablehttps://vxetable.cn/v4/#/table/tree/radio回答：看下这两个库有没...
2024-02-22
vue实现登录验证（转）
https://www.cnblogs.com/web-record/p/9876916.htmlhttps://www.jianshu.com/p/ad1ce9658f74在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token...
2024-01-10vue实现简单的日历效果
最近在项目中遇到了一个需求，在vue中创建一个组件，这个组件显示的是当前的日期，以及在当前的日需要处理的事项，处理的事项的信息会以后端的接口的形式返回。需求确认后，搭建了一下，在这里记录了一下，现在是简单的实现了这个需求，但是肯定的是后期需要进行修改。vue就不多说了，在v...
2024-01-10electron + vue项目实现打印小票功能及实现代码
一 需求：公司项目需要通过electron调用系统打印机，实现打印小票的功能。二、分析：electron打印大概有两种：第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。第二种：使用页面的webview元素调用打印，可以将webview隐藏在...
2024-01-10
基于js或vue项目实现一次批量文件下载功能
页面效果下面这个是我的项目截图效果代码<button @click="bulkDownload()">批量下载</button>js截图代码js代码，想用的直接复制下面代码就可以export const downloadFile = (url) => { const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height = 0; //...
2024-01-10Vue2.0 实现移动端图片上传功能
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。效果图如下： 1.DOM代码1.1input标签 由于我们是通过input标签的方式进行图片上传的，但是input标签的样式有点丑，所以我们隐藏该样式display: none<input @change="fileChange($event)" type="file" id="up...
2024-01-10基于Vuejs的搜索匹配功能实现方法
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。大概长这个样子：数据都是假的代码部分（注意我引用的是本地vue.min.js文件，请注意文件路径。）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue测试2</title> ...
2024-01-10vue 实现搜索的结果页面支持全选与取消全选功能
演示地址，打开、搜索、随便点http://msisliao.github.io/dem...npm i element-ui -S// main.jsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)demo功能概览默认没有全选，搜索时支持全选与取消全选，将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态...
2024-01-10vue实现提示保存后退出的方法
假设有这样一个需求，用户在一个页面内编辑文字，但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存，是否确认退出？”用户如果点击“确定”，那么不保存当前内容直接退出，用户如果点击“取消”，则取消本次路由跳转，继续留在原来的页...
2024-01-10
实现vue2.0响应式的基本思路
注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。首先，我们先定义好实现vue对象的结构class Vue { c...
2024-01-10
