![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Apeng_0919
这个作者很懒,什么都没留下…
展开
-
vue2使用svg图片
vue2中使用svg图片,并且修改图片颜色原创 2023-12-27 16:17:12 · 958 阅读 · 0 评论 -
vue3 实现按钮权限管理
3、在登录后台时获取后端返回的用户权限数据,并且存入到本地;我这边是把获取数据的接口放在vuex中的。在做后台管理系统时,经常会有权限管理的功能,这里来记录一下关于按钮权限管理的实现方法。然后在登录页面调用这个方法;也可以直接在登录页面获取数据,这里就不赘述了。1、自定义指令 v-permission。新建js文件用来写指令代码。这样就可以实现按钮权限了,如有问题,欢迎留言!4、在需要判断权限的按钮调用指令;2、在main.js里注入;获取的数据大概是这个格式。原创 2023-08-23 15:25:10 · 1417 阅读 · 1 评论 -
element table数据量太大导致网页卡死崩溃
elementUI中的表格组件el-table性能不优,数据量大的时候,尤其是可操作表格,及其容易卡顿。原创 2023-01-12 11:00:56 · 6430 阅读 · 5 评论 -
vue使用push添加多条相同数据,改变其中一条数据导致其他的数据随之改变
当使用push添加多条数据时,多条数据指向的是同一个内存地址,修改其中一条数据相当于修改了所指内存的值,所以每条数据都改变了。原创 2022-12-26 16:08:35 · 2402 阅读 · 4 评论 -
vue加减乘除计算后精度缺失显示为科学计数
前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式。这里将记录如何确保在计算后精度不会缺失,并且将科学计数转换为小数。原创 2022-08-10 09:43:39 · 3941 阅读 · 0 评论 -
解决富文本编辑器wangeditor 光标跳动的问题
为什么会出现光标总是跳动到末尾的情况??通常我们会将编辑器封装为一个组件来使用,编辑的内容就是通过父组件传递给子组件,每次编辑父组件中的内容都会触发子组件(编译器)中的onchange事件,子组件再将新的改变后的值传递给父组件,父组件一接收到值光标就会自动跳转到内容末尾。如何解决这种问题??源头就是要解决onchange事件改变内容的时机,不能一在父组件写东西就触发,或者是触发之后在我们需要更新后的内容时再传递给父组件。即在onchange事件中添加判断条件以下代码的修改和添加都在这个示原创 2021-12-23 14:38:31 · 3121 阅读 · 2 评论 -
uniapp 自定义底部导航栏
在做项目时,经常遇到在现有的框架中无法实现UI图上的样式,比如说将底部导航栏的字体在选中状态下变为渐变色,在浏览器上可以直接修改css样式,但是运行到真机时才发现根本不生效,查阅官方文档才发现app端的根本不支持这些属性更改下面是我在项目中做底部导航栏的过程1.首先是用的官方的底部导航栏,具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949在用这个底部导航栏时,就无法更改字体颜色为渐变色(app端)原创 2021-09-02 10:32:46 · 17352 阅读 · 12 评论 -
前端如何引入外部字体
作为前端应该都会遇到一个问题,在做界面UI时,常常会有些字体的样式跟设计图的样式不同,即使代码一样,通过和同事小伙伴百度,发现浏览器并不支持某些字体,是需要从外部引入的,下面简单记录一下自己的如何实现的不同的字体样式的:1.将外部字体下载放在存放静态资源的文件夹中,我是直接问UI设计师要的字体文件2.可以直接放在App.vue中全局使用,我是创建了一个scss文件专门用来引入字体@font-face{ font-family: "Bahnschrift-BoldSemiCond.原创 2021-08-19 10:54:48 · 2614 阅读 · 1 评论 -
uniapp 实现热更新(安卓和ios)
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段。当你每次发版不想更新整个app安装包时,可以采用差量更新。在HBuilderx中提供了这个wgt包,将打出来的包给后端放在服务器上,后端会提供一个下载链接。下面是实现热更新的具体方法:// 检查是否更新版本updateVersion() { // 热更新不会更新app的版本号 // 这里用一个常量定义(每次修改版本号将设置里面的版本号手动更新) let realVersion = '1012';.原创 2021-07-30 11:56:42 · 12241 阅读 · 8 评论 -
前端实现导出excel表格(可直接复制)
这里是实现excel表格的方法主要思路如下:1.此方法只需要后端提供接口来获取需要制作成excel表格的内容;2.拿到数据先制作表头、表格,将内容加进表格,最后生成表格,直接下载到本地;// 导出表格 exportTable() { this.loading = true; //调用接口 exportExcel(config) .then((res) => { const code = res.data.c.原创 2021-07-30 11:19:33 · 1844 阅读 · 3 评论 -
el-upload上传图片
el-upload是element提供的上传图片组件,在实际项目中如何应用,这里有个我自己的示例:<!-- 上传图片 --> <el-form-item label="封面图片:" prop="excelFile"> <img :src="form.imgUrl" alt="" v-if="!isAdd" style="width:100%"> <el-upload class="原创 2021-07-30 11:06:27 · 1179 阅读 · 0 评论 -
el-table 穿梭框的实现(可直接复制)
<template> <el-dialog :title="title" :visible.sync="dialog" width="60%" :close-on-click-modal="false" :empty-text="loadInfo" center size="mini" style="lookDiaSty" @close="dialogClose" > <el-table.原创 2021-07-28 11:40:33 · 669 阅读 · 0 评论 -
uniapp 实现选项卡功能
template:items是选项卡的标题,current是当前选中,默认为0items: ['选项卡1', '选项卡2', '选项卡3'], <view class="newsTab"> <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964">&l原创 2021-07-06 16:38:49 · 2657 阅读 · 4 评论 -
uniapp 实现上拉加载
1.page.json中,将 enablePullDownRefresh 设置为 true{ "path": "pages/home/communityNews", "style": { "navigationBarTitleText": "社区动态", "enablePullDownRefresh": true }}2.触发上拉加载的方法 onReachBottom: onLoad() { uni.showNavigationBarLoading(原创 2021-07-05 16:54:16 · 7391 阅读 · 0 评论 -
uniapp 实现下拉刷新(完整代码可复制)
效果图:下拉时会刷新页面,当划到最后一页时,‘下拉加载更多数据’ 提示会变成 '暂无更多下拉';具体写法参考官方文档https://uniapp.dcloud.io/api/ui/pulldown首先要在pages.josn中将 enablePullDownRefresh 设置为 true;"style": { "navigationBarTitleText": "社区动态", "enablePullDownRefresh": true}template:<temp.原创 2021-07-05 16:24:20 · 2026 阅读 · 0 评论 -
uniapp 封装请求接口(完整代码可复制)
项目目录如下:1.配置URL:在base.js中let baseURL = '';// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用let showHttpLog = false;// 测试环境baseURL = 'http://192.168.111.42:3333/';// 正式环境// baseURL = 'XXXXX.XXXXX.com';module.exports = { baseURL: baseURL, showHttpLog: showHtt原创 2021-07-03 14:40:25 · 17640 阅读 · 11 评论 -
uniapp uni-forms表单校验
:rules="loginRules" 代表表单校验规则 validate-trigger="bind"代表边输入边校验,还可以设置为submit,即提交表单时再校验; uni-forms-item标签的属性name="phone"和校验规则中的一一对应,相当于element表单校验中的prop<uni-forms :value="loginForm" ref="loginForm" :rules="loginRules" validate-trigger="bind"> <..原创 2021-07-02 15:53:58 · 5638 阅读 · 3 评论 -
uniapp 点击详情展示更多,并且标记已读(完整代码)
想要实现的效果:消息未读是标记为高亮色点击查看之后,下拉展开详情,并且未读标记变灰,表示消息已读。以下代码可直接复制使用html:<template> <view class="commNewsModule"> <view class="card" v-for="(item,index) in cardArr" :key="index"> <uni-icons type="smallcircle-filled" size="5"原创 2021-07-01 18:14:14 · 4567 阅读 · 8 评论 -
uniapp 路由跳转的几种方式(包含跳转到外部链接)
1.navigateTo(保留当前页面,跳转到其他页面,使用navigateTo可以返回上一页)uni.navigateTo({ url:'./straSettings'});2.reLaunch(关闭所有页面,跳转到其他页面)uni.reLaunch({ url:'./straSettings'})3.redirectTo(关闭当前页面,跳转到其他页面)uni.redirectTo({ url:'./straSettings'})4.switchTab(适用于..原创 2021-07-01 17:48:39 · 24833 阅读 · 1 评论 -
uniapp uni-list-item点击事件无效怎么办?
在最初使用uniapp中自带的组件时,总是会遇到一些问题,像uni-list-item组件在点击时会有不生效的情况:<uni-list class="listArr"> <uni-list-item v-for="(item,index) in listArr" :key="index" :title="item.title" show-arrow="true" :thumb="item.img" @click="gotolist(item.title)">原创 2021-07-01 17:22:56 · 8261 阅读 · 9 评论 -
echarts图表的图例中的小圆点不见了怎么办?
tooltip: { show: true, trigger: "axis", axisPointer: { type: "line", }, textStyle: { align: "left", fontSize: 12, }, // formatter: "{b0}<br/>{a.原创 2021-06-18 11:11:09 · 2059 阅读 · 0 评论 -
vue+element 表格el-table显示数据加载中
查看element官网上表格的属性原创 2021-06-02 13:54:37 · 4709 阅读 · 0 评论 -
vue 使用bus进行兄弟组件间传值
1. 在main.js中,将bus加到原型上原创 2021-06-02 10:49:46 · 86 阅读 · 0 评论 -
使用vue uniapp制作一个打地鼠游戏
实现的效果如下,可在上方设置参数,可以设置地鼠出现的速度和总数;可在代码中设置专属头像作为地鼠代码如下,可直接复制:<template> <view class="game"> <view class="scoped"> <view class="set"> <uni-title type="h3" title="设置参数"></uni-title> <view class="setR原创 2021-06-01 17:21:53 · 1893 阅读 · 0 评论 -
vue封装请求数据的接口
1.配置URL(1)创建一个js文件(2)区别测试环境和生产环境(正式环境)let host;if (process.env.NODE_ENV == 'development') { host = "xx.xx.xx.xx";}else if (process.env.NODE_ENV == 'production') { host = "xx.xx.xx.xx"; //线上接口(生产环境包)}export const BASEURL = `http://${host原创 2021-05-25 14:47:00 · 612 阅读 · 1 评论 -
vue封装方法(一个方法在项目中多次使用)
1.新建一个js文件2.编辑formatter.js 文件(1)多个方法封装(2)单个方法封装3.在需要的vue文档中引入4.调用如有问题,欢迎留言!!!原创 2021-05-24 16:58:45 · 1202 阅读 · 0 评论 -
el-input 输入框里插入单位
代码如下:<el-input v-model="fullForm.releaseTime"> <i slot="suffix" style="font-style: normal; margin-right: 10px">秒</i></el-input>效果如下:原创 2021-05-18 18:12:06 · 1705 阅读 · 0 评论 -
vue 富文本编辑器wangeditor 上传图片
1.安装npm install wangeditor --save2.引入import E from "wangeditor";3.新建一个richText.vue的组件,这里包含了如何上传图片,具体代码如下<template> <div id="wangeditor"> <div ref="editorElem" style="text-align: left"></div> </div><..原创 2021-05-14 18:33:53 · 1331 阅读 · 0 评论 -
echarts引入的几种方式
1. npm或者cnpm 安装npm install echarts --savecnpm install echarts --save引入echarts,就可以使用了import echarts from 'echarts';2.cdn引入原创 2021-05-10 10:15:49 · 22870 阅读 · 8 评论 -
vue+element 数字加字母验证码(直接复制,简单易懂)
可直接复制代码!!!<template> <div class="join_formitem"> <el-form ref="form" :rules="rule" :model="form"> <el-form-item label="验证码" prop="picLyanzhengma"> <el-input type="text" placeholder="请输入.原创 2021-05-08 14:55:57 · 1199 阅读 · 0 评论 -
elemenet弾框中使用echarts 报错Cannot read property ‘getAttribute‘ of null
在使用elementUI的抽屉<el-drawer>组件时,会有如下提示因此在第一次打开抽屉时 ,是获取不到DOM元素的。官网给出了解决办法,就是在open方法中获取相应的组件<el-drawer title="历史利润率" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="draw原创 2021-05-08 11:55:24 · 342 阅读 · 0 评论 -
vue 表格无限滚动下拉加载数据vue-infinite-loading
1. 下载vue-infinite-loadingnpm installvue-infinite-loading --save2.在需要使用的文件中引入import InfiniteLoading from 'vue-infinite-loading';3.在该文件中注入组件components: { InfiniteLoading,}4.在表格底部插入<el-table:data="tableData"v-loading="lo...原创 2021-05-06 15:54:36 · 1230 阅读 · 0 评论 -
echarts 图表自适应
首先需要渲染一个图表,例如折线图图表,点这里手把手教你从0到有完成了一个图表后在获取dom节点、初始化图表之前,添加如下代码:const WIDTH = 375; //设计稿的大小var cWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth; //获取屏幕大小将跟数据大小有关的地方乘上比例(设计稿大小与屏幕大小的比例),...原创 2021-04-30 16:10:40 · 1113 阅读 · 1 评论 -
从0到有,教你实现渐变色echarts 折线图
先在模板中写一个div盒子<template><div id="trendChart"></div></template>可以在生命周期函数mounted里面加载,也可以封装为一个函数,然后在mounted里面调用;var chartDom = document.getElementById("trendChart"); //获取节点var myChart = echarts.init(chartDom); //初...原创 2021-04-30 14:48:22 · 1381 阅读 · 0 评论 -
vue+element 将密码输入框的小圆点显示为星号
首先将输入框的type设置为text,设置为password就只能显示为小圆点<el-formref="form":model="form":rules="loginRules"label-width="0px"class="loginForm"><el-form-item prop="phone"> <el-input v-model="form.phone" placeholder="请输入账...原创 2021-04-29 18:18:14 · 6499 阅读 · 4 评论 -
vue 适配各种屏幕大小
首先要找到项目中的index.html文件,添加如下代码<script>(function (doc, win) {var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWid原创 2021-04-29 17:49:31 · 1828 阅读 · 2 评论