2020年05月_前端杨小白

原创 VUE指定的页面缓存

src\router\index.js{ path: '/Home', component:Home, meta: { keepAlive: true }},src\App.vue<template> <div id="app" v-title data-title="作战仿真平台"> <keep-alive> <router-view v-if="$route.meta.keepAlive">

2020-05-29 16:17:01 756

v-dialogDrag: 实现可拖拽弹出层src\Utils\directives.jsimport Vue from 'vue'; Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-di.

2020-05-27 19:29:25 1442 1

原创 Ceisum实时获取后台数据实时更新实体位置信息

var viewer = new Cesium.Viewer('cesiumContainer', { infoBox : false, selectionIndicator : false, shadows : true, shouldAnimate : true});var positions = [];var poly = undefined;var entityArr=[];var PolyLinePrimitive = (function(){ .

2020-05-27 19:04:25 6605 1

原创 Cesium鼠标移出地图控件时执行相应操作

CESIUM实时获取显示当前坐标信息/** * 实时显示当前坐标信息*/PositionBox() { var entity = viewer.entities.add({ id:'label', label: { show: false, showBackground: true, font: "14px monospace", horizontalOrig.

2020-05-27 18:31:41 593

原创将this下的某个属性方法指到window下方便直接调用

src\main.js将this下的某个属性方法指到window下方便直接调用window.$message = this.$message在VUE文件中或封装的js库中直接调用调用方式如下$message.success(`${this.attrTitle}成功`); 完整代码src\main.jsimport Vue from 'vue'import '@/assets/scss/index.scss'import '@/assets/scss/custom.s.

2020-05-27 15:13:09 413

原创 VUE数据更新滚动条定位在最底部视图展示最新几条数据

<div class="journal" id="text"> <el-row type="flex" justify="space-between" class="m-b-5 m-t-5"> <el-col :span="12"> <h2 class="h2style" @click="timer">日志</h2> </el-col> <el-co.

2020-05-25 11:18:22 1261

原创 vue实现可拖拽可缩放功能

安装vue-draggable-resizable插件npm install --save vue-draggable-resizable全局注册组件main.js中写入：import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable'// 可选择导入默认样式import 'vue-draggable-resizable/dist/VueDraggableResizable.css'Vu.

2020-05-22 16:59:54 2957

原创 CSS实现在竖直方向排列水平方向居中对齐

<div class="hand"> <i class="el-icon-coin"></i><p>测试数据1</p></div> <div class="hand"> <i class="el-icon-copy-document"></i><p>测试数据第2</p></div> <style scoped>.hand{ .

2020-05-22 14:17:15 1088

原创 css让文本英文字符自动换行—word-break

<div class="journalnav"> <div class="m-0 align-left font-12" v-for="(activity, index) in activities" :key="index" > {{activity.content}} <span class="color font-12 align-right">{{activity.timestamp}}</span> .

2020-05-22 14:02:53 347

原创 ElementUI统一修改滚动条样式

src\assets\scss\index.scss::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; -webkit-border-radius: 5px;}::-webkit-scrollbar-thumb:vertical { height.

2020-05-22 10:16:38 3222

原创 VUE好用地址

前端进阶前端扩展前端集锦 JavaScript NodeJs

2020-05-20 16:25:19 226

转载 VUE 爬坑之旅 -- 引入静态资源的正确方式

在 Vue 项目中，静态资源文件有二个位置可以存放，分别为 src 里面的 assets 文件夹和外层的 static 文件夹，从文件夹名字上面就可以大概的看出有何区别。assets ：资产，资源static ：静态的同样都是放资源的位置，为什么会有二个地方，他们之间有什么区别呢？在我原来的项目里面，我都是把各种资源文件放到 assets 里面，这样在打包的时候 webpack 会自动把资源给你压缩，比如把 png 图片压缩成 base64 格式，当时觉得这样好啊，自动压缩资源，减小项目体积，好东

2020-05-18 11:07:04 1574

转载 Nuxt.js中安装使用插件【ElementUI，axios，scss】

安装element-uinpm i element-ui -S创建ElementUI.jsplugins\ElementUI.js【在/plugins文件夹下面，创建 ElementUI.js 文件】import Vue from 'vue'import ElementUI from 'element-ui'Vue.use(ElementUI)在nuxt.config.js中添加配置css: [ 'element-ui/lib/theme-chalk/index.c..

2020-05-15 15:39:25 926

转载 Nuxt.js报错：Classic mode for store/ is deprecated and will be removed in Nuxt 3

将Nuxt.js升级到最新版的2.4.0时，终端提示警告：Classic mode for store/ is deprecated and will be removed in Nuxt在Nuxt.js的源码中，其中有一段代码如下：// If store is an exported method = classic mode (deprecated)if (typeof store === 'function') { const log = (process.server ?

2020-05-15 14:03:05 1495

转载控制台报错：Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

控制台报错：Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`浏览器列表caniuse lite已过时。请运行下一个命令'yarn upgrade`解决方案：1.删除该项目node_modules下面的caniuse-lite和browserslist这两个文件夹2. 运行命令npm i caniuse-lite browserslist...

2020-05-15 11:14:06 31892 1

原创 JavaScript封装检测是否为空(包括空字符串、空格、null,{}，[])

//是否为NULLisNull(value) { if (value == null || typeof (value) == 'undefined' || value === undefined) { return true; } return false;},//是否为空(包括空字符串、空格、null,{})isEmpty(strings){ if (!this.isNull(strings)) { // 先判断是否为null，返回true ，判断是否为空字符串，返回t.

2020-05-14 11:21:44 1266

原创 Cesium绘制矩形

取消双击默认选中实体效果：添加的标注本身有默认事件：左键单击选中标注实体，双击镜头会直接跳转到标注地点。如果不想要这种效果，可以取消默认事件。viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);var activeShapePoints = [];var activeShape;var floatingPoint;//查看

2020-05-13 16:10:12 7318 1

原创 Cesium选择地图范围【绘制矩形坐标转换局部放大】

var activeShapePoints = [];var activeShape;var floatingPoint;//查看器var viewer = new Cesium.Viewer('cesiumContainer', { selectionIndicator: false, infoBox: false, // 注释时相当于使用默认地形，解开注释相当于使用全球地形 terrainProvider: Cesium.createWorldTerrain().

2020-05-13 16:03:04 3320 2

转载 vue动态路由:路由参数改变,视图不更新问题的解决

问题描述：使用vue动态路由（“/route/:id” 形式）传参的时候，修改页面参数，但是视图仍旧是之前的内容，没有进行刷新，示例如下：原因分析：具体原因在vue官方文档：响应路由参数的变化一节中有讲过：当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch.

2020-05-12 17:08:35 1941

原创 JavaScript-对象扁平化:只保留最里层key

2020-05-09 16:12:48 402

转载 JavaScript 递归遍历对象：过滤对象中为null/undefined/''/[]/{}的属性值

// 过滤对象中为null/undefined/''/[]/{}的属性值function clearDeep(obj) { if (!obj || !typeof obj === 'object') return const keys = Object.keys(obj) for (var key of keys) { const val = obj[key] if ( typeof val === 'undefined' || .

2020-05-09 14:01:22 3173

原创 ElementUI 遍历实现checkbox组件的多选全选功能

<template> <div id="situateConfig"> <el-dialog title="显示配置" width="45%" min-height="300px" :visible.sync="situateDialog" :close-on-click-modal="false"> <el-for.

2020-05-09 10:25:36 2561

转载 ElementUI checkbox组件中的indeterminate 状态

<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)对于indeterminate和v-model绑定的a和b的值如果true true 或者 true false样式为-如果false tru...

2020-05-08 14:37:05 3243

yangwq的博客