vue
-Dayer-
只想搞钱
展开
-
动态生成uni-app 配置文件互相影响(尚未完工)
动态生成uni-app 配置文件原创 2023-07-31 16:05:43 · 229 阅读 · 0 评论 -
uni-app 开发 tab锚点 (水一篇)
uni-app tab锚点原创 2023-07-27 18:47:08 · 235 阅读 · 0 评论 -
使用express生成配置json文件
项目结构如下app.js 创建node后端服务saveConfig.jsvar fs = require("fs"); // 引入fs模块function saveData(info) { return new Promise(async (resolve, reject) => { try { let ret = { type: -1, msg: "暂无信息", }; var TemplateData原创 2022-05-09 15:57:59 · 688 阅读 · 0 评论 -
遍历所有树形数据的路径,并查找某个节点出现路径
function recurTree(root) { let result = []; let path = []; path.push(root.posId); function findPath(result, node, path) { if (node.children.length == 0) { result.push(path); return; } for (.原创 2021-06-30 16:01:15 · 1058 阅读 · 1 评论 -
vue-cropper 裁剪图片
先展示一下效果如何使用:1、安装npm install vue-cropper (如果安装不上,用cnpm)2、直接贴代码爽快人就是这样<template> <el-dialog title="裁剪图片" :visible.sync="visible" @close="onCallback(false)" class="handleDialog" width="1000px" > <div...原创 2021-01-22 17:33:50 · 3439 阅读 · 12 评论 -
如何使用json 动画
1、安装 npm installlottie-web -s2、引入 importlottiefrom"lottie-web"; // 引入插件importanimationDatafrom"@/assets/data.json"; // 引入json 数据3、使用 html<viewclass="lottie"></view>js optAnimation() { lottie.destroy...原创 2021-01-20 17:05:35 · 2198 阅读 · 9 评论 -
动态创建弹框el-dialog
相信大家在页面中写了很多基于el-dialog的弹框,尤其是弹框比较多时,显得很臃肿,不利于后期维护,还有一些相似的弹框功能让你复制粘贴感觉很麻烦还要换个名字,下面我有个还行的方法动态创建,只需要传数据,然后返回数据就可以了,下面直接贴代码哈哈dialog.jsimport Vue from 'vue'function snake2Camel(str, capLower) { let s = str.replace(/[-_](\w)/g, function (x) {原创 2020-10-16 16:36:21 · 4925 阅读 · 4 评论 -
H5与app交互
const emit = (event, json)=> { try { if (isIOS()) { window.webkit.messageHandlers[event].postMessage(json) } else { if (!json) { eval(`window.formuJSInterface.${event}()`) } else { let params = json ..原创 2020-09-04 16:43:39 · 443 阅读 · 0 评论 -
动态更改svg图片的颜色
因为要做uni-app换肤,所以有一些icon使用svg,然后根据主题色进行着色,所以有这个需求下面我说一下解决方法首先准备一张svg图如下<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//原创 2020-08-04 14:23:59 · 4760 阅读 · 1 评论 -
基于vue-pdf的PDF预览,缩放、旋转、拖拽、下一页
效果图如下:因为上一页下一页没有icon,所以用的旋转的icon1、安装vue-pdfnpm install --save vue-pdf2、具体引用使用<template> <div :class="{ dialog:true, active:show}" @mousewheel="mousewheelFn"> <a v-if="showClose" class="close" @click="closeFn"></a>原创 2020-07-07 16:35:20 · 6329 阅读 · 8 评论 -
列表进入详情返回列表时保存搜索条件
别问,问就是不会1、写几个函数,写好后列表页面中引用sStore就是封装后的sessionStorage,this.params是搜索条件,isFrom配置在列表,isDetail配置在详情列表中这样引入使用如下图import { searchParamsSave } from "js/common.js";function searchParamsSave() { return { created() { let key = 's原创 2020-06-11 09:43:05 · 1677 阅读 · 0 评论 -
express和vue框架做的项目结构简介
1、本项目采用的开发技术包括以下这些:语言采用比较熟悉的html、css、javascript等基础脚本语言来开发的。2、前端框架使用的是Vue,而后端框架使用的是express来搭建的。数据库则使用的mysql作为系统的数据库。3、接口token验证使用了jwt,设置有效过期时间为2小时。...原创 2020-05-28 14:27:13 · 1781 阅读 · 0 评论 -
防抖节流test
使用场景:onresize,scroll,mousemove,mousehover等,会被频繁触发(短时间内多次触发),需要防抖处理防抖函数如下:function debounce(fn, waitTime){ let timer = null return function(){ if(timer !== null){ cle...原创 2020-05-08 15:35:19 · 261 阅读 · 0 评论 -
vue指令复制
cnpm install clipboard --save-devimport clipboard from 'clipboard';Vue.prototype.clipboard = clipboard; <el-button @click="copy(categoryCode)" id="getCategoryCode">复制</el-b...原创 2020-04-08 15:19:52 · 279 阅读 · 0 评论 -
elementUi中checkbox的属性indeterminate 状态和v-model的关系
<el-checkbox :indeterminate="hdIsIndeterminate" v-model="hdCheckAll" @change="handleCheckAllChange($event, 'hd')">华东</el-checkbox>对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的...原创 2020-03-20 17:11:27 · 3521 阅读 · 2 评论 -
vue blob excel导出数据
downloadFile (res, fileName) { let data = res.data let url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.ms-excel" })) if ("do...原创 2020-01-09 10:56:08 · 815 阅读 · 0 评论 -
el-dialog字体模糊,使用flex布局,垂直居中
/*element组件库样式修改*/ /deep/ .el-dialog { display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; t...原创 2020-01-07 14:31:26 · 1885 阅读 · 0 评论 -
el-table 自定义表头 使用方法 :render-header
因为维护了element ui 1.3.7 版的项目,要自定义表头和提示使用:render-header效果:代码:<template> <div class="promptMessage"> <el-tooltip effect="dark" placement="bottom"> <d...原创 2019-09-09 15:06:18 · 4000 阅读 · 0 评论 -
element el-date-picker 限制范围90天,当天不可选
<template> <div class="table"> <div class="crumbs"> <el-row class="search_con" :gutter="24" style="margin-bottom:20px;display: flex;align-items: center;"&...原创 2019-09-09 14:52:43 · 2706 阅读 · 3 评论 -
如何解决移动端遮罩层上面滑动穿透事件
不是原创,只是觉得可以解决问题原文链接:https://www.cnblogs.com/bride/p/10114240.html1 使用vue的阻止默认事件@touchmove.prevent 给遮罩层一个阻止默认事件2 用一个div把你想不能让他滑动的内容包裹起来,div的样式设置为.hidden{overflow: hidden;position:fixed...转载 2019-05-30 17:03:40 · 1659 阅读 · 0 评论 -
vue-router中的钩子函数
全局路由钩子函数 每次路由跳转,都会执行beforeEach和afterEach,一般写在main.js可以做权限控制 例如: router.beforeEach((to, from, next) => { if (to.matched.length === 0) { from.name ? next({ name : from.name }) : next('/') ...原创 2018-09-12 16:51:20 · 2275 阅读 · 0 评论 -
vue-devtools的安装与使用
git clone https://github.com/vuejs/vue-devtools npm install npm run build 更改vue-devtools\shells\chrome下的manifest.json persistent": true 浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中 ...原创 2018-09-07 18:33:12 · 288 阅读 · 0 评论 -
关于上移下移,一行代码完成数据交换
onMoveUp (index) { if (index !== 0) { this.swapArray(this.dataList, index, index - 1) } else { this.$message({message: '已经处于置顶,无法上移', type: 'warning'}) ...原创 2018-12-04 18:19:38 · 2085 阅读 · 0 评论 -
js 转树结构
function toTree(arr, menuPid, type) { let temp = [] let treeArr = arr treeArr.forEach((item) => { if (item.menuPid == menuPid) { item.children = toTree(treeArr, ite...原创 2018-12-04 18:22:30 · 923 阅读 · 0 评论 -
...和map组数据的实用方法
this.items = ret.map((v, i) => { v.name = decodeURIComponent(v.name) return { no: i + 1, ...v ...原创 2018-12-04 18:27:19 · 478 阅读 · 0 评论 -
vue:element-ui时间选择器限制只能点不能输入
:editable="false"原创 2018-12-15 01:02:07 · 1524 阅读 · 0 评论 -
微信公众号的Api 一些说明 关于 WeixinJSBridge API
WeixinJSBridge API 网上有很多说可以一键关注、分享给好友、分享到朋友圈之类的,这些都被禁止了,真刺激,因为在做自定义分享按钮点击分享的那种,所以使用微信js-sdk实现分享吧当然WeixinJSBridge API还有一部分APi还是可以使用的比如: onBridgeReady () { window.WeixinJSBridge.call('hi...原创 2018-12-20 17:15:51 · 1451 阅读 · 0 评论 -
vue-router如何从详情页返回列表页时返回到上次滚动位置 方法集锦
方法一:1.在router.js里面(即路由文件中),此时模式为 historyconst router = new VueRouter({ mode: 'history', routes, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPositio...转载 2018-12-20 19:59:36 · 1497 阅读 · 0 评论 -
有时候扫码枪不能触发enter事件,多半和中文输入法有关
正常情况下,扫描标签条码会触发enter事件,但是中文输入的时候,捕获到的是一个shift按键事件,而代码需要enter按键才会触发查询。解决办法:输入法改为英文输入法,或者关闭中文输入...原创 2019-01-23 15:45:26 · 10969 阅读 · 0 评论 -
vue 拖拽 (使用vue-slicksort)
<template> <div class="root1"> <SlickList :lockToContainerEdges="true" axis="x" lockAxis="x" v-model="items" class="SortableList" @input="getChangeLi原创 2019-02-23 11:52:46 · 7628 阅读 · 6 评论 -
微信qq表情输入文本 vue
效果图:父组件<template> <div style="padding:20px;width:90%;"> <div class="textBox"> <textarea :maxlength="maxNum" placeholder="请添加回复文字" v-model="shareT原创 2019-02-27 21:20:24 · 1703 阅读 · 3 评论 -
解决此图片来自微信公众平台,未经允许不可引用
防盗链:'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url='在图片url上加反盗链同时别忘了加 head<meta name="referrer" content="no-referrer"/>原创 2019-03-05 14:22:41 · 3944 阅读 · 0 评论 -
vue使用wangeditor自定义表情替换QQ表情
wangEditor的使用手册https://www.kancloud.cn/wangfupeng/wangeditor3/342612npm 安装就不说了,不指定版本就是最新的,现在是3ps: 每个版本的使用都不太一样,我现在用的是3,这款编辑器主要是用了这个属性contenteditable="true",不懂得话自行百度效果图:vue 页面:<template...原创 2019-03-02 16:32:27 · 3386 阅读 · 6 评论 -
v-model原理
<input v-model="floorTitle"> 相当于通过oninput(用户输入时触发)把表单值给到变量<input v-bind:value="floorTitle" v-on:input="floorTitle=$event.target.value"> ...原创 2019-03-13 16:45:24 · 1646 阅读 · 0 评论 -
vue 项目 api 统一管理
因为项目迁移所以进行api统一管理api 文件夹下index.jsimport request from '@/lib/request.js'import product from './product.js'function ajax (params, options = {}) { if (params) { if (options.method === 'po...原创 2019-03-22 20:46:09 · 2386 阅读 · 0 评论 -
使用 element-ui 的 el-progress 写的进度条
<template> <div class="scaleProgress"> <el-progress :text-inside="true" :stroke-width="18" :percentage="progressNum"></el-progress> </div></template&...原创 2019-04-19 10:50:05 · 30743 阅读 · 8 评论 -
解决vue-cli项目无法用本机IP访问的问题
在我们的config目录下有一个index.js, 找到dev对象的host属性 将host重新定义为:0.0.0.0即可, 然后重启服务,这样localhost、127.0.0.1、本地IP均能正常访问。原创 2018-08-22 11:58:21 · 1565 阅读 · 0 评论