- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue-codemorror sql模式 并且支持输入 进行关键词提示，在element-dialog/drawer等弹出框中清空处理
vue-codemirro
2023-07-07 10:51:30
505
原创 vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。
2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现 出现该蒙层。
2023-05-18 17:29:28
3480
1
原创 vue2 pc端统一 滚动条的样式 使用插件 perfect-scrollbar，并且封装成指令使用，方便快捷。
【代码】vue2 pc端统一 滚动条的样式 使用插件 perfect-scrollbar，并且封装成指令使用，方便快捷。
2023-05-18 10:43:07
468
原创 vue2 中 data props methods watch computed watch created他们之间的注意事项和关系
watch 和 computed：watch 中的监听函数可以依赖于 computed 中的计算属性，但是 computed 中的计算属性不能依赖于 watch 中的监听函数。props：用于接收父组件传递的数据，必须是一个数组或对象，数组中的每个元素是一个字符串，表示接收的属性名，对象中的每个属性表示接收的属性名和属性值的类型。computed：用于计算属性，根据已有的数据计算出新的数据，可以监听多个数据的变化，只有当依赖的数据发生变化时才会重新计算。
2023-05-12 09:43:12
417
原创 vuecli5.x 创建的vue2项目中 如何在运行时候，自动修复eslint报错
【代码】vuecli5.x 创建的vue2项目中 如何在运行时候，自动修复eslint报错。
2023-05-11 10:56:17
235
原创 vuecli2 脚手架升级到 vuecli5 以及打包部署注意事项
这里引入mixins.scss的原因是 在mixin.scss也使用了scss全局的变量。所以需要交个scss-loader去处理。3. 打包部署 会报不能读取 theme。发现是 variables 取不到theme造成的，目前先注释掉。
2023-05-06 18:03:26
1379
转载 iframe获取父级域名
iframe获取父级域名不跨域：parent.location或top.location跨域：document.referrerfunction getParentUrl() { var url = null; if (parent !== window) { try { url = parent.location.href; } catch (e) { url = document.referrer; } } re
2022-05-06 16:51:39
2304
原创 vue中发现 （适合html）鼠标选中文本复制，如果松开时鼠标位于click包裹的文本上会默认执行click事件
//事件触发时机 onmousedown->onmouseup->onclick，解决方案：利用down到up的时间差，与200ms作比较//加入全局指令onclick-one.jsimport Vue from "vue";export default Vue.directive("dbClick", { inserted(el, binding) { el.addEventListener("click", e => { if
2022-04-26 22:21:01
2159
1
原创 js 根据 指定的年份和指定的月份 来获取该年该月份 下的天数
javascript中获取某月的天数博客分类： javascriptJavaScript 用javascript获取某月天数方法如下： 1.假如你要获取2008/8月份的天数 2.构造一个日期对象：var day = new Date(2008,8,0); 3.获取天数：day.getDate(); 4.好了，你想要的天数已经出来了。getDate()是获取的最后一天，不就是当月的天数吗？注：我们在构造日期对象时，８其实是实际构造的９月份，因为月份是从０开始的。而第三个数０天
2021-12-17 10:49:59
1108
转载 JS中如何比较两个数组，取得数组二相对于数组一新增和去除的元素
var a = [1,2,3,4,5]var b = [2,3,4,6,7]function func(arr1,arr2){ var arr = []; var bool = false; for(var i=0;i<arr1.length;i++){ for(var j=0;j<arr2.length;j++){ //进行优化遇到相同直接跳出循环 同时支持对象比对 if(JSON.stringify(ar
2021-12-15 10:51:41
858
原创 js 使用工厂方法创建多个对象
//当你需要创建多个 属性和方法特别相似的对象的时候---我们可以封装一个函数，来调用这个函数来 快速创建对象。/* 使用工厂方法创建对象 通过该方法可以大批量的创建对象*/function createMyPerson(name, age, sex) { let obj = new Object(); //创建一个新的对象 obj.name = name; // 为新的对象添加属性 obj.age = age; obj.sex = sex' obj.sayN
2021-09-23 14:38:40
94
转载 JS进阶】Javascript 闭包与Promise的碰撞
JS进阶】Javascript 闭包与Promise的碰撞@TOC转载地址—链接地址: 添加链接描述
2021-09-23 10:10:20
104
原创 微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas demo实例和画笔ctx----method中封装了各种绘制的方法*（文字，图片，圆角图片，圆角矩形等,还有利用for循环进行绘制多个圆角文字）*为了方便这里我封装成了一个componentshop-canvas 就是我当前的canvas-----之后的绘图操作都在其中–可以自行更改然后在index.js
2021-09-16 18:11:12
2381
转载 解决js 0.1 + 0.2 = 0.30000000000000004 的位数精度问题
解决js 0.1 + 0.2 = 0.30000000000000004 的位数精度问题parseFloat((0.1 + 0.2).toFixed(10))
2021-09-03 18:46:50
279
原创 vue 使用H5 的canvas 绘制图片
// url---图片地址 x,y 在画布中的位置 width, height 图片的宽度和高度 cavasDom画布drawImage(url, x, y, width, height, cavasDom) { return new Promise((resolve, reject) => { try { let img = new Image(); //绘制时候 放大devicePixelRatio 倍 盒子和绘制canvas 然后css来达到缩放图片的
2021-07-27 18:45:15
1200
原创 vue 适配不同屏幕 使用rem布局
当使用 px进行开发 项目进行到一半的时候，这个时候老板要求进行 rem适配怎么办？？？？？不慌不慌 我们可以使用px 转换 rem的插件比如 安装 npm install postcss-px2rem-exclude --save这个插件的优点是 可以排除第三方ui库 比如vant 不把第三库的样式px转为rem。然后 在项目根目录下 也就是和 vue.config.js同级下创建 postcss.config.js内容如下:module.exports = { plugins:
2021-07-20 10:17:10
304
原创 vue 移动端屏幕适配 使用rem
如果项目已经开发的差不多了，没有用到rem 又要使用rem，你可以使用px转为rem的插件第一个插件 ： 优点: 可以排除第三方ui库的px转remnpm install postcss-px2rem-exclude --save然后在根目录下 和vue.config.js同级下 创建 postcss.config.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {
2021-07-20 10:04:40
157
转载 vue-cli3 + vant + postcss-px2rem-exclude 实现移动端页面
https://www.jianshu.com/p/01c2aa03409dpx自动转成 rem的插件 而且还可以排除 第三方ui库的转换1: npm i postcss-px2rem-exclude -S2： 在项目根目录 （src）下，新建 postcss.config.js 文件：```handlebarsmodule.exports = { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclud
2021-07-19 11:59:43
287
转载 Vue ElementUI 如何修改消息提示框样式
一、前言在窄屏模式下（移动端），提示框的宽度太宽，希望降低宽度。应当如何修改 ElementUI 的样式呢？二、情景还原// 弹出注销提示框this.$confirm('确认注销吗?', '提示', {}).then(() => { this.$message({ message: '已成功注销', type: 'success' })}).catch(() => { /* 用户取消注销 */ })...<style scoped> ..
2021-07-16 16:48:54
2498
1
转载 vue引入图片的几种方式
Vue引入图片的几种方式情况1：图片在/public目录下把图片放到与index.html同级的目录下方式1因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片<!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --><img src="login-bg.png"><!-- img标签引入图片：'/' + 图片名称，这种属于绝
2021-07-16 16:34:29
31738
转载 通过CSS实现 文字渐变色 的方式
通过CSS实现 文字渐变色 的两种方式说明这次的重点就在于两个属性，background 属性这两个属性分别是两种实现方式的关键。解释方式一效果图这里写图片描述代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { background: linear-gradient(to right, red, b
2021-07-16 15:46:33
261
转载 element UI 全局修改 主题颜色
在使用vue+elementUI开发后台管理项目时，需要修改默认颜色，步骤如下。步骤：1: 进入项目文件夹 cd 你的项目文件夹名称2: 全局安装主题生成工具 cnpm i element-theme -g3: 在项目中安装chalk主题 npm i element-theme-chalk -D4: 初始化变量 et -i 【执行该命令的时候报错了】5:解决方法:执行命令 cnpm install element-themex -g之后再执行: et -i 就可
2021-07-16 13:52:21
4068
转载 canvas前端跨域的解决方案(不行你找我)
链接地址: https://sushome.us/front-end/canvas/293/)一个前端操作canvas出现跨域问题的解决方案出现现象：前端项目中需要使用canvas对网络图片进行操作，当使用到toDataUrl等操作就会报错：SecurityError: the operation is insecureUncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted can
2021-07-13 17:39:50
794
转载 vue-cli3 项目中 怎么在每个vue组件中 引入全局的scss变量
首先报错：1： 我们需要在vue.config.js进行配置module.exports = { productionSourceMap: false, // 整个项目使用全局的 scss变量 css: { loaderOptions: { sass: { prependData: ` // 进行配置时候 有新旧之分 @import '@/styles/variables.scss'; //这里注意 有个;不会还会报错
2021-07-13 10:29:12
938
转载 css 单行文本和多行文本换行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-box;-webkit-box
2021-07-08 16:52:32
600
原创 vue 自己封装符合自己业务场景的类似瀑布流布局的组件
1： 首先创建一个组件 放到全局componets文件下如图所示:2： 在我司大佬提示之下。由于不知道图片的宽和高，在布局的时候，采用如果页面中要显示两列的话，那么我们就把原来的数组拆分成两个数组。然后分别向拆分的数组中，存放数据3： 比如页面放两列 我们需要把原数组拆分成两个数组， 当我们遍历原数组的时候，对 2 取余后的值，分别是0和1，那么就需要把这时候原数组中的对象，分别放到新数组0和 新数组1中。4： 先看我的 props: { list: { // 这里我传入原数组
2021-07-08 11:02:46
139
转载 Vue中子组件调用父组件的方法，这里有三种方法提供参考
Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export default { c
2021-07-07 11:54:56
606
原创 vue 基于原生JS实现等宽瀑布流布局
vue 基于原生JS实现等宽瀑布流布局首先js 实现登录瀑布流原理1： 通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的top值、left值，就能让它排列。注意： 图片的真实高度500（px） 真实宽度 300(px) 可能很高 比如我们规定在我们容器盒子中 图片盒子等宽 值为200（px）, 我们需要手动去计算每个图片在我们容器中的高度， 300 / 500 = 200 / 图片盒子所在容器高度； 确保图片的宽/高的 比例正确。图片正确展示。2：然后规定我们
2021-06-28 12:32:05
279
原创 vue中 使用 js 递归异步路由表 根据传入的角色数组userRoles 生成最终该用户权限下 能访问的权限路由
vue中 使用 js 递归异步路由表 根据传入的角色数组userRoles 生成最终该用户权限下 能访问的权限路由const asyncRoutesArr3 = [ { path: '/permission', component: Layout, // &&&&你可以选择不同的layout组件, name: 'Permission', meta: { title: 'Permission', icon: 'lock
2021-06-24 17:18:48
650
转载 vue-transition动画
vue-transition动画官网API: https://cn.vuejs.org/v2/guide/transitions.htmldemo点击显示与消失复制代码 Toggle hello 复制代码一、transition使用 运动东西(元素，属性、路由....)class定义：.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态).fade-enter-active{ }
2021-06-18 15:22:14
69
转载 vue-cli3 配置多环境打包
vue-cli3 配置多环境打包由于公司项目需要多环境，就研究了一下vue-cli3的多环境配置，这里和大家分享一下vue-cli3多环境配置方法首先我们先看看 vue-cli环境变量和模式，通过官网我们可以发现 vue-cli 提供了三个模式（test、development、production）而每种NODE_ENV下面可以配置多个环境变量我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量我们可以通过传递 --mode选项参数为命令覆写默认的模式，使用自己的环境变量了解基本情况之
2021-06-17 19:11:46
395
原创 js中 判断数组对象 新旧数组 旧数组相对新数组增加 删除数据
/**@description: 判断新旧数组 返回新数组相对老数组删除数据@param {*} Array@return {*} Array/export function returnDeleteData(oldArr, newArr) {var obj = {};var index; //记录老数组中的索引for (var i = 0; i < oldArr.length; i++) {if (newArr.some(item => JSON.stringify(old
2021-06-15 11:24:09
1254
原创 通过js和jq的学习自己 封装一个message提示的插件
自己封装一个message的插件效果要求如下html代码块如下：分别有几个按钮，点击不同的按钮会显示不同的提示信息 <input type="button" value="信息提醒" class="btn-info"/> <input ...
2019-09-21 20:28:57
685
原创 js和jq方法实现手风琴案例
手风琴的实现之js和jq代码的分别实现html和css代码：<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"&g...
2019-09-12 15:06:35
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人