vue
真的不想哇
这个作者很懒,什么都没留下…
展开
-
VUE生成PDF
生成pdf可自动分页生成多页npm install --save html2canvasnpm install jspdf --savepdf.js// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title原创 2022-05-27 17:27:51 · 6465 阅读 · 0 评论 -
VUe中 ehcarts随着点击浏览器放大缩小按钮自适应
在public文件夹中创建js文件a.js 文件名字随意var EleResize = { _handleResize: function (e) { var ele = e.target || e.srcElement var trigger = ele.__resizeTrigger__ if (trigger) { var handlers = trigger.__z_resizeListeners if (hand原创 2022-04-13 11:39:39 · 425 阅读 · 0 评论 -
Vue中this.$set的用法
this.$set( target, key, value)target:表示数据源,即是你要操作的数组或者对象key:要操作的的字段value:更改的数据例如removeId 取的是id,然后对 this.MUbanList.数组进行操作this.MUbanList[b].chenck = 'false’此字段只有前台进行添加操作这样的写法是针对数组集合操作方可数据改变页面进行渲染let removeId = localStorage.getItem('RemoveContentID')原创 2022-04-13 10:38:41 · 1378 阅读 · 0 评论 -
天地图区域行政区划
我这边的写法是通过每个城市的orgID 如浙江省是330000,getEdgeMapInfo获取下面相对应的城市然后通过接口返回的json数据 去请求json文件夹获取数据drawLine(id) { let style = { color: 'blue', weight: 3, opacity: 1, lineStyle: 'dashed', // 虚线 fillColor: 'tr..原创 2022-04-11 14:02:51 · 4902 阅读 · 2 评论 -
vue-print-nb打印功能
安装依赖:npm install vue-print-nb --save在main.js中写入import Print from 'vue-print-nb'Vue.use(Print);要打印的区域加上id<div id="prinst" style="width:100%;"></div><div v-print="printObj">打印</div>在data中data() { return { dialogVisi原创 2022-04-08 14:10:19 · 1743 阅读 · 1 评论 -
Elemtent多选择框权限控制多选择框
直接上代码<div><div class="JuesCheack"> <el-collapse accordion> <el-collapse-item v-for="(item,index) in newTreeList" :key="index"> <template slot="title"> <el-checkbox-gr...原创 2021-10-25 09:26:18 · 250 阅读 · 1 评论 -
Echarts地图四级下钻
这里地图数据只做了杭州市的下钻到区的,数据可自行下载地图数据Echarts要下载5.0以下的版本,public下的map文件存放着地图数据<template> <div> <div> <el-button size="mini" type="primary" @click="backMap()" class="btn">返回概览</el-button> <div id="mapcontainer"></.原创 2021-09-18 17:13:19 · 1660 阅读 · 0 评论 -
点击按钮div展开收起
点击按钮下方收起展开<el-button size="mini" type="warning" circle @click="fun_animate" style="height:28px"> <i v-if="is_show" class="el-icon-caret-bottom"></i> <i v-if="!is_show" class="el-icon-caret-top"></i></el-button>&..原创 2021-08-04 16:40:42 · 853 阅读 · 0 评论 -
echarts柱状图
<template> <div id="mainCH" style="width: 100%; height: 400px;"></div></template><script> let echarts = require('echarts/lib/echarts') // 引入柱状图组件 require('echarts/lib/chart/bar') // 引入提示框和title组件 require('echarts/lib.原创 2021-08-04 16:31:07 · 174 阅读 · 0 评论 -
解决vue-seamless-scroll滑动点击事件问题
需要在vue-seamless-scroll外层定义一个div然后写上@click=“handleClick($event)”在vue-seamless-scroll里循环的内容,标签上添加:data-obj=“JSON.stringify(list)”,我这里添加那么多,因为有的找不到,所以一个一个试的<div style="padding: 0 16px 0 18px;box-sizing: border-box;height: 162px;overflow: hidden;" @cli.原创 2021-08-04 16:14:15 · 1127 阅读 · 0 评论 -
Echarts柱状图
我这里的数据是随便写的,让后台给接口的时候,把排名从高到底给好<template> <div id="main2" style="width: 460px; height: 280px;"></div></template><script> // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/core'; // 引入柱状图图表.原创 2021-08-04 11:51:13 · 635 阅读 · 0 评论 -
echarts柱状图
let myChart = echarts.init(document.getElementById("main")); var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, }, legend: { x:'right', //可设定图例在左、右、居中 y:'top', //可设定图例在上.原创 2021-07-23 17:40:04 · 2680 阅读 · 0 评论 -
elment表格sort-method自定义排序功能
点击排序箭头来调取接口进行数据排序在el-table表格中写入点击事件@sort-change=“changeTableSort”默认以什么单位进行倒序还是顺序排序,prop对应这字段:default-sort = “{prop: ‘ptuid’, order: 'ascending '}”在表格中要写入 :sortable="‘custom’"<el-table border stripe v-loading="loading" ref="multipleT..原创 2021-07-13 16:57:15 · 2429 阅读 · 0 评论 -
VUE使用Bus传值
首先建个bus.js文件JS文件内容如下import Vue from 'vue'export default new Vue()然后在我们要传值的页面中引入,对应自己放的位置import BUS from ‘…/utils/bus.js’NavChild为传值的名字BUS.$emit('NavChild',数据内容)在我们接收的页面在继续引入bus.jsimport BUS from ‘…/utils/bus.js’infor就是我们传过来的值Bus.$on('NavChild'原创 2021-07-13 16:47:22 · 918 阅读 · 0 评论 -
element DatePicker 日期选择器多选模式触发点击时间事件
这里有个功能,当点击时间或者取消选择时间,要触发事件来进行操作。但是当时间组件type为dates时就不能点击触发chang事件,点击确定按钮才会触发。这里在是对这个进行监听来触发事件<el-date-picker v-model="shangkedata" type="dates" clearable placeholder="选择日期" format="yyyy - MM - dd" value-format="yy原创 2021-06-04 17:50:54 · 8704 阅读 · 0 评论 -
element 循环动态Checkbox 多选框
直接放图,这里做的是权限控制<table width="100%"> <tbody> <tr v-for="(permissionTop,topIndex) in tableData" :key="topIndex"> <th style="line-height:48px;border:1px solid #1E9FFF;padding:0 10px;width: 150px;"> <el-checkbox :原创 2021-06-04 17:26:29 · 4332 阅读 · 1 评论 -
VUE 解决百度地图循环加载marker并添加多个信息窗口,解决只显示最后一个窗口信息的问题
循环添加的标注点只显示最后一个信息baiduMap() { var bmap = new BMapGL.Map("allmap"); // 创建Map实例 bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别 bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 var path...原创 2021-05-27 16:01:54 · 2477 阅读 · 3 评论 -
Element Select 选择器加分页
这里是模糊搜索下拉菜单,带上分页功能<el-select v-model="Stateval" filterable remote size="mini" reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" .原创 2021-05-20 11:05:15 · 2563 阅读 · 0 评论 -
element表格过多隐藏功能
这个表格因为字段过多出现的横向滚动条,我这里没有采用官网固定表头或者表尾。选择用这些字段点击控制某些字段表格的显示隐藏这里的列表选择后端给的接口{"state":10001,"msg":"ok","data":{"编号":false,"合同编号":false,"对方单位":false,"合同名称":false,"签订日期":false,"合同金额":false,"支付情况":false,"支付完成时间":false,"对方联系人":false,"对方联系电话":false,"公司经办人":fa..原创 2021-04-19 16:20:06 · 458 阅读 · 0 评论 -
VUE中的富文本编辑器
富文本编辑器wangEditor官方链接<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>我这里进行的是页面CDN引入的方式页面是VUE的写法<div id="div1"></div>在页面创建一个DIV其中ID名字在data里定义的editor:'', t原创 2021-03-15 16:17:57 · 379 阅读 · 0 评论 -
h5页面在微信浏览器分享朋友,朋友圈
wxfx(PageTitle, title2, description, imgUrl) { var link = window.location.href; var that = this; $.ajax({ url: "//weixin.jrzp.com/ashx/serviceInterface.ashx?time=" + new Da原创 2020-12-21 09:55:26 · 1017 阅读 · 0 评论 -
vue+elementUI接口请求实现实现省市区三级联动
话不多说先上图HTML部分 <b-col md="6"> <el-select v-model="provinceValue" clearable @clear="shengdel" placeholder="请选择省" @change="chooseProvince" @visible-change="chusheng" style="width:150px;"> <el-option原创 2020-12-09 16:45:36 · 2470 阅读 · 0 评论 -
html页面vue写法导出word模板
多选或者单选导出word模板。写法是在html页面vue的写法这里的写法是根据,多选获取每条的id,循环进行接口请求,设置取消勾选,table里要有ref<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.19.7/docxtemplater.js"></script> <script src="https://unpkg.com/[email protected]/dist/pi.原创 2020-11-16 14:47:58 · 927 阅读 · 0 评论 -
mescroll下拉刷新上拉加载
我是在html页面引入vue的写法div内容根据自己修改<link rel="stylesheet" href="css/mescroll.min.css?q=1"/>div id="app" class="mescroll-touch"> <div ref="mescroll" class="mescroll"> <div class="follow-item" :class="{'follw-item2 ' : messages...原创 2020-10-30 16:20:48 · 214 阅读 · 0 评论 -
前端地址栏截取参数
在methods:{}里写好方法//截取地址栏参数 canshu(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); i原创 2020-10-30 15:29:33 · 388 阅读 · 0 评论