vue.js
vue相关博客
时间的情敌
程序员的自我修养
展开
-
梦想CAD二次开发
mxdraw是一个HTML5 Canvas JavaScript框架,它在THREE.js的基础上扩展开发,为用户提供了一套在前端绘图更为方便,快捷,高效率的解决方案,mxdraw的实质为一个前端二维绘图平台。mxdraw.js依赖canvas标签打开画布,但由于canvas会根据父元素的宽高来自动调整大小,为保证绘制不失真需要固定canvas父级的宽高,且在父元素上设置属性overflow:hidden。MxCAD: MxCAD APP 插件的二次开发项目(用户可在该基础上开发功能)原创 2024-06-28 15:52:23 · 647 阅读 · 0 评论 -
Vue中使用el-transfer渲染接口数据
vue数据渲染原创 2023-02-22 20:48:49 · 908 阅读 · 0 评论 -
Vue中实现JavaScript桌面消息通知
vue中实现浏览器消息通知原创 2022-06-13 18:19:32 · 960 阅读 · 4 评论 -
Vue中不同屏幕分辨率
在app.vue中进行出来:<template> <div id="app" :style="{'transform':`scale(${scalesNum}) translate(-50%,0)`, '-webkit-transform':`scale(${scalesNum}) translate(-50%,0)`, '-moz-transform':`scale(${scalesNum}) translate(-50%,0)`, '-o-tra原创 2022-05-16 14:53:34 · 1015 阅读 · 1 评论 -
Vuex状态持久化—vuex-persistedstate
vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。安装:npm install vuex-persistedstate --save-dev在store文件夹的index.js引入import createPersistedState from 'vuex-persistedstate'初始化vuex 加入插件const store = new Vuex.Store原创 2022-05-16 14:36:50 · 722 阅读 · 0 评论 -
Vue中使用js-web-screen-shot插件实现截屏功能
最近有个需求,要求类似微信、扣扣实现屏幕截屏功能,在此,使用vue插件实现了此功能,记录如下:安装截屏插件:npm install js-web-screen-shot --save页面引入:import ScreenShort from "js-web-screen-shot";调用:<el-button @click="jitT()">截屏</el-button>methods中写入截屏方法:jitT(){ const screenShotH原创 2022-04-28 14:13:31 · 7075 阅读 · 23 评论 -
Vue中使用Wangeditor富文本实现聊天窗口抖动
1、最近项目有个需求,要求实现类似扣扣发送好友窗口抖动功能,在此,整理如下,这里使用的是vue中进行元素抖动方法,具体参考vue中元素抖动组件代码如下:<template> <div> <slot></slot> </div></template><script> export default { props: { // 抖动范围,单位是px, 例如:{x: 4, y: 2,原创 2022-04-20 15:59:03 · 411 阅读 · 0 评论 -
Vue中使用luckyexcel插件开发在线表格编辑
最近项目需求要做一个在线编辑xlsx功能,在此使用了luckyexcel组件来进行开发:vue中使用总结如下1、首先进行引入:注意,引入这块需要进行线上引入,使用npm 安装会出如下错误:vue页面中使用:<template> <div class="excelContent"> <div class="header"> <!-- 本地导入 --> <upload :file-list="fileList" :原创 2022-04-20 10:49:59 · 8524 阅读 · 4 评论 -
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1、最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框。自定义添加菜单功能如下:cnpm i wangeditor --savevue页面中引入:import E from 'wangeditor'methods中写入自定义组件方法:resetEdit() {var that = this;this.editor = new E("#edit");E.registerMenu("fi原创 2022-04-13 16:08:17 · 1805 阅读 · 1 评论 -
WangEdit富文本编辑器图标修改
1、如下图,图标样式在这里直接修改i的class 是可以的 在代码里如何图标呢?代码里直接修改class不行于是查找后得知他的配置里没有配置菜单图标的选项,所以通过配置的方式是行不通了那么可以想办法给他覆盖掉,比如可以重新定义w-e-icon-text-heigh类.w-e-icon-text-heigh:before { content: "\f1dc";}这个有两点需要注意,一是权重要够,二是如果不是他自身就有的字体,那你还需要引入你的字体,并声明字体.w-e-text-he原创 2022-04-08 10:06:12 · 5238 阅读 · 0 评论 -
【Vue.js】vue引入组件报错:该组件未注册?
1、引入组件,报如下错误:vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ischemicHeart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in---> <RiskAssessment> at s原创 2022-04-06 10:36:54 · 2214 阅读 · 0 评论 -
Vue刻度尺组件
1、安装刻度尺组件npm install cs-ruler2、在main.js中全局引入组件import CsRuler from 'cs-ruler'//刻度尺组件Vue.use(CsRuler)3、组件使用<cs-ruler @post-NumValue="rulerNum" :NowNum='100' :maxNum='120' :minNum='60'原创 2022-04-02 15:43:06 · 6454 阅读 · 6 评论 -
如何搭建一个完整的Vue项目?
如何搭建一个完整的Vue项目?文章目录一、安装node环境二、搭建vue项目环境三、开始我们的第一个vue项目总结一、安装node环境1、安装node环境:下载地址:https://nodejs.org/en/2、安装淘宝镜像npm install -g cnpm –registry=https://registry.npm.taobao.org3、检查否安装成功:node -vcnpm -v二、搭建vue项目环境1、使用以下命令全局安装vue-clinpm install -g原创 2022-04-01 21:41:48 · 1367 阅读 · 0 评论 -
Vue中创建组件及引入组件及调用
第一章 Vue中创建组件及引入组件及调用文章目录一、什么是组件?二、如何注册组件?1.注册组件2.vue项目中引入组件总结Vue创建组件`Vue框架最核心思想就是组件化,方便开发,便于维护管理,那么,如何在vue中创建组件及如何引用呢?一、什么是组件?组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。二、如何注册组件?1原创 2022-04-01 21:14:04 · 5081 阅读 · 0 评论 -
Vue安装swiper插件中的坑
1、在vue中安装swiper插件运行时会报错,错误如下npm install --save swiper于是在网上进行查找了一番,竟然是版本问题,因为版本不同 项目目录变了 点开node安装文件夹里也只能看到’swiper/swiper-bundle.css’如果用swiper-bundle.css会有很多问题,比如我遇到的就是分页器不生效这里就需要降低swiper版本了 这里使用的是5.4.5cnpm install vue-awesome-swiper swiper@5.4.5 --sa原创 2022-03-31 08:37:45 · 3437 阅读 · 0 评论 -
Vue中动态渲染echarts数据
1、安装指定版本echartsnpm install echarts@5.3.1 --save2、main.js中全局引入import * as echarts from "echarts"window.echarts = echarts;3、vue页面中引用 <div id="main" class="main_container"></div>4、引入数据接口import { bloodPressureList } from '../../api/healt原创 2022-03-30 21:05:25 · 2953 阅读 · 0 评论 -
Vue框架中如何调用模拟数据?
1、框架结构mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示const Mock = require("mockjs");const { param2Obj } = require("./utils");const user = require("./user");//调用方式const mocks = [...user];function mockXHR() { // mock patch // https://github.co原创 2022-03-30 20:03:42 · 1416 阅读 · 0 评论 -
Cesium-创建Cesium Viewer
任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子)。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。var viewer = new Cesium.Viewer('cesiumContainer');使用以上代码之后,能看到下图所示的基本的数字地球:默认地,场景支持鼠标(电脑)和手指(移动设备)交互。控制相机漫游数字地球可以通过以下方式:Left click and drag - Pa原创 2022-03-23 21:57:02 · 514 阅读 · 1 评论 -
VSCode编辑器中自定义设置好看的背景图
1、首先在扩展程序里找到background插件进行安装:2、打开设置,在搜索框中输入background,选择扩展中的plugin background,选择在setting.json中编辑setting.json内容如下:{ "window.zoomLevel": 1, "workbench.colorTheme": "WeChat Dark", "files.associations": { "*.cjson": "jsonc",原创 2022-03-23 21:28:31 · 2527 阅读 · 0 评论 -
Vue性能优化之Vue3.0 的新特性
vue3新特性:一、使用Proxy替换Object.defineProperty,重构响应式系统,使用Proxy优势:1、可直接监听数组类型的数据变化2、监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升3、可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行4、直接实现对象属性的新增/删除proxy的缺点:1、es6的proxy不支持低版本浏览器(IE11)2、会针对IE11出一个特殊原创 2022-03-23 20:37:21 · 3352 阅读 · 0 评论 -
Vue大屏数据可视化展示组件库DataV介绍
DataV组件组件库基于Vue (React版) ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用:边框带有不同边框的容器装饰用来点缀页面效果,增加视觉效果图表图表组件基于Charts封装,轻量,易用其他飞线图/水位图/轮播表/兼容性组件库的开发和调试都使用Chrome浏览器,所以请使用Chrome浏览器。宽高异常组件的默认宽高都是100%,可以根据父容器宽高进行自适应,但在某些情况下组件宽高可能表现异常,这种情况一般是因为组件的父容器宽高发生了变化,而原创 2022-03-23 20:27:43 · 8208 阅读 · 0 评论 -
Vue+vant实现离线下载
最近项目需求要实现下载功能,离线后也可以进行访问查看,于是做了一个关于离线下载的功能,在次,整理如下:<template> <div> <div class="download_head_tabbar"> <div style="margin-bottom:15px"> <van-nav-bar title="下载"原创 2022-03-21 10:49:51 · 1453 阅读 · 0 评论 -
使用Cesium加载3DTiles并进行调整
3dtiles简介3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流,3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。3D Tiles是目前大火的开源WebGL框架Cesium的御用格式。根据实际体验,3D Tiles和二维地图中的瓦片组织非常相似,在网络中查看3D模型的话,3DTiles的效果还是很不错的,下面我们就来讲一下如何使用vue框架实现cesium加载3dtiles,以及实现对3dtiles的调整组件。cesi原创 2022-03-19 11:53:49 · 7187 阅读 · 0 评论 -
Vue+vant验证密码强弱度
因项目需要验证项目密码强弱度,必须包含大小写,字母,数字,及特殊字符,因此整理了一下,代码如下: <van-field name="oldPassword" v-model="user.oldPassword" label="旧密码" placeholder="请输入旧密码" type="password" minlen原创 2022-03-07 16:37:49 · 1653 阅读 · 0 评论 -
使用天地图API实现导航功能
因项目要求使用天地图开发导航功能,话不多说,直接上代码<template> <div class="lineSearch_box"> <div class="head_box" ref="head_box"> <div class="map_box"> <!-- <div class="map_back_btn"原创 2022-03-07 16:22:44 · 1555 阅读 · 1 评论 -
Vue中使用base64和JSEncrypt对其明文进行加密处理
1、最近项目中要求对其明文传输进行加密处理,在此,整理了一下,这里使用的是base64和jsencrypt对其明文传输进行加密处理,如下在request.js对其所有请求进行加密处理:import axios from 'axios'import { Notification, MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'import原创 2022-03-07 13:56:30 · 785 阅读 · 0 评论 -
Vue项目中用正则表达式截取图片路径
1、最近有个需求,上传图片时,后台会进行对图片压缩处理,生成一个缩略图,前端这边图片展示时显示缩略图路径,代码如下:<div v-if="val.type == '图文'" class="item_center"> <img :src="val.image | getfirstImage" alt=""原创 2021-11-30 15:52:54 · 1450 阅读 · 0 评论 -
Vue项目中引入html5+plus.geolocation进行定位
1、直接上代码<div class="getLocal" @click="getAdress"> <div> <svg t="1637560948776" class="icon" viewBox="0 0 1024 1024" version="1.1"原创 2021-11-29 17:22:15 · 1091 阅读 · 0 评论 -
VUE中常用的几种选项
常用选项 vue有许多配置选项,这节之类出常用的一些选项1、computed计算属性:主要是对原数据进行改造输出。改造输出:包括格式化数据(价格,日期),大小写转换,排序,添加符号computed: { newPrice () { return '¥' + this.price + '元'; }}2、methods方法属性:用于绑定html中的事件对应的方法methods:{ add (num) { this.co...原创 2021-08-10 18:28:22 · 712 阅读 · 0 评论 -
VUE中路由传参的几种方式
路由传递参数 1、通过<router-link> 标签中的to传参基本语法:<router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>PS:上面to前边是带冒号,后边跟的是一个对象形势的字符串name:在路由配置文件中起的name值。叫做命名路由,下一节会讲到。params:要传的参数,它是对象形式,在对象里可以传递多个值。具体实例如下:(1...原创 2021-08-10 18:24:32 · 1597 阅读 · 0 评论 -
vue 创建项目之vue init webpack xxx
初始化项目 1、vue init命令讲解用vue init命令来初始化项目,具体使用方法如下:vue init <template-name> <project-name>init:表示要用vue-cli来初始化项目<template-name>:表示模板名称,vue-cli官方提供的5种模板:webpack:一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。webpack-sim...原创 2021-08-10 18:20:21 · 10852 阅读 · 0 评论 -
ElementUI中Progress进度条样式设置
1、如何将文字与进度条排列在同一行 <span class="span_box"> 图文: <el-progress :format="format" :text-inside="true" :stroke-width="16" :percentage="70"></el-progress></span> <span class="span_box"> 音频: <el-progress :format="format" :text-in.原创 2021-07-15 14:24:52 · 4540 阅读 · 0 评论 -
VUE项目中引入echarts组件
1、安装echarts依赖npm install echarts -S2、全局引入main.jsimport * as echarts from "echarts"Vue.prototype.$echarts = echarts3、页面加载 <div id="main" class="main_container"></div>mounted() { this.initCharts() }, initCharts() { // 初始化e原创 2021-07-15 14:10:58 · 503 阅读 · 0 评论 -
VUE中实现三维地图Cesium加载全国地质管地质地图
1、加载三维地图Cesium,下载Cesium相关文件<div id="cesiumContainer"> <div id="xxx" style="display: none"></div></div>2、引入Cesiumwindow.CESIUM_BASE_URL = "/oil/static/Cesium";import * as Cesium from "cesium";import "cesium/Build/Cesium/W原创 2021-07-09 14:49:21 · 2669 阅读 · 1 评论 -
uniapp和vue的区别
项目需要,最近看了一段时间的uniapp,再次整理了一下uniapp和vue的一些相同之处和不同之处,进行了一个区别对比。1、组件/标签的变化以前是html标签,现在是小程序标签。p 改成 viewspan、font 改成 texta 改成 navigatorimg 改成 imageinput 还在,但type属性改成了confirmtypeform、button、checkbox、radio、label、textarea、canvas、video这些还在。select 改成 picke原创 2021-07-07 16:03:55 · 8465 阅读 · 0 评论 -
webpack打包原理
webpack只是一个打包模块的机制,只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖,来打包你的代码。至于你的代码使用的是commonjs还是amd或者es6的import。webpack都会对其进行分析。来获取代码的依赖。webpack做的就是分析代码。转换代码,编译代码,输出代码。webpack本身是一个node的模块,所以webpack.config.js是以commonjs形式书写的(nod原创 2021-07-06 16:35:11 · 569 阅读 · 0 评论 -
vue2.0与vue3.0区别
vue2.0和vue3.0区别结构部分程序主入口文件 main.jsvue2.0 import Vue from 'vue' import App from './App.vue' import router from "./router" import store from "./store" new Vue({ store, router, render: h => h(App), }).$mou原创 2021-07-06 16:22:49 · 239 阅读 · 0 评论 -
vue自定义组件的几种方式
1.全局组件定义方式示例:Vue.component("hello-component", { props: ["message"], template: "<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>"});使用:<hello-component message="global component"></hello-component原创 2021-07-06 16:03:35 · 8228 阅读 · 0 评论 -
VUE中的父子组件通信
VUE项目中的父子组件之间的传值。首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下,父子组件之间怎么传值。先说一下父组件引入子组件的方法。1、路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系{ path: '/father', name: 'father', component: father,原创 2021-07-06 15:47:57 · 7077 阅读 · 1 评论 -
vue面试题整理
Vue.js面试题整理一、什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象(桥梁)。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此Vie原创 2021-07-06 15:28:24 · 316 阅读 · 0 评论