意林_10-CSDN博客

原创 elementUI动态显示el-table里的字段名及对应的字段值

表格配置 <el-table-column v-for="item in lableOptions" :key="item.id" :label="item.key" :prop="item.key" align="center" min-width="120"> <template slot-scope="scope"> <span>{{ scope.row[item.key] }}</span> .

2021-02-04 10:46:53 4048

原创 echarts立体柱状图

<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport resize from './mixins/resize'const anima

2021-01-29 15:13:40 469

原创 element的el-tree中加img

<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNode..

2021-01-29 15:08:36 559

原创 echart柱状图滚动显示

<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport resize from './mixins/resize'const anima

2021-01-29 15:00:20 2399

原创 css实现注水图

<div class="one tip_one" > <div class="rate_box">{{propertystaType=='num' ? inUseCountRate : inUseAreaRate}} %</div> <div class="water_level water_green" :style="{ 'animation-name': inUseCountRate >= 100 ? 'anim_100': (inUseCoun

2021-01-29 14:46:41 538

原创 vue路由拦截router.beforeEach跳转某个具体路径死循环问题

1.代码问题再现：import Router from 'vue-router'const router = new Router({ {path: '/', component: home }, {path: '/login', component: login}, {path: '/error', component: error}, {path: '*', component: error}})router.beforeEach((to, from, next

2021-01-29 11:30:16 1117

原创 elementUI之el-table单独修改头部、行、列，滚动条样式

头部修改使用：header-cell-style行样式修改：row-style列单元格样式修改：cell-style<el-table :data="List" style="width: 100%;background-color: #000823;" max-height="300" :header-cell-style="{background:'#000823',color:'#565F7E',fontSize: '12px', fontWeight: 600, borderColor:

2021-01-28 16:17:16 677

原创 vue开发之导出功能前端

创建request.js公共请求文件import axios from 'axios'import Qs from 'qs'// 设置axios.withCredentials = true;axios.defaults.withCredentials = true;// 或者这样设置axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';axios.defaults.crossD.

2021-01-28 16:02:53 406

原创 vue+elementUI的el-table实现前端分页

<el-table v-loading="loading" :data="tableData.slice((queryParams.pageNum-1)*queryParams.pageSize,queryParams.pageNum*queryParams.pageSize)" @selection-change="handleSelectionChange" max-height="604"></el-table>data() { return { loa

2021-01-28 15:48:27 419 1

原创 vue开发之单点登录

linkChange(to) { this.autoGo('test', 'test') }, autoGo(user, password) { var form = document.createElement('form') form.action = 'http://test:8080/smartbi/vision/index.jsp' form.method = 'POST' form.target = "_blank".

2021-01-28 15:36:31 357

原创 uni-app开发之自定义导航栏

uni-app开发之自定义导航栏插件市场引入自定义导航栏：NavBar 导航栏路由设置“navigationStyle”，pages.json上设置： { "path" : "pages/home/warning/index", "style" : {

2021-01-28 14:45:58 472

原创 uni-app接入阿里图标使用以及图标旋转

uni-app接入阿里图标使用以及图标旋转阿里图标官网创建账号及项目阿里矢量图标库将需要的图标添加到购物车，添加到自己的项目点击“Download Code”下载项目代码上创建icon.css文件，将下载的iconfont.css文件内容复制到icon.css上，修改icon.css设置以下代码注意：链接必须添加“https:”，否则打包成app将无法显示[class^=epsIcon-] { font-family: "epsIcon" !important; fo

2021-01-28 11:54:17 877

原创 uni-app开发之页面通讯

uni-app开发之页面通讯uni.$emit(eventName,OBJECT)触发全局的自定事件。附加参数都会传给监听器回调。uni.$emit('update',{msg:'页面更新'})uni.$on(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数

2021-01-28 11:30:11 149

原创 uni-app开发之Class 与 Style 绑定

uni-app开发之Class 与 Style 绑定class 支持的语法<view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, err

2021-01-28 10:51:36 307

原创 uniapp开发之环境判断

uniapp开发之环境判断1、开发环境和生产环境判断通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。if(process.env.NODE_ENV === 'development'){ console.log('开发环境') }else{ console.log('生产环境') }2、判断平台编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。// #ifdef H5

2021-01-27 16:44:00 4581

原创 uniapp学习开发之路由

uniapp学习开发之路由uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。1、路由跳转两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。navigator组件跳转 <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">

2021-01-27 16:14:49 442

原创 cesium + vue学习之加载和样式化实体

cesium + vue学习之加载和样式化实体Cesium中的所有空间数据都使用Entity API来表示。Entity API以一种有效提供灵活的可视化的方式，以便对Cesium进行渲染。Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象。1.不同entity类型的例子：（1）Polygon ：https://sandcastle.cesium.com/index.html?src=Polygon.html&label=Geometries（2）Polyli

2020-11-26 11:37:04 1404

原创 cesium+vue学习之飞行器实例

cesium+vue学习之飞行器实例创建账户获取令牌：cesium官网注册之后在Access Tokens中获取Default Token样例代码：<template> <div class="cesiumContainer"> <div id="cesiumContainer"></div> </div></template><script>export default { com

2020-11-26 10:41:39 726 1

原创 Cesium+vue学习之环境配置

Cesium+vue学习之环境配置整个项目下载运行（1）下载地址：https://github.com/CesiumGS/cesium.git（2）运行：Cesium是纯前端的代码，官方给出的源代码中，配套了nodejs的server端，以及可以通过nodejs进行安装部署。实际上可以将Cesium部署进入tomcat（geoserver）、apache、nginx等服务器中。安装依赖：npm install运行命令：node server.js 或 npm start集成到vue-eleme

2020-11-26 10:31:22 421

原创 Vue学习之vue脚手架

1、使用 vue-cli：可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。注意，在构建项目的时候需要连接外网。（1）使用方式：全局安装： vue-cli $ npm install --global vue-cli创建一个基于webpack模板的新项目： $ vue init webpack my-project安装...

2019-09-01 16:54:47 128

原创 Vue学习之Webpack

1、介绍：Webpack是当下最热门的前端资源模块化管理和打包工具。将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等实际需要的时候再异步加载。webpack官网地址2、安装：（1）全局安装（不推荐）：$ npm install –g webpack（2）本地安装（减少对环境的依赖）：$ npm install –-save-dev we...

2019-09-01 16:30:20 252

原创 Vue学习之状态管理机制Vuex

1、介绍：Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。*Vuex（状态管理机制）的出现是为了将数据以及数据相关的操作抽离出来进行统一管理。2、安装：（1）方式1：直接下载 / 引用https://unpkg.com/vuexunpkg.com 提供了基于 NPM 的 CDN 链接。...

2019-09-01 12:14:23 410

原创 vue学习之jQuery异步传输、axios异步传输的比较

1、 jQuery对Ajax的支持：ajax异步交互框架，仅用于浏览器，不能用于后台nodejs中。（1）安装：1）通过<script>直接导入：<script src=”https://unpkg.com/jquery”>2）使用npm：$npm install jquery –save（2） jQuery.ajax：用于执行一个异步的ajax请求方法...

2019-09-01 11:07:18 385

原创 vue学习之指令、过滤器、路由管理vue-route

1、指令机制（操作底层dom）：当前元素渲染完毕之后，需要为当前dom元素绑定事件，或进行底层操作的一种接口。系统指令：v-bind :v-on @v-forv-ifv-show自定义指令：代码复用的主要形式和抽象是组件，但任然需要对纯DOM元素进行底层操作，此时则需要自定义指令。（1）全局注册：vue.directive(test,options)（2）局部注册：...

2019-08-28 11:06:37 269

原创 Vue学习之组件及组件间的通讯

1、组件作用（操作底层dom）：组件可以扩展HTML元素，封装可重用的代码；组件可以复用，提高开发效率；组件可以是自定义元素，vue.js的编译器为它添加特殊功能；组件也可以是用is特性进行了扩展的原生HTML元素2、自定义组件： 全局定义：（在vue的构造函数里定义组件，所有的vue实例都可以使用此组件）Vue.component(‘my-btn’,{ template:’’...

2019-08-28 10:40:11 113

原创 localStorage、sessionStorage、service缓存的区别

区别 localStorage sessionStorage Service服务生命周期存储的数据被永久保存在本地，除非被清除生命周期为当前窗口或标签页，关闭标签页或浏览器后被清除（标签页指浏览器顶层的标签）应用整个生命周期结束的时候（关闭浏...

2019-08-26 16:23:06 725

原创 bootstrap实现响应式导航栏，并解决滚动条并闪现的问题

每个导航栏的<li>标签上加属性data-toggle="collapse" data-target="#myCollapsible"实现当行栏的显示隐藏，会出现点击时滚动条并闪现的问题。解决方式是使用angular.element("#myCollapsible").collapse('hide')方法替换。1、HTML：<div ng-app="myApp" ng-co...

2019-08-26 16:03:13 1347

原创 angular合并对象，并不修改原对象

var object1 = { APPORT_ID:"1", EMP_NAME:"2", OP_APPLY_NO:""}var Object2 = { APPORT_ID_2:"1-2", EMP_NAME:"2-2", OP_APPLY_NO:"3-2"};// Object2会覆盖Bin1var Bin1 = angular.copy(object1); /...

2019-08-26 14:58:53 754

原创可输入可筛选的select下拉框

本文主要记载如何实现可输入并通过过滤器，筛选下拉数据的select框。方法1：使用datalist标签，但是datalist及其选项不会被显示出来，他仅仅是合法的输入列表:<label>请选择：</label><input type="text" id="txt_ide" list="myid" /><datalist id="myid"&gt...

2019-08-26 14:55:12 6158

原创 $filter过滤器实现前台筛选列表数据

1、controller上：$scope.data={ criteria:'', search:function(){ this.criteria='' if(this.name){ this.criteria=this.name; }else{ this.criteria=''; ...

2019-08-26 14:08:02 799

原创 ionic应用的名称、启动图标等的改变

1、修改名称：Config.xlm中：中修改应用名称；2、修改启动页：（1）需要https://dashboard.ionicjs.com/apps 注册用户（2）并且将选好的图片以.ai格式存放到resources文件夹中，注意图片的大小；（3）再执行ionic cordova resources.（4）iOS系统上无法将splash启动页去除。（5）Android系统上隐藏spl...

2019-08-26 13:58:35 228

原创 iOS系统上select没有确定按钮

因为在ionic的中默认设置Keyboard.hideFormAccessoryBar为true，在Android系统中下拉不受影响，但是在iOS中会使得select下拉框没有done确定，解决：if (ionic.Platform.isIOS()) { //判断是否是iOS平台 if (window.cordova && window.cordova.plugins...

2019-08-26 13:48:23 757 1

转载 iOS系统访问系统硬件，xcode8 的坑

原参考网址在iOS平台打包之后，发现调用手机的硬件系统，比如相机，相册等，会出现没有权限导致无法访问的情况。这是xcode8的坑，需要修改platform下的workspace下的Info.plist文件，添加：麦克风权限：Privacy - Microphone Usage Description 是否允许此App使用你的麦克风？相机权限： Privacy - Camera Usage...

2019-08-26 11:21:34 165

原创网络不好导致白屏

出现白屏的原因是：在路由中数据通过resolve进行加载，在网络不好时会导致数据获取失败从而导致路由加载失败出现白屏：resolve:{ childMenu:childMenu}解决方法：将数据加载放到controller里执行。...

2019-08-15 16:28:07 320

原创路由中去除cache:false的侧边栏问题

路由中去除cache:false的侧边栏问题在cache:false的页面上使用了定义侧边栏的头部，是没有异样的，一旦去掉cache:false，返回该页面，页面不会重新加载，定义的头部将不会重新载入，导致顶部消失。所以，定义侧边栏必须按以下格式进行定义：返回名称…查询条件关闭...

2019-08-15 16:13:41 296

weixin_41951632的博客