- 博客(27)
- 收藏
- 关注
RSS订阅
原创 element ui实现手动上传图片，且只能上传单个图片（图片可预览），并能覆盖上传
手动点击上传，只能传一张，图片可预览上代码：html上传：<el-form-item label="图片" prop="HFname"> <el-upload class="upload-demo" :action="' '"//手动上传 置空 accept=".png"// 限制上传图片类型 :auto-upload="fal
2020-06-30 11:17:31
6024
原创 vue中element下拉框数据有值,但是选中后框里不显示
问题图片：问题：下拉选择能打印到数据，但是选中后框里不显示值；原因：出现这个问题 是因为下拉框数据是v-for接口请求来的数据，因为数据层次太多，render函数没有自动更新解决方法:在chenge事件里手动强制刷新值上代码：<el-select v-model="platformName" @change="selectPlatform"> <el...
2020-04-22 11:31:47
7347
1
转载 vue-cli项目，更改浏览器logo
1、外层主页面index.html2、build下webpack.dev.config.js配置原文：https://www.cnblogs.com/xxflz/p/12788274.html
2021-07-14 13:50:56
296
转载 微信小程序中的图形验证码
可以在utils中新建一个mcaptcha.js代码如下module.exports = class Mcaptcha {constructor(options) {this.options = options;this.fontSize = options.height * 3 / 6;this.init();this.refresh();}init() {this.ctx = wx.createCanvasContext(this.options.el);this.ctx.setT
2021-07-14 10:53:36
1639
转载 静态页面调试JS出现跨域问题
在chrome浏览器或者firefox浏览器里，由于安全限制的原因，本地调试JS，如果不配服务器环境而直接打开页面，那所有的AJAX操作会抛出下面错误：XMLHttpRequest cannot load file:///D:/file.html. Origin null is not allowed by Access-Control-Allow-Origin.Origin null is not allowed by Access-Control-Allow-Origin.的意思就是由于安全原
2021-07-14 10:44:08
541
转载 微信小程序弹窗禁止页面滚动的实现代码
在小程序弹窗时，外部页面禁止滚动， 可以在最外部容器设置catchtouchmove但是如果弹窗内部也需要滚动，需要用scroll-view包裹，并设置scroll-ycatchtouchmove需要接收个方法，不然会一直警告<view class="box">占位</view><view class="pop" catchtouchmove="touchMove"> <view class="popbg"></view> <v.
2021-07-14 10:40:32
705
转载 小程序日历日期范围选择实现可跨月份
html<view class="calendar"><view class="section"><view class="title flex-box"><view bindtap="past"><text class="iconfont icon-zuo"></text></view><view class="title">{{currentShow}}</view><vie.
2021-07-14 10:26:46
870
原创 vue li 设置获取本地ip打开，自动打开
1.自动打开浏览器只需要在config/index.js里找到autoOpenBrowser将其设为true即可2.获取本地ip在config/index.js 顶部添加const os = require('os')let localhost = ''try { const network = os.networkInterfaces() localhost = network[Object.keys(network)[0]][1].address} 再找到host将其改为hos
2021-06-03 11:11:36
90
原创 微信小程序实现类似picker多选
版本迭代picker单选改为多选，官方文档只有多列选择器没有多选，自己写呗最终实现效果图实现思路：1.自己画模态框2.遍历初始数据push新增参数checked:false3.点击改变checked值来实现多选上代码：whtml：modalName变量控制模态框显隐 <view class="picker flex" bindtap='radioChange'> <view class="cen">等级 <view class="count
2021-04-01 18:40:31
2285
1
原创 wx小程序实现左滑删除
实现一、wxml布局这里我是先用了一个大盒子包裹小盒子，然后小盒子里面进行左右布局（左边为内容部分，右边为删除按钮）的方式实现的<view class="cart"> <view > <!-- 通过 isTouchMove 的值来对应移动位置--> <view class="item {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:key="item" wx:f
2021-03-16 11:05:46
109
原创 vue更改默认滚动条样式
vue更改默认滚动条样式用的是 vuescroll安装模块npm install vuescrollmain.js中引入：import vuescroll from "vuescroll";//引入vuescrollimport "vuescroll/dist/vuescroll.css";//引入vuescroll样式Vue.use(vuescroll);//使用使用：( <vue-scroll></vue-scroll>标签嵌套在会出现滚动内容的外面 )dat
2021-02-25 11:33:49
421
原创 vue中，xml字符串格式化展示在页面
需求：后端返回的xml数据，格式化后展示在页面 如图：html： <div class="xmlContent"> <xmp> <vue-scroll :ops="ops" style="width:100%;height: 478px;" ref="xmlvs"> <div v-text="result" class="xml"></div> </vue-scroll>
2021-02-25 10:41:57
1844
2
转载 vue单页应用首次加载太慢之性能优化
问题描述：最近开发了一个单页应用，上线后发现页面初始加载要20s才能完成，这就很影响用户体验了，于是分析原因，发现页面加载时有个vendor.js达到了3000多kb，于是在网上查找了一下原因，是因为我打包的时候把所有第三方依赖都打包放进去了；要怎么分离出去呢，看下面步骤：一、解决打包后vendor.js 很大，导致上线后页面首次加载速度异常慢：vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。
2021-02-25 10:22:22
426
1
原创 Vue——element table 后端排序实现
element自带的排序是当前页排序，实现全部数据排序的话，需要走接口进行后端排序1.表格中需要排序的那栏，将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据<el-table @sort-change='sortChange'> <el-table-column sortable='custom' prop="createTime" label="创建
2020-10-22 10:36:15
988
转载 Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色
先在Table 表格 上加 上属性<el-table :data="tableList" border :cell-style="columnStyle"> <el-table-column type="index" label="第一列" width="50px"></el-table-column> <el-table-column type="index" label="第二列" width="50px"><
2020-10-22 10:23:36
9785
1
原创 微信小程序获取当前年月日
getNowDate（）{ var timestamp = Date.parse(new Date()); var date = new Date(timestamp); //获取年份 var Y =date.getFullYear(); //获取月份 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //获取当日日期 var D = date.get
2020-10-22 10:16:56
2114
原创 vue中get请求传参是数组，变为字符串
问题：vue项目中，用axios封装请求数据时，get请求传递参数为数组时，get拼接url并不能把参数正确的传递过去，解决：get传参需要前面自己转一下传参的格式最初错误传参let provinces= ['1', '2', '3']axios.get('/gateway/xxx', { params: { ID: 001, provincesData: provinces, } })// 上面的请求是 '.../user?ID=001&pro
2020-10-22 10:04:43
4103
2
转载 vue 嵌入式微信扫码登录(样式可自定义)
1.使用vue插件https://www.npmjs.com/package/vue-wxlogin// 安装npm install vue-wxlogin --save-dev// 组件中引入import wxlogin from 'vue-wxlogin'...components: { wxlogin }...2.html中使用<wxlogin :appid="$store.getters.wechat_app_id" :scope="'snsapi_login'"
2020-08-27 10:35:22
1934
原创 vue手动上传excel
手动上传excel和上传图片类似，只是格式不一样html：<el-upload class="upload-demo inline-block" action="string"//随便填 size="mini" accept=".xls, .xlsx"//限制上传类型 :http-request="httpRequest" :file-list="showExcelist"//上
2020-06-30 11:39:29
458
原创 vue下载后端给的excel（非前端生成excel）
vue下载后端给的excel主要是请求回来文件流的处理html： <el-button size="mini" @click="downexcel">模板下载</el-button>js:downexcel() { axios({ method: "get", url: SERVER_BASE_URL + "invoice/saledetail/tempDownload",//请求后端地址SERVER_BASE_URL自己的端口
2020-06-30 11:25:49
222
转载 vue中elementUI表格数据导出下载为xlsx格式的excel文件
转载bamboozjy原文链接1.安装依赖：npm i file-saver --savenpm i xlsx --save2.在需要的地方引入这两个插件：import FileSaver from "file-saver";import XLSX from "xlsx";3.在点击事件中导出和数据：mytable为表格的id名，sheet.xlsx为导出的文件名html：<el-table id="mytable" ref="multipleTable"
2020-06-30 10:52:20
543
原创 vue父组件向子组件传对象，不实时更新解决（手动，不使用watch）
1.父传子对象，用watch并不好使在子组件中监听你要的数据，但是监听对象亲测并不好使。2.用v-if实现手动实时更新父组件：html&data: <Invoice :oneData="oneData" v-if="show" />data:{ someShow: false, oneData:{}, }js://写在父组件的methods refesh: function() { this.Show = false; var _this
2020-06-30 10:44:59
1047
原创 vue项目PC兼容移动端
做完的pc项目要求兼容移动端，常规操作的话是新做一个webapp后再来回跳转，当前pc项目没有太多的交互和复杂的页面，所以决定在一个项目里进行兼容适配1.新建两个组件，pc端页面组件，m端页面组件2.页面写个方法判断是pc端还是移动端（可在全局写）methods: { //判断 _isMobile() { let flag = navigator.userA...
2020-04-27 18:12:49
5667
原创 vue中elementUI组件el-dialog嵌套 样式问题
遇到的问题: 1.内外dialog共两层遮罩，内层dialog被灰色遮罩遮盖， 2.内层dialog继承了外层dialog的样式解决：1.在内层dialog上添加append-to-body属性，2.内层dialog样式修改，在内层dialog外包一层div并加class类 *不要在有scoped的style标签下写，因为是局部的，样式不会生效* <style> ...
2020-04-20 15:12:50
4891
1
原创 vue中elementUI上传一张图片后，隐藏上传按钮
效果图：上传图片前有上传按钮上传一张图片后，隐藏上传按钮我用的是是手动上传的照片墙组件1.data里面初始值： hideUpload: false,2.el-upload里面绑定一个占位class： :class="{hide:hideUpload}"3.onChange里面（文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用）： this.hideUploa...
2020-04-20 14:56:31
4055
5
原创 vue中elementUI组件Upload实现手动上传图片
效果图：引入Upload组件； <el-upload class="centerImg" :class="{hide:hideUploadIcon}" :action="' '"//请求地址，手动上传写为空 list-type="picture-card" :on-preview="handlePictureCardPreviewIcon" :o...
2020-04-20 14:39:36
5672
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人