![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue
晚星@
这个作者很懒,什么都没留下…
展开
-
driver.js 页面出现指导功能
driver.js 页面出现指导功能。steps 绑定的元素显示指导。原创 2023-03-07 09:48:14 · 318 阅读 · 1 评论 -
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的。但是有的时候,这种效果我们并不想要的,比如用户点快了的时候,所以我们需要禁用这种效果,本文记录一下禁用选中效果的方式原创 2022-11-25 14:01:06 · 4896 阅读 · 0 评论 -
css 设置变量,通过refs的style.setProperty直接设置变量的值
css 设置变量,通过refs的style.setProperty直接设置变量的值原创 2022-09-01 13:57:07 · 2732 阅读 · 0 评论 -
vue导出pdf文件
vue导出pdf文件原创 2022-08-10 16:22:15 · 750 阅读 · 0 评论 -
echarts 绘制 地图柱状图
echarts 绘制 地图柱状图---江苏省的区域图原创 2022-07-29 13:52:19 · 2872 阅读 · 4 评论 -
elementUI---封装树形下拉框
封装elementUI树形下拉框原创 2022-07-04 15:36:40 · 654 阅读 · 0 评论 -
render后续来了,封装一个表单往表格中添加数据
render后续来了,表单往表格中添加数据原创 2022-06-28 14:24:12 · 264 阅读 · 0 评论 -
render渲染一个element-UI的table组件
render原创 2022-06-27 18:16:04 · 1640 阅读 · 0 评论 -
vue事件监听取消时遇见的问题
有时候发现这样删除监听,删除不掉,可能是因为keep-alive的原因使用了 keep-alive, 离开A页面时,因为组件没被销毁,被缓存起来了,所以不会调用 beforeDestroy 和 destroyed 钩子。在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated:activated:在 keep-alive 组件激活时调用deactivated:在 keep-alive 组件停用时调用beforeDestroy () { .原创 2022-04-29 16:06:32 · 834 阅读 · 0 评论 -
vue antDesign 文本框 把原回车换行 改成 alt+回车 换行 window(alt)和macos(option)同步
template <a-input placeholder="Basic usage" :rows="4" type="textarea" ref="textDom" v-model="message" @blur="handleInputBlur" @keydown.ent原创 2022-04-25 15:48:13 · 1725 阅读 · 0 评论 -
vue输入框输入数字后自动转换为金额格式
template<a-input v-model="tableData[scope.$rowIndex][item.type]" @focus="uninputMoney($event,scope.$rowIndex,item.type)" @blur="inputMoney($event,scope.$rowIndex,item.type)"></a-input>script/** 输入框转金额的代码 */ // 失去焦点金额格式化原创 2022-04-20 16:02:35 · 3286 阅读 · 2 评论 -
vxe-table 多列合并
vxe-table 多列合并 官方网站的是不管你第一列合第二列有没有联系,他是竖向合并,只要相同就合并。本文改成 会在第一列的基础上,在合并第二列。代码比较繁琐,有好的推荐联系我。mergeRowMethod ({ row, _rowIndex, column, visibleData }) { const fields = ['year', 'ji'] const cellValue = row[column.property] if (cellValue &原创 2022-04-15 18:21:45 · 3712 阅读 · 4 评论 -
js 两个小数相加的问题
项目中遇到的问题,0.1+0.2为0.30000000000000004,与想象中不一样,公共的方法 addNum (num1, num2) { num1 == undefined ? num1 = 0 : '' num2 == undefined ? num2 = 0 : '' var sq1, sq2, m; try { sq1 = num1.toString().split(".")[1].length; }原创 2022-04-02 14:59:35 · 1770 阅读 · 0 评论 -
vue项目在发布生产环境时,去除console控制台的打印信息
npm install babel-plugin-transform-remove-consol --save --dev修改babel.config.js 文件const prodPlugins = []// 判断当前环境是pro还是devif (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}module.exports = { presets: [原创 2022-02-18 09:50:14 · 1653 阅读 · 0 评论 -
pdf.js 适用于接口返回的是一个文件流展示
首先需要把pdf.JS下载下来放到自己的项目中我们可以在项目中直接掉viewer.html window.open(process.env.BASE_URL + 'static/pdf/web/viewer.html')如果从接口中获取加载pdf var pdfUrl = this.$API.EPE_GET_EECOPMTRACT_PREVIEWEECONTRACT + '?id=' + this.info.id window.open( process.env.BASE_URL + 'st.原创 2022-01-12 14:28:12 · 720 阅读 · 1 评论 -
vue中provide和inject 用法
祖孙元素调取祖<template> <div id="app"> </div></template> <script> export default { data () { return { datas: [ {原创 2021-12-01 16:04:29 · 811 阅读 · 0 评论 -
vue接口捕获异常封装
封装了axios的接口请求方法没有封装了axios的接口请求方法 $http原创 2021-12-01 15:00:44 · 1019 阅读 · 0 评论 -
vue 如何实现多页面应用
众所都知vue是一个单页面应用,但是单页面应用最大的问题,就是首次加载的时候过慢,因为他要把所有的css,js都要下载下来后,才可以加载页面,尤其是移动端,在弱网的情况下,体验感极差尝试过很多种优化的方式,就算在优化css,js的体积,但是还是在100-200K的这么个容量,所以我想起能否用多页面应用去解决这个问题。首先你的会一些webpack第一步:进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口.转载 2021-11-18 15:12:05 · 8332 阅读 · 2 评论 -
Vue首页加载过慢 解决方案
一、什么导致了首页初步加载过慢:app.js文件体积过大二、解决方法:1、Vue-router懒加载vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。路由懒加载写法:2、在webpack打包的过程中,将多余文件去掉,如map文件,即在config/index.js中将productionSourceMap的值修改为false,就原创 2021-11-13 11:36:19 · 7851 阅读 · 0 评论 -
vue项目发布后禁止 favicon.ico 请求
favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404。出于优化的考虑,要么就有这个图标,要么就禁止产生这个请求。在做 H5 混合应用的时候,不希望产生 favicon.ico 的请求。可以在页面的 区域,加上如下代码实现屏蔽:<link rel="icon" href="data:;base64,=">或者详细一点<link rel="icon" href="data:ima.原创 2021-11-12 09:48:03 · 1406 阅读 · 0 评论 -
VUE 生成二维码(qrcodejs)
npm install qrcodejs2 --save<template> <div> <div id="qrCode" ref="qrCodeDiv"></div> </div></template><script>import QRCode from 'qrcodejs2';export default { name: "qrCode", data () { .原创 2021-11-10 11:44:11 · 1050 阅读 · 0 评论 -
vue通讯录按名子首字母排序分组
// 获取数据 LoadData () { // sort var pySegSort = (arr) => { if (!String.prototype.localeCompare) return null let letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('') let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('') let原创 2021-09-15 11:12:27 · 1199 阅读 · 1 评论 -
elementui中时间选择器数据回显后再次修改页面不更新问题
解决办法:因为ruleForm里的time是个数组或对象,那么这样直接赋值时视图是不会发生改变的,如果向对象中添加新的属性,要用到$set()方法给他强制赋值原创 2021-09-03 17:12:01 · 938 阅读 · 2 评论 -
element table slot header自定义表头
<el-table-column prop="companyName" label="单位" header-align="center"> <template #header> <div>单位</div> <div style="padding:0px 0px;">原创 2021-09-03 11:30:32 · 1395 阅读 · 3 评论 -
vue axios请求发送传参undefined
get请求post请求参数如果是undefined的时候,传参时会默认无这个字段。原创 2021-08-30 17:45:01 · 1198 阅读 · 0 评论 -
vue项目里实时监听某个div宽度的变化,然后执行相应的事件
directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind (el, binding) { // el为绑定的元素,binding为绑定给指令的对象 let width = '', height = ''; function isReize () { const style = document.defaultView.getComputedStyle(el); if.原创 2021-08-13 15:30:51 · 9324 阅读 · 4 评论 -
vue+ vis 编写流程图,网络拓补图等
安装依赖npm install vis --save代码 <template> <div> <div id="mynetwork"></div> </div></template> <script>import vis from "vis";export default { data () { return { nodes: [ { ..原创 2021-08-09 15:38:54 · 833 阅读 · 3 评论 -
vue监听属性watch中的handler
handle:watch中需要具体执行的方法deep:需要监听的数据的深度,一般用来监听对象中某个属性的变化,数组字符串一般不需要immediate:在选项参数中指定 immediate: true将立即以表达式的当前值触发回调 <input type="text" v-model="cityName.name"/>new Vue({ el: '#root', data: { cityName: {id: 1, name: 'shanghai'} }, wat.原创 2021-08-04 17:56:11 · 8178 阅读 · 0 评论 -
vue 汉字转首字母
首先安装npm install js-pinyin --save引入import pinyin from 'js-pinyin'使用案例let name = '小明'let char = ''pinyin.setOptions({checkPolyphone:false,charCase:0});char = pinyin.getCamelChars(this.name)// char = XM原创 2021-08-03 15:19:25 · 512 阅读 · 0 评论 -
树形结构数据通过子孩子的父ids然后挨个去除父亲的名字
listMenuTree () { this.menuTree = [] listBaseLocation().then(res => { this.menuTree = res.data // test var id = "870607439928754176" this.tree(this.menuTree, id) if (res.data.length > 0) { ..原创 2021-07-30 16:33:36 · 127 阅读 · 0 评论 -
element使用table样式混乱问题解决方案(doLayout)
渲染数据的时候,表格线样式出现了问题// 在渲染完数据的时候执行以下的代码this.$nextTick(() => { this.$refs.listTable.doLayout() })在element官网有介绍原创 2021-07-21 16:48:58 · 1062 阅读 · 0 评论 -
element-ui自定义table表头,render-header使用
<template> <el-table :data="tableData2" style="width: 100%"> <el-table-column prop="address" label="地址" :render-header="renderHeader"> <!--渲染render事件 --> </el-table-column> </el-table>原创 2021-07-16 11:36:26 · 5894 阅读 · 0 评论 -
vue-v-model 双向绑定-编辑弹框修改数据后页面数据跟着更改(取消弹框操作也已经被修改数据),利用 Object.assign解决对象引用同址问题
Edit (item) { let copy = Object.assign({}, item) this.addData = copy this.modal = true},原创 2021-07-15 16:09:49 · 441 阅读 · 0 评论 -
element table控件的checkout复选框,只能默认选中一个,并且点击发送请求。
vue复选框的 label-class-name 属性设置复选框 表头的进行隐藏,表头的复选框变成汉字 <el-table-column type="selection" width="60" label-class-name="DisabledSelection" ali原创 2021-07-13 17:18:36 · 830 阅读 · 0 评论 -
Vue中监听窗口关闭事件,并在窗口关闭前发送请求
mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window.removeEventListener('beforeunload', e => thi...原创 2021-07-12 13:51:49 · 982 阅读 · 0 评论 -
element树形结构封装菜单改变父节点的样式及遍历节点数据
效果图:template代码<el-dialog title="常用菜单配置" :visible.sync="dialogVisible" custom-class="notic-add-dialog" width="30%"> <div style="height:400px;overflow:auto;padding:0 20px;"> <el-tre原创 2021-06-29 16:01:36 · 863 阅读 · 0 评论 -
element-UI 表格单击行时选中该行CHECKBOX
1.table上加上 @row-click=“handleClickTableRow”2.单选框的checkbox那列加上 @selection-change=“handleSelectionChange”3.table加上ref4.实现1,2的方法 methods: { handleClickTableRow(row, event, column) { console.log(row); console.log(column); this.$refs原创 2021-06-23 16:06:25 · 589 阅读 · 0 评论 -
element单选按钮的值设置
<el-switch v-model="state" :active-value="1" :inactive-value="2" @change=chang($event,state)></el-switch>接口返回 0,1默认是 true 和 false原创 2021-06-21 16:14:55 · 484 阅读 · 0 评论 -
vue中echarts滑轮滚动数据及全屏查看
echarts的vue封装<template> <div class="m-chart" id="fullChart" :style="{height:height,width:width}"></div></template><script>import echarts from "echarts";import resize from "@/utils/resize";import { upOrDo原创 2021-06-19 13:45:16 · 596 阅读 · 0 评论 -
element拖拽的select下拉框
封装组件<template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <slot /> </el-select></template><script>import Sortable from 'sortablejs'expor原创 2021-06-09 11:03:16 · 1418 阅读 · 0 评论