- 博客(38)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 微信小程序引入Vant weapp的方法
微信小程序引入Vant weapp的方法废话不多说直接上代码第一步：npm init //初始化第二步：npm i第三步： npm i @vant/weapp -S --production第四步： 工具 ——> 构建npm局部应用：在页面的json文件 usingComponents 中配置全部引入：在app.json 中引入 比如：...
2022-01-20 17:52:04
399
原创 uniapp、vue展示pdf文件
首先安装插件npm install pdfh5html代码<template> <view id="demo"></view></template> data() { return { pdfh5: null, } },js代码//确保dom元素已加载成功this.$nextTick(()=>{ this.pdfh5 = new Pdf
2021-12-09 17:03:40
1246
3
原创 js打印页面图片(批量)
js打印页面图片(批量)html代码：<body> <button onclick="printThisWindow()">打开</button></body>js代码let list = `<div class="imgBox">` for (var i = 0; i < 10; i++) { //防止批量打印时打印界面重复调用 if(i == 0){ list += `<img src=
2021-10-18 15:38:47
2279
原创 uniapp请求后端接口封装
uniapp请求后端接口封装1、首先在根目录下创建以下文件2、在api.js中写入const baseUrl = 'http://xxxxxxxx'; //请求后端服务接口地址const myRequest=(options)=>{ //传入的options是一个json对象 uni.showLoading({ title: '加载中' }); //开启加载动画 let openId = ""; let userInfo = J
2021-10-15 10:34:25
637
原创 常用的vue组件库总结
常用的vue组件库总结1、element-ui此组件框算是vue的标配用途：适用于PC端开发地址：点击查看2、VantVant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。**用途：**适用于移动端app开发地址：点击查看3、Mint UIMint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。用途：适用于移动端app开发地址：点击查看4、uViewuView是uni
2021-10-15 10:13:06
1875
原创 Vue 复选框 checkbox 全选与取消全选
Vue 复选框 checkbox 全选与取消全选组件<template> <p> 全选： </p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"> <label for="checkbox"> {{checked}} </label> <p> 多个复选框：
2020-12-24 16:53:41
1223
1
原创 判断element Ui 表格（el-table）中复选框中的选中状态
判断element Ui 表格（el-table）中复选框中的选中状态组件 <el-table :data="newTableData" @select="selectionRow" @select-all="selectionRowAll" style="width: 100%"> <el-table-column align="cente
2020-12-24 16:39:44
11192
2
原创 element ui中的el-dropdown（下拉框）防止点一下就影藏的问题
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题当使用el-dropdown下拉框时，下拉框的每项中，可能需要加入@click、@change或复选框等事件，而el-dropdown-item的事件触发时，el-dropdown下拉框总是会收缩，很不合理。官网<el-dropdown trigger="click" placement="left"> <span class="el-dropdown-link"> <button
2020-12-24 16:00:27
2751
1
原创 vue中深度监听vuex中的值的变化
vue中深度监听vuex中的值的变化1、首先用npm引入vuex；2、创建一个vuex的js文件 比如：在store文件夹下面创建index.js文件；3、在main.js中引入并绑定到vue原型上；import store from './store/index'Vue.prototype.$store = store;index.js文件import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);let store
2020-11-05 16:06:19
2269
原创 arcgis for js 3.x 添加格点值
arcgis for js 添加格点值1、地图缩放级别所需要的参数’var lods = [ {"level" : 0, "resolution" : 0.0409782872197041, "scale" : 17221668.21968845}, {"level" : 1, "resolution" : 0.0341349132540135, "scale" : 14345649.62700048}, {"level" : 2, "resolution" : 0.028434382740
2020-11-05 15:47:28
347
原创 arcgis for js 3.3 点击地图图标，弹出信息层弹窗
arcgis for js 3.3 点击地图图标，弹出信息层弹窗低吗如下：1.创建图层function create_disaster(layerId){ let mapLayer = map.getLayer(layerId); if(!mapLayer){ mapLayer = new esri.layers.GraphicsLayer({ id: layerId }); map.addLayer(mapLayer);
2020-09-21 11:53:52
1380
原创 arcgis for js 3.3 向地图添加图片
arcgis for js 3.3 向地图添加图片代码如下：function mapAddImage(url){ require(["esri/config", "esri/map", "dojo/parser", "dojo/dom-style", "esri/layers/MapImageLayer", "esri/layers/MapImage", "dijit/layout/BorderContainer",
2020-09-21 10:27:30
378
1
原创 arcgis for js 3.3 向地图添加图标
arcgis for js 3.3 向地图添图标代码如下：首先添加 一个新的图层，存放图标function create_disaster(layerId){ let mapLayer = map.getLayer(layerId); if(!mapLayer){ mapLayer = new esri.layers.GraphicsLayer({ id: layerId }); map.addLayer(mapLayer)
2020-09-21 10:19:05
1089
原创 js获取当天时间的0点和24点
js获取当天时间的0点和24点js代码如下：//当天时间的0点 new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(); // 当天0点 //当天时间的24点 new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime();...
2020-06-22 17:26:07
2976
原创 js实现excel文件上传
js实现excel文件上传<input type="file" name="multipartFile" id="upload_file"/>let fileObj = document.getElementById("upload_file").files[0]; let formData = new FormData(); formData.append('file', fileObj);
2020-05-21 14:40:25
917
原创 给echarts图表添加警戒线
给echarts图表添加预警线主要代码：（设置预警线值，样式，文本） markLine : { symbol:"none", /*symbol:"none", //去掉警戒线最后面的箭头 label:{ position:"end" ,...
2020-04-20 10:21:52
3797
1
原创 echarts加载动画效果的配置
echarts加载动画效果的配置代码如下：注释开启动画： myDayChart.showLoading()；关闭动画： myDayChart.hideLoading();let myDayChart = echarts.init(document.getElementById('riEcharts'));let option = { //图表配置内容 ...
2020-04-16 20:45:04
2244
原创 layui弹出层控件的加载动画
layui弹出层控件的加载动画代码如下：调用动画：load_pageData()；关闭动画：layer.close(layer.index);js:function load_pageData(){ layui.use('layer', function(){ let layer = layui.layer; let index = layer....
2020-04-16 20:35:11
4775
原创 echarts条形进度条
echarts条形进度条说明：echarts.js必须下载到本地，在线引入坐标轴的箭头不会出现效果如下： html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <st...
2020-04-06 20:05:16
2300
原创 ehcarts半圆型进度条
ehcarts半圆型进度条说明：1.引入jQuery https://code.jquery.com/jquery-3.1.1.min.js2.引入echarts https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js效果如下： 代码如下：<!DOCTYPE html><html> <h...
2020-04-06 19:02:53
1538
原创 关于echarts仪表盘的全部相关配置
关于ECharts仪表盘的全部相关配置<html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts...
2020-04-05 22:34:53
312
原创 js获取当前月的最后一天的日期
js获取当前月的最后一天的日期//使用new Date(year,month,0)的方式,可以获取该月的最后一天var end_date = new Date(2019,11,0).getDate()代码如下： let end_date = new Date(); let yy = end_date.getFullYear(); let mm = end_date.get...
2020-04-01 20:33:09
722
原创 jQuery.js实现全选反选重选功能
jQuery.js实现全选反选重选功能HTML代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="quanxun">全...
2020-04-01 20:05:11
121
原创 js将当前时间转换为时间格式
js将当前时间转换为时间格式说明：padStart("参数一”，‘’参数二‘’) ：参数一设置总长度，参数二 当总长度不够时，用参数二补充（前面补充）:padEnd("参数一”，‘’参数二‘’)：同上（后面补充）代码如下：let dates = new Date();let yy = dates.getFullYear();let mm = (dates.getMonth() ...
2020-03-26 20:08:18
178
1
原创 设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下：yAxis: [ { type: 'value', axisLabel: { show: true, interval: 'auto', for...
2020-03-11 21:01:21
4251
原创 设置echarts图例的样式以及位置
设置echarts图例的样式以及位置代码如下：legend: { orient: 'vertical', //方向 itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 x:'right', //可设定图例在左、右、居中 y...
2020-03-11 20:57:46
2075
原创 Nuxt.js服务器端口被占用时修改端口
Nuxt.js服务器端口被占用时修改端口在package.json文件中添加代码如下（没有代码顺序关系）："config": { "nuxt": { "host": "127.0.0.1", "port": "8888" }}
2020-02-16 14:59:52
631
原创 Nuxt.js的路由跳转（页面跳转nuxt-link）
Nuxt.js的路由跳转（页面跳转nuxt-link）路由跳转代码如下：<ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS p...
2020-02-16 14:08:54
8351
1
原创 Nuxt.js设置页面跳转过渡动画（基于Vue.js）
标题Nuxt.js设置页面跳转过渡动画（基于Vue.js）一，全局动画（针对所有页面）1，在assets文件夹中‘建立一个css文件夹，并且建立一个animation.css文件，过度代码如下：.page-enter-active,page-leave-active{transition: opacity 2s;}.page-enter, page-leave-active{opa...
2020-02-16 13:55:10
1518
3
原创 css常用公共样式配置（pc端）
css常用公共样式配置（pc端）css代码如下：/*pc端公共样式*/body,div, ul,li,ol, p,span, h1, h2, h3, h4, h5, h6, dl, dd,dt, form, input, textarea, select，option { padding: 0; margin: 0; color: red;}li { list-style...
2020-02-16 13:16:52
759
原创 js(jQuery)原生分页器
js(jQuery)原生分页器说明：引入jQuery插件引入page.js文件（在文章的最后面）css:/* 外面盒子样式---自己定义 */.page_div { margin: 20px 10px 20px 0; color: #666}/* 页数按钮样式 */.page_div button { display: inline-block;...
2020-02-10 13:46:51
496
原创 swiper轮播图常用配置
swiper轮播图常用配置首先引入swiper.css和swiper.js引入jQuery代码块如下css:*{ margin: 0; padding: 0;}html,body{ width: 100%; height: 100%;}.swiper-container { width: 100%; height: 600px;...
2020-02-10 13:05:53
668
原创 js将url地址中的信息转化为对象obj
js将url地址中的信息转化为对象objfunction urlToObj(str) { let obj = {}; let str1 = str.split("?"); let str2 = str1[1].split("&"); //["a=1", "b=2", "c=3"] for (let i = 0; i <str2.length ; i...
2020-02-10 11:44:39
843
原创 js实现图片、视屏上传在线预览功能
图片、视屏上传在线预览功能关键代码如下：css模块:<style> .fileBox{ width: 500px; height: 300px; border: 1px solid black; } video{ width: 500px...
2020-01-03 17:23:14
1013
2
原创 div在屏幕任意位置拖动
div在屏幕任意位置拖动主要就是三点：1，获取鼠标按下时的位置；2，获取鼠标移动后的位置；3，两者相减就是div的位置；js代码如下：// 获取屏幕的高宽度let cw = $(window).width();let ch = $(window).height();// 鼠标按下时获取鼠标在屏幕的位置$(".box").mousedown(function(e){ e ...
2020-01-03 15:49:11
1501
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人