UI框架踩坑指南
文章平均质量分 55
Element ui,
沐风拂千渔
90后一枚,更多请关注[静阅茶馆]
展开
-
Vue3全局封装dialog弹框
Vue3全局封装dialog弹框原创 2024-06-07 15:53:25 · 509 阅读 · 0 评论 -
vue3全局封装table分页
1.封装element-plus table分页。原创 2024-05-24 13:36:34 · 193 阅读 · 0 评论 -
vue3中vite代理设置
vue3 proxy代理接口配置使用原创 2024-03-29 14:40:22 · 289 阅读 · 0 评论 -
vue实现跳转传参查询
vue实现跳转传参原创 2024-01-29 15:43:15 · 628 阅读 · 0 评论 -
vue+iView 动态侧边栏菜单保持高亮选中
iview 动态菜单渲染后,刷新或链接跳入页面侧边栏菜单没有保持高亮选中问题。原创 2023-10-27 18:14:00 · 938 阅读 · 0 评论 -
iview tree树形菜单实践之数据回显与选中
解决问题: 关于iview tree树形菜单在使用过程中存在父级菜单的数据传输和回显问题。原创 2023-03-06 17:32:00 · 1331 阅读 · 1 评论 -
vue+iView 实现可输入的下拉框
iview中,使用Dropdown+input 实现一个可以手动输入的下拉框原创 2023-01-28 14:26:01 · 2395 阅读 · 0 评论 -
iview+Collapse折叠面板动态操作表单
使用iview折叠面板(Collapse)实现:1.可以动态渲染显示。2.可以独立操作展开收起效果,点击可以独立修改数据,修改完成只收起其对应面板。原创 2022-12-21 17:57:16 · 2034 阅读 · 0 评论 -
iview tree树形菜单实践之渲染模式
iview 树形控件tree的简单实践,select下拉框展示tree面板,选中节点值收起tree。原创 2022-11-10 17:12:20 · 1507 阅读 · 0 评论 -
iview 表单提交
表单提交知识小结原创 2022-11-03 17:22:18 · 382 阅读 · 0 评论 -
vue+iView 权限实践之动态显示侧边栏菜单
实现:iview vue 根据不同的登录用户角色显示不同的左侧菜单权限。原创 2022-10-09 14:37:28 · 3164 阅读 · 0 评论 -
iView复合型输入框动态生成表达式
实现一个预警功能,需要动态配置一些参数,根据下拉选中类型实现动态添加表达式的功能;。原创 2022-08-22 16:20:14 · 769 阅读 · 2 评论 -
Vue iView DatePicker时间组件踩坑
iView时间组件:DatePicker封装使用原创 2022-06-28 16:44:28 · 1947 阅读 · 0 评论 -
Vue+iView tabs select $ref 的使用
iView tabs的使用原创 2022-06-06 18:24:17 · 1164 阅读 · 0 评论 -
vue+iView 日期选择器禁用及下拉控件默认选项修改
vue+iView 日期选择器及下拉控件默认选项修改一,iviewiview官网a,安装npm install iview --saveb,引入main.jsimport iView from 'iview'import 'iview/dist/styles/iview.css'Vue.use(iView)c,按需引入比如在axios中import iView from 'iview'使用提示: iView.Message.error(error.request.resp原创 2021-11-23 17:35:41 · 1628 阅读 · 0 评论 -
vue+elementui支付宝支付问题
vue+elementui接入支付宝支付调用问题vue电商平台付费需要接入支付宝支付,具体可以参考一下支付宝支付宝开放平台文档:支付宝开放平台文档后端做完处理,需要前端渲染支付接口请求的标签参数。请求过来的参数以form表单和script标签包裹组成。后端处理参考:springboot 对接支付在普通的html界面中,页面渲染之后,可直接加载,跳转生成支付宝付款码的界面,支付宝支付之后就会返回规定的商户界面。然而在vue中,通过v-html始终无法将获取到的标签数据渲染到页面,就算将scri原创 2020-12-30 18:02:30 · 1244 阅读 · 0 评论 -
vue+elementui微信支付状态问题
vue+elementui微信支付状态问题常见的支付也就微信支付宝和银行卡等支付方式,近期项目中有用到支付,主要是pc端一个业务包需要顾客去支付,支付成功之后就可以使用相关服务。顾客选择相关类型的业务,然后计算出总价格生成二维码,微信扫码完成支付,跳转到指定页面,即可享受相关业务功能。1,微信调用配置参考:微信开放文档2,后端处理后端处理参考3,前端调用 erweiList: any = []; // 二维码返回数据 //生成微信二维码 erwei() { const or原创 2021-01-04 11:51:30 · 830 阅读 · 0 评论 -
uniapp实现上传图片及其复制文本功能
uniapp实现上传图片及其复制文本功能一,上传图片1,util/index.js中封装方法export function chooseImage(URL,callback) { uni.chooseImage({ count: 1, sourceType: ["album"], success: res => { uni.getImageInfo({ src: res.tempFil原创 2021-04-19 10:52:16 · 774 阅读 · 0 评论 -
Vue+iView时间组件的使用
Vue iView日期组件 DatePicker的使用及时间日期处理总结;原创 2022-01-25 18:18:56 · 1428 阅读 · 0 评论 -
在vue中使用echars图表及element ui
在vue中是使用echars图表及element ui前端项目中,通常会使用到一些图表库,为了极大可能的以图形形式化展示出数据的波动及其发展趋势,图形化展示数据,简单明了,层次鲜明,从而有利于数据分析,为后期的发展规划提供合理的建议及其优化。echars是百度开源的一个JavaScript 实现的开源可视化库,里面有许多图形化视图模板及其说明文档,感兴趣的均可以使用其模板开发属于自己的大屏及其数据分析监控系统。echars官方实例快速上手echars当然,除了echars,还有一些比较好用的图形化原创 2021-04-28 11:48:18 · 2341 阅读 · 3 评论 -
uniapp内嵌入外部页面
uniapp内嵌入外部页面嵌入外部页面找到了两种解决方法:1,iframe<iframe src="https://blog.csdn.net/weixin_44794123?spm=1001.2101.3001.5343" :style="{ height: this.app_height * 0.5 + 'rpx',width: this.app_height * 100 + 'rpx' }" ></iframe>使用iframe,会出现布局错乱,然后需要手动去适原创 2021-04-21 15:38:12 · 9078 阅读 · 0 评论 -
Vue+iView table分页勾选记忆功能
iView table组件checkbox跨页勾选记忆,及分页page相关使用采坑总结。原创 2022-01-21 17:28:07 · 4304 阅读 · 2 评论 -
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求:1,导入导出的必要性导入与导出在日常项目开发中经常用到,批量导入功能可以快速插入添加数据。导出功能则可方便直观明了拿到所需展示的重要数据。2,xls和xlsx区别?1、文件格式不同。xls 是一个特有的二进制格式,其核心结bai构是复合文档类型的结构,而 xlsx 的核心结构是 XML 类型的结构,采用的是基于 XML 的压缩方式,使其占用的空间更小。2、版本不同。xls是excel2003及以前版本生成的文件格式,而xl原创 2021-12-21 15:23:51 · 2699 阅读 · 0 评论 -
iView级联选择器Cascader回显慢的问题
iView 级联Cascader回显慢优化;原创 2022-01-11 18:12:35 · 1726 阅读 · 2 评论 -
React+Ant Design实现导出excel表格
React+Ant Design实现导出excel表格文件显示损坏打不开解决办法简单描述一下最近实现的一个小小的功能需求,以便后期有用。同时期待与大家一起交流学习。1,需求:在react项目中,调用后台数据,在table中展示数据。点击一个导出按钮,实现单选,多选导出单条,单张,多张表数据。2,解决方法其一:前端方法调用后台接口实现导出。3,关键代码:exportExcel= (ip, Statu) =>{ var selectedRows= this.state...原创 2020-06-13 10:22:32 · 2195 阅读 · 2 评论 -
Angular +Ionic修改日期组件英文按钮
Angular +Ionic修改日期组件英文按钮1,引入日期组件: <ion-list> <div class="alert-price"> <ion-datetime displayFormat="YYYY-MM-DD" name ="endDate" [(ngModel)] ="endDate" ></ion-datetime> <ion-原创 2020-12-10 14:30:08 · 208 阅读 · 0 评论 -
Angular +Ionic使用ngModel绑定非文本框报错问题
一,报错当ngMode绑定在非input标签上时,会出现以下报错,然后页面加载不同步: <b [(ngModel)]="item.integralRecord"*ngIf="!add">+</b>二,解决方法给标签元素中加入:ngDefaultControl <b [(ngModel)]="item.integralRecord" ngDefaultControl *ngIf="!add">+</b>...原创 2020-12-08 10:31:47 · 241 阅读 · 0 评论 -
Angular +Ionic调用第三方接口跨域问题
一.跳转第三方接口,项目中常常会遇到的一些跨域问题。比如:调用第三方的支付接口,地图,等。还有就是从一个app或者H5跳转另一个app页面。常常会遇到一些跨域问题:问题1:接口报错500,错误显示为:这时候就需要在proxy.config.json文件中去设置:允许跨域。{ "/api": { "target": "https://zzz.qqq.com", "changeOrigin": true, "pathRewrite": { "^/api原创 2020-10-28 11:32:09 · 736 阅读 · 0 评论 -
Angular +Ionic关于token拦截报错
Angular +Ionic关于token拦截报错一,报错内容二,解决方法1,判断token情况 if(token){ if (urlList.indexOf(url) === -1) { console.log(token) customerHeaders['Authorization'] = token; // customerHeaders['token'] = token; //customerHeaders['QZH_TOKEN']原创 2020-10-26 17:25:07 · 246 阅读 · 0 评论 -
Angular +Ionic实现支付功能
Angular +Ionic+axios实现第三方支付功能1.下载axiosnpm install axios -s2.axios.service.ts配置import { Injectable } from "@angular/core";import axios from "axios"@Injectable({ providedIn: "root"})export class AxiosService { constructor() { } AxiosPos原创 2020-10-22 17:24:55 · 473 阅读 · 0 评论 -
Angular +Ionic中数组对象遍历之trackBy唯一标识
一,trackBy作用:1,标记被更改的节点2,页面刷新时重绘该更改的节点二.代码<li *ngFor="let item of arrList; trackBy: trackById"">{{ item }}</li>trackById(index, item) { return item.id; // 与项目对应的唯一id}...原创 2020-10-09 15:54:35 · 394 阅读 · 0 评论 -
Angular +Ionic实现获取数字验证码登录
简单项目中,一般会用到验证码登录。一.实现需求:验证码配合用户密码进行登录验证。甭管它是短信验证码,数字验证码,还是图形拼图验证码。今日简短小结数字验证码。二,关键代码1,html中 <div class="item"> <ion-label>验证码</ion-label> <ion-input placeholder="请输入验证码" clearInput maxlength="4" [(ngModel)]="login原创 2020-09-30 16:14:31 · 756 阅读 · 2 评论 -
Angular +Ionic实现收藏夹的全选和单选删除功能
Angular +Ionic实现收藏夹的全选和单选删除功能一,需求及解决思路1.实现需求:所展示的产品,通过编辑功能切换复选,分为单独选择和全选实现将商品从收藏夹中移除。2.解决思路:实现商品数据渲染页面后,调用执行删除功能的接口。实现单选,反选,全选。通过选中所接收的值拼接成自符串。取消选择时:将相应选中的字段从当前自符串中移除。点击删除按钮实现选中商品的移除。全选时则移除所有的商品。二,代码a,关键代码1,html//单选 <ion-checkbox *ngIf="s原创 2020-09-28 10:39:36 · 443 阅读 · 0 评论 -
Angular +Ionic实现关注与取消关注
Angular +Ionic实现关注与取消关注1.html中:<div class="middle-rate-shop-name" *ngIf="isShowContent"> <div class="middle-rate-shop-name-img" > <img [src]="shopInfoList.storeLogo"> </div> <div class="middle-rate-sho原创 2020-09-25 11:33:51 · 98 阅读 · 0 评论 -
Angular +Ionic实现增加,删除,编辑,修改功能。
常用的开发中,前端项目主要负责数据的表层处理。更多主要数据业务逻辑实际操作是在后端,主要体现在数据的增删改查业务逻辑及其数据库的操作上。今日简单罗列一下前端项目中数据表层的增删改查功能:一,增,改1.html中:<ion-header> <div class="bill-header"> <div class="bill-header-title"> <div class="bill-header-icon" (click原创 2020-09-21 11:54:50 · 770 阅读 · 0 评论 -
Angular +Ionic复选框实现单选多选功能
一,html中: <ion-content> <ion-list class="my-tracks-content"> <ion-list class="my-tracks-details" *ngFor="let item of collectionLists"> <!-- <img [src]="advImage.pictureUrl"> --> &原创 2020-09-18 14:42:00 · 718 阅读 · 0 评论 -
Angular+Ionic 中:ngIf,ngSwitch, ngStyle,ngClass,ngModel的使用总结:
一,ngIf1.可实现两种状态的切换<ion-content class="bill-message" *ngIf="!setBill"><ion-content>2.效果二,ngSwitch1,可据数据分情况展示:html中: <a>发票类型:</a> <ion-text [ngSwitch]="item.invoiceType"> <span *ngSwitchCase="1"&g原创 2020-09-18 14:23:03 · 660 阅读 · 2 评论 -
Angular +Ionic常用ng命令
一,创建项目node环境:NodeJs1.安装脚手架 npm install -g @angular/cli //失败卸载 npm uninstall -g @angular/cli2.淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm cache clean //清除缓存3.初始化ng -v4.创建项目ng new filenamecd filenamecnpm in原创 2020-09-17 10:09:08 · 589 阅读 · 0 评论 -
Angular +Ionic实现父子组件传值
1,创建子组件ng generate component components/rating-star或ng g c components/rating-star创建组件2,配置组件3,引用组件4,父子组件传值1>父传子 @Input()接收//父组件引入 OnInit import { Component, OnInit } from '@angular/core';//父组件 data: any = '我是传往子组件的值'//子组件引入OnInit, In原创 2020-09-14 11:32:41 · 340 阅读 · 0 评论 -
Angular+Ionic使用ion-popover组件
项目开发中常用的一些ionic组件比较有趣,今天简单的说一下Angula中ion-popover组件的使用1,在/src/app/share/components/popover的路径下使用指令创建组件:popover生成2,在src/app/share/components下的components.module.ts文件下加入组件import { NgModule } from '@angular/core';import { CommonModule } from '@angular/c原创 2020-09-09 13:50:14 · 1024 阅读 · 2 评论