- 博客(16)
- 收藏
- 关注
原创 vue pc 端滚动翻页 (浏览器滚动条)
import { throttle } from '@/utils'import { REACH_BOTTOM_DISTANCE } from '@/constants/index'data() { return { onResize: throttle(this.resize, 100), // 滚动条事件 page: 1, pagesize: 20, isBottom: false, // 是否到底部 当请求无数据时 isFetch:false // 请求
2021-06-23 14:47:16 809
原创 vue 动态添加下拉选择框
效果图废话不多说 上代码<!-- 动态表单 --><div> <el-form :model="ruleForm" ref="myForm"> <!-- 动态生成的部分 --> <div class="moreRules"> <div class="moreRulesIn" v-for="(item, index) in ruleForm.condition" :key
2021-05-06 16:56:26 3256 1
原创 input数字输入框type=number 火狐浏览器如何隐藏上下箭头(vue )
话不多说 直接上代码首先在项目找到main里引入的公共重置css文件 如styles/index.css添加以下代码/*在Chrome下移除input[number]的上下箭头*/// .no-number::-webkit-outer-spin-button,// .no-number::-webkit-inner-spin-button {// margin: 0;// -webkit-appearance: none !important;// } // .no-numbe
2020-11-04 10:44:22 1858 1
原创 vue 富文本 v-html 点击图片 放大预览展示功能
html部分 注册方法<!-- 新增点击富文本图片放大功能 --> <p class="content-detail" v-html="articleContent" @click="showImg($event)"></p>放大展示区dialog<!-- 富文本图片放大 --> <div class="imgDolg" v-show="imgPreview.show" @click.s
2020-09-23 11:36:32 2835
原创 随笔去除a 标签默认样式大全
/*包含以下五种的链接*/ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none; } /*鼠标划过(停留)的链接*/ a:hover...
2020-09-11 13:41:41 624
原创 uni-app canvas 手写签名板功能实现(vue)
仅仅为了记录下踩过的坑 如果能帮到你 请留言点赞 哈哈话不多说上代码<template> <view> <view class="signature"> <view id="canvas"> </view> </view> <u-button id="clear" @click="clear">重新签名</u-button> <u-butto
2020-08-21 11:52:40 1933
原创 uni-App 移动端伪元素定位 样式
&::before { content: ''; height: 0; width: 0; display: inline-block; position: absolute; right: -4rpx; bottom: -20rpx; border-width: 28rpx 0 28rpx 28rpx; border-style: solid; border-color:transparent transparent
2020-08-13 16:35:59 1571
原创 vue导航守卫 根据登录权限不同显示不同菜单
// 全局路由守卫 router.beforeEach((to, from, next) => { // console.log('====beforeEach========'+ to.path) var hasToken = Cookies.get('token') var userId = sessionStorage.getItem('id') if(to.path === '/login'){ next() return
2020-08-03 10:27:03 2097
原创 PC端后台管理导入功能(ant-design-vue)
样式自己调节 上代码// 门店批量导入 //点击下载模板 downLoad() { window.location.href = '/门店导入模板.xls' }, addExcel() { this.dialog = true }, uploadChange(info) { const status = info.file.status; // console.log('文件名',info.file); .
2020-07-31 11:05:40 933 1
原创 ant-design-vue 动态添加input行及动态校验
这里涉及到动态input表单校验 我仅给自己记录一下<!-- 动态添加行 --> <a-form-model-item :wrapper-col="newWrapper" style="padding-left:63px;padding-right:40px;" v-for="(item, index) in form.information" :key="item.key" > <a-
2020-07-21 13:52:27 6666 3
原创 Vue PC端后台表格Table如何导出Excel (elment-ui/ant-design-vue 组件库都适用)
(前端操作)vue PC 端 表格Table导出Excel话不多说 上图 上代码注册点击事件 @click=“exportToExcel”import FileSaver from 'file-saver'import XLSX from 'xlsx'引入插件(yarn或者npm 自行下载 不多说了)// 导出 exportToExcel () { let et = XLSX.utils.table_to_book(document.querySelector('#my
2020-07-13 16:16:33 1769 6
原创 vue项目PC端如何适配不同分辨率屏幕
本文为CSDN博主「楚猴修」的原创文章原文链接:https://blog.csdn.net/weixin_43607164/article/details/100512220我只是记录下 防止以后遇到弄丢配置前言项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位前方有坑:UI框架部分组件使用JavaScript将css作为内联
2020-07-09 14:25:25 4736 7
原创 ant-design-vue 如何在table表格外的按钮实现全选, 反选功能
效果如图这里是ant-design-vue table组件 详情见文档 重点左侧勾选框 你需要配置 :row-selection="rowSelection"如图它就是通过控制selectedRowKeys :[ ] 来控制选中 不选中状态仔细想了下这些方法不用导出 就放在Computed 挺好这样就完成全选功能了 重点是上图 如何将数据的id拿出来存到新数组arr里 然后赋值 其实也没啥...
2020-07-03 18:42:02 4767 4
原创 随笔 弹窗 二维码生成及图片下载
一、qrcode-vue模块 该模块是用来动态生成二维码的vue模块插件, <qrcode-vue></qrcode-vue>的底层其实是一个<canvas></canvas>标签。 要想使用qrcode.vue插件,需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev, 在这里我举一个例子。 <el-col :span="6" class="item"> <di
2020-07-01 18:28:58 421
原创 ant-design-vue 踩过的坑系列
使用Vue开发ant-Design-vue 可能经常会遇到的问题之如何动态添加n行 input框 且 实时获取数据**~~~~~~~~~ 效果图如下 ~~~~~~~~~~ **点击增加按钮 注册添加add事件 详情介绍可以参考UI组件库的form组件这里用的是ant-design-vue 的form组件add和删除行的方法export default {data () {return {form: { information: [ ] }}}}~~组件具体用法请参考ui组件
2020-06-24 18:59:13 1065
原创 Js为什么是单线程的?
Js为什么是单线程的?JavaScript 为什么是单线程的,那什么是单线程?就是代码必须按照顺序执行,同一时间只能做一件事。JavaScript 作为浏览器脚本语言,JS的主要用途是与用户进行交互,以及操作DOM,这决定了它只能是单线程的,否则会带来很多复杂的同步问题。HTML5提出的web worker标准,它允许JS有多个线程,但其实子线程还是受主线程控制的,而且不得操作DOM,所以JS是单线程的本质并未改变。...
2020-06-02 15:17:27 276
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人