![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
小小并不小
前端-刘龙蛟
展开
-
vue + vscode 插件
这里写自定义目录标题欢迎使用Markdown编辑器完整的settin.json配置文件,如下欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。1.Chinese (Simplified) Language Pack for Visual Studio Code(汉化)2.Bracket Pair Colorizer(给代码中的括号添加亮色)3.A原创 2022-04-07 10:58:07 · 2845 阅读 · 0 评论 -
VueTreeselect el-tree-select 多选
1、VueTreeselect是一个多选组件npm install --save @riophae/vue-treeselect全部代码<!-- Vue SFC --><template> <div id="app"> <treeselect v-model="value" :multiple="true" :options="options" /> </div></template><..原创 2021-03-18 13:55:33 · 5431 阅读 · 1 评论 -
vue+element 二次分装Table
1、src\components\Table\index.vue<!-- * @Description: render函数封装table * @Author: 刘龙蛟 * @Email: 88420413@cnsuning.com * @Date: 2019-10-24 09:45:04 * @LastEditTime: 2021-03-18 09:58:15 * @LastEditors: Dragon --><template> <div cla原创 2021-03-18 10:41:40 · 297 阅读 · 0 评论 -
javascript vue 常用正则记录
1、用户名正则//用户名正则,4到16位(字母,数字,下划线,减号)var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//输出 trueconsole.log(uPattern.test("iFat3"));2、密码强度正则//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&.原创 2021-03-18 09:43:55 · 194 阅读 · 0 评论 -
vue element 封装通用分页组件
1、\src\components\Pagination\index.vue<!-- * @Description: 分页 * @Author: Dragon * @Date: 2021-03-09 13:32:37 * @LastEditTime: 2021-03-16 15:25:42 * @LastEditors: Dragon--><template> <div :class="{'hidden':hidden}" class="pagina原创 2021-03-17 16:53:35 · 560 阅读 · 0 评论 -
vue + element 假分页
this.listQuery.data.page// 当前页this.listQuery.data.pagesize// 每页展示多少条this.dataList // 需要展示的数据letstart=(this.listQuery.data.page-1)*this.listQuery.data.pagesize // 数组截取开始位置letend=(this.listQuery.data.page-1)*this.listQuery.data.pa...原创 2021-03-17 16:44:15 · 213 阅读 · 0 评论 -
前端代码统计行数(工具cloc)用法
地址1、首先下载包https://github.com/AlDanial/cloc.git2、安装npm install -g cloc # https://www.npmjs.com/package/cloc3、检测哪个文件就cd到哪个文件里原创 2021-01-25 13:43:37 · 1260 阅读 · 0 评论 -
vue2.x和vue3.x 自定义指令对比
以阻止连续点击为例1、全局main.jsimport { createApp } from 'vue'... 省略代码const app = createApp({});app.directive('preventContinuityClick', { mounted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) {原创 2021-01-22 14:45:10 · 429 阅读 · 0 评论 -
vue3.x element-plus 表单遇到ref响应式丢失了的问题
现在具体什么原理还没理清楚,只知道不可以重名就可以解决响应式丢失了的问题原创 2021-01-06 10:08:01 · 2077 阅读 · 11 评论 -
vue-baidu-map添加覆盖物-点
vue-baidu-map 简单f封装了components/index.vue引用vue插槽 方便使用,也可直接插入 <slot></slot><!-- * @Description: 百度地图组件 * @Author: Dragon * @Date: 2020-12-31 13:18:38 * @LastEditTime: 2020-12-31 16:19:24 * @LastEditors: Dragon--><templat.原创 2020-12-31 16:44:14 · 2018 阅读 · 2 评论 -
vue+openlayers 自定义底图运动轨迹回放
<!-- * @Description: 轨迹回放 * @Author: Dragon * @Email: 153284575@qq.com * @Date: 2020-11-20 22:05:31 * @LastEditTime: 2020-12-29 10:08:46 * @LastEditors: Dragon--><template> <div class="base-tracks"> <div class="query-wra原创 2020-12-29 10:19:21 · 2114 阅读 · 11 评论 -
Vue + Openlayers 绘制多边形(Polygon)查询区域内的人数(Feature)
完整代码<!-- * @Description: 绘制图形统计圈内点数 * @Author: Dragon * @Date: 2020-12-21 13:19:47 * @LastEditTime: 2020-12-21 13:56:04 * @LastEditors: Dragon--><template> <div> <div class="query-wrap"> <el-button type="p原创 2020-12-21 14:45:09 · 2539 阅读 · 8 评论 -
前端开发 - 数组相关
三)数组相关1)数组的方法:1.push()从后面添加元素,返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]2.pop()从后面删除元素,只能是一个,返回值是删除的元素let arr = [1,2,3,4,5]con...转载 2019-12-23 15:56:48 · 209 阅读 · 0 评论 -
Vue + Openlayers - Overlay hover展示覆盖物
1、组件import{Overlay}from"ol";2、html => <divid="popup"/>3、 style =>#popup{width:200px;padding:020px;border-radius:5px;z-index:1;opacity:1;position:absolute;bottom:0;left:...原创 2020-12-21 11:09:58 · 832 阅读 · 8 评论 -
vue create demo cli3 拉取的脚手架 + element-plus安装
Node 版本要求Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n,nvm或nvm-windows在同一台电脑中管理多个 Node 版本。1、安装3.X版本的Vue脚手架:npm install -g @vue/cli ,查看版本vue -V2、基于3.X版本的脚手架创建Vue项目:vue create my-demo3、运行 cd my-demo , npm run serve官网地址:https://cli.vuejs...原创 2020-12-21 10:34:32 · 1737 阅读 · 0 评论 -
Vue + Openlayers 展示实时坐标点
直接上代码<!-- * @Description: 实时坐标点 * @Author: Dragon * @Date: 2020-12-18 10:08:40 * @LastEditTime: 2020-12-18 15:59:29 * @LastEditors: Dragon--><template> <div id="map"></div></template> <script>import "ol.原创 2020-12-18 16:59:00 · 1465 阅读 · 4 评论 -
openlayers开始、openlayers官网示例的本地运行、vue修改openlayers的示例
官网地址地址:https://openlayers.org/示例:https://openlayers.org/en/latest/examples/#API:https://openlayers.org/en/latest/apidoc/一、openlayers开始初始化页面,您将需要三件事:引入css和js <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers....原创 2020-12-17 11:10:57 · 1335 阅读 · 1 评论 -
vuex存储数据,刷新页面阻止数据丢失(插件vuex-persistedstate)登录的基本配置
npm/cnpm install --save vuex-persistedstate1、vuex - index.jsimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters'import persistedState from 'vuex-persistedstate'Vue.use(Vuex)const modulesFiles = require.context('./module...原创 2020-12-03 16:39:23 · 362 阅读 · 0 评论 -
Vue + Openlayers 绘制多边形及展示
<template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/tracing.html" target="_bank">Openlayers多边形</a> </h3> <el-row :gutter="10"> <el-col :span="5"&g.原创 2020-06-30 15:46:02 · 3483 阅读 · 1 评论 -
Vue + Openlayers 自定义轨迹动画
<template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >OpenlayersTrack</a> <!--js 轨迹回放 http原创 2020-06-30 14:31:18 · 3503 阅读 · 7 评论 -
vue-baidu-map 多边形 区域
<template> <div class="map-warp"> <h3> <a href="https://dafrok.github.io/vue-baidu-map/#/zh/start/installation" target="_bank">百度地图</a> </h3> <el-row :gutter="20" style="padding: 20px 0原创 2020-05-27 17:13:26 · 2384 阅读 · 10 评论 -
Vue + Openlayers加载静态底图
<template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/" target="_bank">openlayers拖拽</a> </h3> <div id="map" ref="rootmap"></div> </div></tem原创 2020-05-14 15:13:41 · 2215 阅读 · 5 评论 -
Vue cli3 + vue-baidu-map 百度地图学习笔记
1、创建项目npm create bai-du-map2、启动项目cd bai-du-mapnpm run serve3、安装百度地图npm install vue-baidu-map --save全局注册main.js import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, {...原创 2020-04-24 13:03:49 · 1850 阅读 · 3 评论 -
Vue SessionStorage传值
1、创建storage.js 封装下方法exportconstsetSessionStorage=(k,v)=>{ // 设置if(!k||!v)returnvarjson=JSON.stringify(v)sessionStorage.setItem(k,json)}exportconstgetSessionSt...原创 2019-12-26 12:14:23 · 1180 阅读 · 0 评论 -
Vue 状态集中管理vuex
1、store ==>index.jsimportVuefrom'vue'importVuexfrom'vuex'importtypesfrom'./types' ////mutations的函数名放在这个文件里importtaskManagefrom'./modules/taskManage'Vue.use(Vuex);e...原创 2019-12-25 16:40:49 · 236 阅读 · 0 评论 -
Vue 兄弟之间可通过eventbus通信
第一步创建 ==》eventBus.jsimportVuefrom'vue';exportdefaultnewVue();第二步创建父组件 ==》Fathter.vueimportEventBusfrom'./eventBus'exportdefault{provide (){ // 父组件return{...原创 2019-12-25 15:48:25 · 112 阅读 · 0 评论 -
Vue 组件之间的通信
1、父传子props父组件 ==》<Children:dataInfo="dataInfo" />子组件普通 ==》props: ["dataInfo"]严谨给默认值 ==》props: {dataInfo: { type: Object, default: () => {}}动态传值 wacth监听 ==》在子组件中用w...原创 2019-12-25 15:27:54 · 98 阅读 · 0 评论 -
Vue +element DatePicker 日期选择器区域限制设置
带快捷选项原创 2019-11-13 15:08:55 · 462 阅读 · 0 评论 -
WEB前端判断页面是首次加载还是刷新
首次加载是name为空或其他,这是给设定个isReload。刷新页面这时候name ,为isReloadhandleIsRefresh() {if(window.name == “”){console.log(“首次被加载”);window.name = “isReload”;}else if(window.name == “isReload”){console.log(“页面被刷新...原创 2019-10-30 15:23:05 · 1119 阅读 · 0 评论 -
Vue3 + element-ui + axios + sessionStorage 搭建简单的登录接口调用
1、安装Vue3.xnpm install -g @vue/cli # OR yarn global add @vue/cli2、npm install axios --save3、npm i element-ui -SLogin/index.vue<template><divclass="login"><divclass...原创 2019-09-26 19:56:40 · 1898 阅读 · 0 评论