![](https://img-blog.csdnimg.cn/20201217092625321.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
主要是使用vue过程中的小结
Dreamy smile
一个不懂代码的普通开发者
展开
-
vue2切换页面回到顶部
【代码】vue2切换页面回到顶部。原创 2022-10-10 11:11:44 · 477 阅读 · 0 评论 -
vue2 antdesign menu 渲染多级菜单
示例数据//path 自行配置const menu = [ { title: '示例1', icon: 'laptop', path: '', children: [ { title: '示例1-1', icon: 'laptop', path: '' }, { title: '示例1-2', icon: 'laptop', path.原创 2021-11-04 17:51:59 · 1787 阅读 · 0 评论 -
antdesign-vue table合并列
合并的方法const temp = {};const mergeCells = (text, array, columns) => { let rowSpan = 0 if (array.length == 1) { rowSpan = 1 } else { if (text !== temp[columns]) { temp[columns] = text array.forEach((i.转载 2021-10-21 20:41:20 · 790 阅读 · 0 评论 -
vue2 elementui日期时间选择器
设置日期选择器(范围)只能选择当前月份的日期<el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 210px" :clearable="false" :picker-options="pickerOptions.原创 2021-07-29 11:54:58 · 1206 阅读 · 0 评论 -
前端rem适配
原生或jquery写一些简单的下载页面、展示页面等…new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认字体大小 _self.widthProportion = function() { var p = (document.body && document.body.clientWidth || document..原创 2020-05-13 10:48:11 · 543 阅读 · 0 评论 -
vue仿elementui自定义一个v-pageloading指令,开箱即用
创建一个loading文件夹。包含loading.vue、loading.js、index.jsloading.vue 写布局及css样式实例代码<template> <div class="loading-container" v-show="loadingShow"> <div class="pageloading"> <span></span> <span.原创 2021-01-14 16:35:07 · 442 阅读 · 0 评论 -
前端组件拖拽以及自定义组件布局demo(基于vue2实现)
这篇文章简单介绍前端(vue)里组件拖拽以及拖拽完成以后组件自定义排列的的写法。主要介绍思路以及实现方式(会一直更新这个功能,直到我自己把它做完善)。组件的放大缩小以及拖拽借助一个不错的插件vue-grid-layoutgit文档:https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md这个插件定义的某一个元素的宽高是利用倍数计算宽高以及位置,在使用的时候可以自己先去定义一个栅格的背景,我做的是.原创 2020-12-16 18:50:39 · 21081 阅读 · 24 评论 -
uniapp/vue使用jsencrypt加密
npm下载jsencrypt把jsencrypt文件放到components下新建jsencrypt.js文件import JSEncrypt from '../components/jsencrypt';let publicKey = '自行获取';function RSAencrypt(pas){ //实例化jsEncrypt对象 let jse = new JSEncrypt(); //设置公钥 jse.setPublicKey(publicKey); return jse.e.原创 2020-05-13 09:46:55 · 4223 阅读 · 3 评论 -
移动端点击输入框,弹出键盘,底部被顶起问题(vue/uniapp/小程序)
1.监听页面高度变化<!--1.先在 data 中去 定义 一个记录高度是 属性-->data () { return { docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度 footer:true //显示或者隐藏footer }.原创 2020-05-13 09:32:55 · 3363 阅读 · 0 评论 -
vue axios/uniapp 简单的请求(拦截)封装示例
axiosnpm 下载 axios新建http.js(随意)import axios from 'axios';import qs from 'qs';// const baseUrl = ''; //配置接口地址const baseUrl =''//线上//添加请求拦截器axios.interceptors.request.use((config) => { //在发送请求之前做某件事 //... return config;},(error) =原创 2020-05-12 16:36:56 · 3463 阅读 · 0 评论 -
vue 上传图片到oss / uniapp上传图片到oss
vue新建js文件let OSS = require('ali-oss'); //npm 下载ali-osslet client = new OSS({ /*需要自己去申请*/ accessKeyId: '', accessKeySecret: '', bucket: '', region: '',});export async function put (obj) {// 'tu/'=>在oss上的保存图片的文件夹(自定义一个文件夹名) le原创 2020-05-12 17:13:42 · 844 阅读 · 0 评论 -
Vue组件常见的六种通信方式
1.props子组件使用props 接收父组件传递的值,子组件通过 $emit ,让父组件接收事件,改变父组件的data里面的值;<!--父组件--><template> <title :title='title' @change='changeHandle'></title></template><script> export default{ data(){ return{转载 2020-05-12 17:30:49 · 315 阅读 · 0 评论 -
vue -- pc、移动端图片裁剪
npm 下载 vue-cropper引入 import VueCropper from ‘vue-cropper’git https://github.com/xyxiao001/vue-cropper<div class="po_dia" v-if="ispop" > <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :output.原创 2020-05-13 09:18:57 · 605 阅读 · 0 评论 -
vue(h5+app分享微信、朋友圈、保存图片)
h5+api(调用手机的一些功能) http://www.html5plus.org/doc/zh_cn/android.html分享海报(image) shareWx(scene) { //scene=> 'WXSceneTimeline'(朋友圈)、'WXSceneSession'(微信)、pic=>图片地址 let pic = this.pic_img let msg = { type: "image", p.原创 2020-05-13 11:25:28 · 5056 阅读 · 3 评论 -
前端(vue)实现图形(拼图等)验证码
一、第一种vue移动端(PC端)图形验证码vue2-verify前往地址常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。滑动验证码slide 通过简单的滑动即可完成验证,应用与移动端体验很好。拼图验证码puzzle 拼图。选字验证码pick 通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上。<Verify @success="onSuc原创 2020-07-03 14:33:55 · 2722 阅读 · 0 评论 -
Vue实现pc/移动端图片预览、放大、缩小、旋转的效果
实现pc/移动端图片预览、放大、缩小、旋转的效果git => https://github.com/mirari/v-viewer使用1.npm install v-viewer2.在全局引入或局部引入全局引入`import ‘viewerjs/dist/viewer.css’;import ‘…/static/css/defaultstyle.css’;`Vue.use(Viewer);<viewer :images="images"> <i.原创 2020-10-22 14:05:43 · 1721 阅读 · 0 评论