草庐IT

vue-elementul

全部标签

vue 前端实现login页登陆 验证码

实现效果//template用户登陆{{viewCode}}记住密码登录//js//---------分割线data(){return{viewCode:'',loginForm:{account:'',password:'',src:'',code:''},fieldRules:{account:[{required:true,message:'请输入账号',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}]},checked:false,//加载中的标志loading:false}},//--

基于Echarts+Vue3的低代码可视化数据大屏拖拽设计器 vue拖拽设计大屏

产品概述本产品是一款基于Vue3开发的可视化数据大屏拖拽设计器。提供一种简单易用的拖拽式数据可视化大屏设计方案,可帮助用户快速创建和定制自己的数据大屏,通过拖拽组件、调整布局和设置属性,实现数据展示的自由组合和个性化定制。功能特点可视化编辑:通过拖拽组件、调整布局和设置属性,实现数据展示的自由组合和个性化定制。多种组件:提供多种数据展示组件,如Echarts各类图表、表格、文本框、图片、轮播图表格、常见小组件等。灵活布局:绝对布局,支持px、%、vh/vw等单位布局。数据绑定:支持与后台数据接口对接,实现数据的动态展示和更新。编辑器页面基本功能,包括编辑、预览、导出、保存、生成json脚本图层

新购服务器项目部署指南—— Express + Vue + Nginx+ pm2 Nodejs项目部署全流程

目录一、部署Express项目1.1、安装Node1.2、安装pm2进程管理器1.3、部署Express后端项目二、部署Vue前端项目2.1、Nginx的下载安装与SLL配置2.2、打包Vue项目2.3、上传项目到Nginx目录2.4、配置Nginx附录pm2命令速览Nginx命令速览最后书接上回:新购服务器开荒记录(服务器安装宝塔、Nginx、Java、Python、pip、Node、npm)一、部署Express项目1.1、安装Node要部署Express项目,首先要保证服务器已经安装好了Node,可以输入:node--version查看node的版本:如果没有安装node,可以使用宝塔安

基于Java+Vue+uniapp微信小程序在线视频教育系统设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》Python项目实战《100套》感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人​系统介绍:随着信息技术在管理上越来越深入而广

基于Java+Vue+uniapp微信小程序食堂订餐平台设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》Python项目实战《100套》感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人​系统介绍:互联网发展至今,无论是其理论还是技

微信小程序实现页面数据侦听器,类似vue的watch

既然小程序的组件已经有Observer功能,那为什么还要手写watch功能呢?Observer只能在Component中使用,没法在Page中使用。若是想在Page中监控某一数据的变化,Observer做不到。Observer属于小程序的新功能,只能在高版本微信使用,低版本微信无法使用。公司的小程序就因为使用了Observer功能,导致很多低版本微信用户无法使用这个小程序。 HTML代码{{n1}}+{{n2}}={{sum}}页面中监听n1+1页面中监听n2+1新建一个watch.js文件存放监听器的逻辑函数,代码如下:/***设置监听器*/exportfunctionsetWatcher(

【Web_Vue2】Vue中的过滤器(filter)

概念过滤器(filters)是vue为开发者提供的功能,对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)实质不改变原始数据,我们也可以理解其为一个纯函数过滤器Vue.js允许你自定义过滤器,可被用于一些常见的文本格式化过滤器可以用在两个地方:双花括号插值:{{变量|过滤器名}}v-bind表达式(后者从2.1.0+开始支持):v-bind:属性=“变量|过滤器名”注意:Vue3中已移除filter1、过滤器的使用过滤器应该被添加在JavaScript表达式的尾部,由“管道符”|进行调用:!--在双花括号中-->{{message|capitalize}}!--在`v-bind`

【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据

前言这是最近遇到的功能,经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据,修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法,其实也比较简单就是通过角标来判断显示隐藏的点击单元格出现弹框修改数据版本这里考虑到有些时候可能想要点击单元格不只修改一个数据,可能是一个多个数据都需要修改。这时候只能用表单了,所以这里输入框就有限制不好用了。我就又写了个模板,是点击单元格后出现弹框的,内部可以表单修改点击这里跳转效果图代码我这里是用的html的形式,引入了vue的语法使用的各位自行在自己的代码中套用。和vue写法一样然后核心就是注意那个@cell-click=

自适应插件autofit.js使用(这里演示vue项目)

这个插件使用以后,页面会根据浏览器的缩放自适应的改变宽高这里演示的是vue3项目,其他项目也可类似去写1.安装npminstallautofit.js2.使用如果要在整个项目做自适应,将配置配到App.vue,如果只要单个页面自适应,只需要配置当前页面即可App.vue配置如下(单个页面自适应也是如此配置)以下代码三步走script>//1.引入插件importautofitfrom"autofit.js"import{onMounted,onBeforeUnmount}from"vue"import'./assets/icon/iconfont.css'exportdefault{name:

在Vue项目中定义全局变量的几种常用方法

在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。定义全局变量的方法1、使用Vue.prototype定义全局变量通过在vue的原型上定义属性,可以在所有组件中访问该属性。在main.js定义全局变量//main.jsVue.prototype.baseUrl="https://www.example.com/api"在页面中使用{{baseUrl}}在方法中使用created(){console.log(this.baseUrl)},