vue实现录音跟读功能
使用方式script方式直接引入dist下的recorder.js即可let recorder = new Recorder();npm方式关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前...
2024-01-10
vue实现动态按钮功能
Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮具体效果图如下:点击后会变成这样:首先我们需要下载vue.js: https://vuejs.org/js/vue.min.js将网页内的内容全选粘贴至js文件中然后我们先创建一个html文件在body创建一个按钮具体代码如下:<body><d...
2024-01-10vue实现城市列表选择功能
成果展示最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍准备工作： 引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考...
2024-01-10
vue实现购物车（功能最完整）
购物车已经封装成组件， 直接使用即可使用github地址， 记得加星哦废话不多说， 直接贴效果图， 需要源码的直接点击最后面的GitHub地址下载（鼠标移入出现， 移除消失）准备工作， 安装less，当购物里面有订单时效果图（实现了删除， 统计订单数）当没有订单时显示空时效果图（如果效果好还请...
2024-01-10vue实现键盘输入支付密码功能
本文实例为大家分享了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
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-10基于vue.js实现分页查询功能
利用vue.js实现数据库分页，供大家参考，具体内容如下最新项目有一个分页功能，画面风格很简朴给的样图就用【1】表示页码了， 因此，我没有上网上找插件，自己简单的做了一个。作为菜鸟，代码可能有点青涩，请见谅。 除了vue我还引用了Bootstrap的类和图标html<div class="paging"> <ul class="p...
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项目中实现的微信分享功能示例
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下：/* 微信分享 */Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}, re...
2024-01-10
Vue 中登录功能的简单实现
登录表单验证用户名与密码，发送登录请求login() { // 数据验证 this.$refs.loginFormRef.validate(async valid => { // 验证不通过 if (!valid) return // 数据请求 const { data: res } = await this.$https.post('login', this.loginForm) // 登录失败 if (res.meta.status !== 200) return...
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-10vue项目实现github在线预览功能
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目，有点小激动，想把它上传到 github 并展示一下预览效果，结果踩了好多坑，折腾了大半天才弄好。这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github问题1当我们在命令行执行 npm run build 后，项目的目录下...
2024-01-10
原生JS 实现框选功能（Vue）
效果分析该过程，可拆分成两个步骤：鼠标框选一段区域判断框选区域包含的 checkbox，进行对应处理HTML 和 CSS 布局该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute;并且其宽、高、偏移值根据鼠标当前位...
2024-01-10vue实现侧边栏导航效果
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下最终效果点击下一个导航，上一个导航自动收回实现代码1.下载vue-routernpm install vue-router --save-dev2.在main.js中引入import Vue from 'vue'import Router from 'vue-router' Vue.use(Router) // 引入路由3.在components中新建组件3.1 agencySearch.vu...
2024-01-10vue实现跨域的方法分析
本文实例讲述了vue实现跨域的方法。分享给大家供大家参考，具体如下：在请求的资源上没有“访问控制允许源”标头。因此，“http://LoalHoal:8081”是不允许访问的。出现这个报错就说明，浏览器限制了跨域，需要设置跨域一、后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问header('A...
2024-01-10vue实现简单的日历效果
最近在项目中遇到了一个需求，在vue中创建一个组件，这个组件显示的是当前的日期，以及在当前的日需要处理的事项，处理的事项的信息会以后端的接口的形式返回。需求确认后，搭建了一下，在这里记录了一下，现在是简单的实现了这个需求，但是肯定的是后期需要进行修改。vue就不多说了，在v...
2024-01-10使用canvas实现一个vue弹幕组件功能
看B站时，对弹幕的实现产生了兴趣，一开始想到用css3动画去实现，后来感觉这样性能不是很好，查了下资料，发现可以用canvas实现，于是就摸索着写了一个简单的弹幕。弹幕功能支持动态添加弹幕弹幕不重叠自定义弹幕颜色效果图demo 源码地址前端框架选了比较熟悉的vuejs弹幕滚动的基本思...
2024-01-10java web实现简单留言板功能
本文实例为大家分享了java web实现简单留言板的具体代码，供大家参考，具体内容如下一、目标用户可以登录并记住密码进入留言板，添加留言，点击留言列表中的标题可显示该条留言全部内容。二、相关知识1、使用Cookie实现自动登录用户第一次登录网站，服务器将用户名和密码以Cookie的形式发...
2024-01-10亲自动手实现vue日历控件
之前项目中有用到日历控件，当时由于时间问题，是在网上找到一个demo，然后二次开发的，从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理，去除月份天数判断以及是否闰年判断。 设计（以最常用的按月份的日历）日历其实大家都很熟悉，一切的设计都是从功能出发，这是根本。...
2024-01-10基于Vuejs的搜索匹配功能实现方法
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。大概长这个样子：数据都是假的代码部分（注意我引用的是本地vue.min.js文件，请注意文件路径。）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue测试2</title> ...
2024-01-10vue实现提示保存后退出的方法
假设有这样一个需求，用户在一个页面内编辑文字，但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存，是否确认退出？”用户如果点击“确定”，那么不保存当前内容直接退出，用户如果点击“取消”，则取消本次路由跳转，继续留在原来的页...
2024-01-10
vue怎么实现这种点击下载 弹出 可打印可下载
点击表格的点击下载 他会在网页跳转到这里 然后把文件分好页 可下载可打印 这是怎么弄的啊回答：用 window.print() 可以调出浏览器的打印窗口 打印 pdf 链接可以用 iframe这是代码：var src = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'printPdf(...
2024-03-04
vue中怎样实现省市区三级联动？
如图：我这三个下拉框的数据都是单独请求的，唯一的联系就是省的id是市的pid，市的id是去的pid，如下：这是我下拉框的代码<el-form-item label="所在省" prop="province"> <el-select v-model="forms.province" placeho...
2024-02-28
