vue
杨同学*
你好,我是杨同学。
展开
-
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题
绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题原创 2024-05-06 09:18:08 · 2268 阅读 · 2 评论 -
【vue】vue项目批量下载二维码,且打包成压缩包.
来一个el-dialog。原创 2023-11-11 11:15:00 · 439 阅读 · 2 评论 -
【vue+el-upload+vue-cropper】vue图片上传,vue-cropper图片裁剪后上传
preview-src-list=“item.fileList” 预览的图片列表,同:file-list=“item.fileList”:on-change=“onChange.bind(null, item.index)” 不加.bind会报错,:file-list=“item.fileList” 上传的图片列表,数组对象格式[{url:xxxx}]预览,删除,裁剪,三个按钮,目前功能与预览无关,预览功能有空再另写吧。用的el-upload加el-image组件。下载vueCropper插件。原创 2023-11-10 15:29:00 · 526 阅读 · 4 评论 -
【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载
局部loading有时候会出现定位不准情况,会定位到全屏loading。可以看到首先是局部的loading,加载完后变成了全屏的loading。可能父元素类名会有差别,只要是滚动dom的父元素就可以了。记录一下平常遇到的小bug 下期再见!target绑定需要加载局部loading的dom。解决办法就是给举报loading的元素加一个。原创 2023-08-10 10:34:58 · 623 阅读 · 5 评论 -
vue项目表格导出为Excel和PDF
2,新建exportExcel.js文件。2, 新建exportPdf.js。3,在需要导出的页面里面写。4,在需要导出的页面使用。3,main.js挂载。原创 2023-02-23 13:06:28 · 1041 阅读 · 1 评论 -
2,【electron+vue】 构建桌面应用——常见的功能及问题(修改桌面图标,软件图标,窗口图标,图标不显示问题,影藏默认菜单栏,开机自启,手动或被动关闭应用)
1.首先这些图标必须是结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是,大家自行搜索安装使用哈,给大家看下大概的界面:3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方这是修改应用左上角的图标4,修改桌面的图标, .exe前面的图标。原创 2022-09-27 17:05:07 · 2506 阅读 · 2 评论 -
1,【electron+vue】 构建桌面应用——创建electron项目(包括创建,运行,打包碰到的问题)
1,首先你得有一个vue-cli 创建的vue项目.我们在vue项目的基础上添加一下插件.就变成了electron项目.如何创建vue项目我这里就不过多赘述了,网上有很多.问题2: 如果打包失败,右键打开项目所在目录,将含有中文的文件夹名改成英文的就可以了,如下图所示。到这里就完成了创建,运行,打包这三步.下篇文章咱们讲讲electron一些常用的基本功能。问题3: 如果打开白屏,找到router,mode的模式改为hash就可以了。第一个是免安装的,直接双击运行就可以,但是需要依赖和它同级的文件。原创 2022-09-26 13:34:39 · 1092 阅读 · 0 评论 -
vue项目调用多个不同的ip接口
到这里就可以看出不一样了,如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec。思路:其实就是多写几个request.js文件罢了,或者在一个文件里面多写几个响应拦截和请求拦截.灵感来源: 项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口。你会发现这两个文件不是一样的吗,对,就是一样的,其他就是正常的了,哪个页面调用就正常调用就可以了..你也可以放到一个文件里面.都一样....原创 2022-08-08 14:04:54 · 1984 阅读 · 5 评论 -
datav中使用dv-scroll-ranking-board组件获取接口动态赋值,空数据展示优化
效果图1,安装datavcnpm i --save @jiaminghi/data-view2.全局引入main.jsimport dataV from '@jiaminghi/data-view'Vue.use(dataV)3,使用<dv-scroll-ranking-board ref="scrollBoard" :config="config" style="width:500px;height:500px;"/>export default { data().原创 2022-03-18 17:24:25 · 5827 阅读 · 13 评论 -
【echarts】的右上角工具栏点击restore恢复按钮图表空白问题
"export 'default' (imported as 'echarts') was not found in 'echarts'* echarts/lib/label/labelStyle in ./node_modules/[email protected]@echarts-gl/lib/component/common/LabelsBuilder.js, ./node_modules/[email protected]@echarts-gl/lib/component/grid3D/Grid3原创 2022-02-28 09:37:06 · 3821 阅读 · 12 评论 -
“path“ is required in a route configuration.
F12黄色警告提示,addRoutes()这个方法以及弃用了,现在用addRoute(),但是去掉了s之后,又有新的问题。"path" is required in a route configuration.这个是因为现在路由需要返回数组格式。之前是对象包裹的,解决:在router文件夹里面的index.js里面写。const routes = [ {// 首页 path: '/Home', name: 'Home', component: () => im..原创 2022-01-06 16:52:24 · 3565 阅读 · 3 评论 -
禁止用户缩放页面(ctrl+滚轮或者Ctrl+“-”“+”)
1.移动端H5<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">2.pc端,原生 <script> document.addEventListener('mousewheel', function (e) { e = e || window.event; if ((e.wheelDelt原创 2021-12-28 10:47:03 · 1742 阅读 · 3 评论 -
vue回车登录,登录完销毁回车事件。
1.在登录页面写methods:{ // 回车登录 keyDown(e){ if(e.keyCode == 13){//13是回车键的keycode if(this.ruleForm.usename != '' && this.ruleForm.password != '') { this.logoin() }else { this.submitForm('ruleForm') .原创 2021-12-24 13:54:37 · 1159 阅读 · 2 评论 -
1,vue播放视频之—引入.m3u8后缀的hsl视频流
效果图:我这个是引入js的方式播放的。也可以用npm直接下载hsl.sj进行引入1.public里面index.html页面引入对应的js<script src="./jquery.min.js"></script><script src="./ezuikit.js"></script><script src="./hls.min.js"></script><script src="./jsPlugin-1.2.0.原创 2021-12-22 16:32:52 · 2363 阅读 · 2 评论 -
vue生成二维码插件
效果图1,下插件cnpm i vue-qr --save2,在需要的页面引入,或者全局引入,我这里是局部引入,因为只有一个页面用到了。html <vue-qr :text="text" :size="200" :margin="0" />jsimport VueQr from 'vue-qr'export default { components:{ VueQr }, data(){ return{ text:'',//二维码内容 .原创 2021-11-16 09:31:03 · 1435 阅读 · 6 评论 -
4,uniapp功能之——APP更新,打包上线安装后的app的随时更新,页面实时显示当前更新的百分比
App.vue这文件都有吧,当然,也可以写在其他页面,看项目需求了。思路:第一个方法调接口返回来的是版本号和新的版本链接,将这个版本号与当前app的版本号进行比较,接口返回的版本号大于当前的版本号就弹窗提示用户有新版本了,要进行更新了,弹框有两个按钮,“立即更新”, “以后再说”],立即更新就跳转链接进行更新,链接的地址就是接口返回过来的地址,赋值就可以了,以后再说就代表用户不更新,不更新可以让他继续使用这个软件,我这里是强制更新,不更新就退出软件,第二个方法就是下载新版本app了,等他下完就可以进行安原创 2021-11-09 14:32:56 · 1399 阅读 · 2 评论 -
vue常见的传值方式,子传父,父传子,兄弟之间,多个子传一个父,多个父传一个子,兄弟之间传值,事件中央总线传值
1,父传子父组件:<template> <div> <abnormal-warning :datas="3"></abnormal-warning> // 1子组件 </div></template><script>import AbnormalWarning from '../../components/threshold/AbnormalWarning.vue' //2,引入子组件export原创 2021-09-14 11:06:11 · 673 阅读 · 5 评论 -
vue中css的用var()挂载在全局使用
1,见一个.css文件,例如:2,在需要的地方引入改css文件,并使用该变量控制台打开可以看到你定义的这些样式就说明引入成功了没了,结束了,是不是很简单呐,如有问题,欢迎留言。最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~...原创 2021-09-03 09:59:13 · 978 阅读 · 4 评论 -
element ui的select下拉框实现多选数据回显
效果图:思路:v-model绑定的是一个数组,里面包含你所选择的值,拿到的是一个串数字,需要转为字符串,再转按逗号分隔成数组进行赋值。代码: <p class="adzjgs"><span>护士姓名:</span> <el-select multiple v-model="mnurseId" :multiple-limit=3> <el-option :value="item.id" v-fo原创 2021-08-03 09:28:44 · 5486 阅读 · 9 评论 -
vue-amap动态循环添加多个点,点击点出现弹窗信息
效果图:思路:通过后端的接口数据循环遍历出点的经纬度、弹窗信息,依次push进一个空的数组,最后将这个数组赋值给data里面定义的变量。话不多说上代码:HTML <el-amap-marker v-for="marker in markers" :key="marker.index" :position="marker.position" :events="marker.events" ><原创 2021-07-19 09:16:19 · 2328 阅读 · 10 评论 -
vue前端通过Base64加密解密
效果图:方法:1.下依赖cnpm i js-base64 --save//没有淘宝镜像就用npm,一样的,就是下载慢点而已2.在需要的地方引入//在单个页面引入let Base64 = require('js-base64').Base64;let str="哈哈哈";console.log(Base64.encode(str))//很多页面都需要引入的话就在main.js中引入,挂载到全局中使用let Base64 = require('js-base64').Base64;V原创 2021-06-15 12:56:32 · 1076 阅读 · 5 评论 -
element ui表格中根据某列的值判断操作栏里面的按钮显示隐藏
效果图:这里我上通过审核意见那列的值判断操作里面的审核按钮的显示隐藏。首先审核意见那列后台给我返回的是A、B、null三种值,然后我再将这三种值转换为已驳回、已通过、未审核。三个中文显示在页面上。这个是通过 :formatter属性改的,前面有讲过就不细讲了。然后如果是已通过或者已驳回审核按钮都不显示,只有是未审核的情况下才会显示审核按钮。看代码:核心代码:slot-scope="scope"v-if="scope.row.yzdb01D290 ==null?true:false"HTML:原创 2021-06-01 18:02:07 · 5047 阅读 · 3 评论 -
vue中的select下拉框多选
效果图:代码:css: <el-select v-model="xxx" multiple value-key="id" collapse-tags @change="clk"> <el-option v-for="(item,index) in arrs" :label="item.name" :value="item" :key="index"> </el-optio原创 2021-05-25 11:26:52 · 4417 阅读 · 6 评论 -
vue js获取当前时间,年月日时分秒
效果图:话不多说,直接看代码: var date = new Date(); this.year = date.getFullYear();//年 this.month = date.getMonth() + 1;//月 this.strDate = date.getDate();//日 if (this.month >= 1 && this.month <= 9) { this.month = "0" + this.month;}原创 2021-05-21 14:11:11 · 3118 阅读 · 5 评论 -
vue刷新当前页面,刷新数据,更新数据
第一种: this.$router.go(0)这种就是让整个页面重新加载一次,但是会出现几秒钟的白屏情况,对用户体验不好。第二种: location.reload()这种跟上面类似,都会出现白屏情况。第三种: provide / inject组合这种效果比较好,解决了上面出现的白屏情况。第四种:先把jquery的模态框隐藏: $(’#id’).modal(‘hide’)然后再调用需要更新数据的那个方法:this.abc()这种就比较简洁了,哪个数据需要刷新就调用那个方法,也相当于刷新页面原创 2021-05-13 14:48:25 · 5167 阅读 · 9 评论 -
vue中input上传图片并显示在页面中
效果图点击选择文件上传图片,图片显示在页面中。如果直接拿图片的名字是赋值不上去的,需要转换一下才可以渲染上去。话不多说直接上代码:HTML<input @change="img($event)" type="file"><br><img :src="src">JSmethods: { img(e) { let that = this;//改变this指向 let files = e.target.files[0];//图片文原创 2021-05-05 14:39:48 · 2176 阅读 · 4 评论 -
element ui表格内容替换为图形,以图形展示出来
效果图:核心代码:formatter='one’formatter这个方法在官方文档中有介绍,我就不过多介绍了这里一第一列为例:html <el-table-column prop="yi" align="center" label="1" width="35" :formatter="one"></el-table-column>jsrow.yi就是第一列的prop对应的数组里面的值 //数字转换为图形显示 one(row, column) {原创 2021-04-26 17:00:32 · 1359 阅读 · 10 评论 -
element ui 表格常见特殊的属性
element ui 表格的常见特殊属性1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字带括号)6,表头边框与文本边框对不齐情况7,导航栏的侧边栏只展开一个下拉菜单1,表格内容太多用…表示有时候表格内容太多一行显示不下,但是又不想换行,换行影像表格美观程度。解决:在每一行中加:show-overflow-tooltip效果图:代码:2,修改element ui自带的样式有时候element ui自带的原创 2021-04-26 11:13:04 · 2072 阅读 · 10 评论