logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

el-upload上传组件在vue中的应用和踩坑

需求:打开弹窗,点击按钮选择上传一个Excel文件,只能上传.xlsx格式文件,且不超过20M。首先大致画出了界面,因为不需要显示已上传文件列表,所以就el-upload这个组件来说,省了不少麻烦事。dom部分直接上代码:<el-dialog title="导入" :visible.sync="uploadView" @close="uploadView = false"><di

文章图片
#vue.js#javascript
vue+element ui实现表格拖拽功能

需求:vue框架中,使得el-table实现拖拽变更表格顺序的功能。方法:引入插件Sortable.js,其中文API可参考Sortable.js中文网首先利用npm引入插件sortablejs,如图然后直接上代码,api简单易懂易上手:<template><div><!-- 表格 -注意:table必须有唯一key值供拖拽,必须设置row-key拖拽才有效 --&g

文章图片
#elementui#vue.js#前端
el-scrollbar滚动条组件

本篇主要是整理一下element ui找不到的el-scrollbar组件的api,做一个简单的带滚动条的查询工具栏(查询栏表单可自定义插入)。// 导入组件import Scrollbar from 'element-ui'const element = {install: function(Vue) {/** 滚动*/Vue.use(Scrollbar)}}export default ele

文章图片
#vue.js#elementui
uni-app预览图片

uni.previewImage:预览图片,官方API:uni-app官网if (item.sufx === 'jpg' || item.sufx === 'jpeg' || item.sufx === 'png' || item.sufx === 'gif') {// 预览图片 API// uni.previewImage({//current: index, // 预览图片的下标//urls:

文章图片
#前端#vue.js#小程序
uni-app开发小程序,利用scroll-view实现自动滚动至对应数据

scroll-view 组件:可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。官方API:uni-app官网自动滚动到高亮序号(scroll-view的scroll-into-view+对应id值)vue文件内容:dom:<scroll-view scroll-y :scroll-into-view="seqToView"><view

文章图片
#小程序#vue.js#uni-app +1
uni-app小程序利用动画做出左右滑动切换的效果

需求:场景类似驾校刷题,手指从左往右大幅度滑动切换至上一题,手指从右往左大幅度滑动切换至下一题。已答题目直接显示正确与否和答案状态,所选答案不存在后端,后端只保存该题是否答过、答对还是答错的状态。获取题目时避免多次前后端交互,故做成分页形式:交互一次获取10道题目。思考:直接做切换页面虽然效果正确,但是相邻题作答状态无法保留。原本想过使用uView轮播图swiper或者类型组件来做,但是实现后出现

文章图片
#小程序#uni-app#vue.js
uni-app 预览图片

预览图片功能还不完全,未完全在各种移动设备上测试成功

#前端#vue.js#小程序
uni-app预览图片

uni.previewImage:预览图片,官方API:uni-app官网if (item.sufx === 'jpg' || item.sufx === 'jpeg' || item.sufx === 'png' || item.sufx === 'gif') {// 预览图片 API// uni.previewImage({//current: index, // 预览图片的下标//urls:

文章图片
#前端#vue.js#小程序
移动端uni-app拨打电话

需求:点击电话图标,手机打开拨号界面并已复制电话号码官方API:uni.makePhoneCall(OBJECT) | uni-app官网很简单的一个点击事件就可以完成了:<view class="base-icon phone" @click="goPhone(item)"><u-icon name="phone-fill" color="#7CD656" size="26"

文章图片
#uni-app#小程序
Vue深浅拷贝

个人理解,深/浅拷贝其实就是指向性的问题(说法可能不是很准确,话糙理不糙)。浅拷贝:新对象赋值,只是取的旧对象栈中的值,也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已,故会互相干涉。深拷贝:会在堆里边开辟一个空间,存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值,因此指向也各不相同,故不会互相干涉。简单的赋值只是做了浅拷贝,所以才会出现我明明给了b值却连a的值也改变

文章图片
到底了