前端技巧总结---持续更新

news2024/11/24 9:29:19

易遗漏事件总结

关闭/保存后

移动端技巧总结

阿里图库

在原有的基础上加新图标

该代码替换掉原有的 iconfont.css

❗src 请求头要加https，要不然移动端会不显示阿里图标

onBackPress 返回上一级

onBackPress() {
  // ...自定义操作---提示（是否确认退出）
if (this.ruleForm.Id) {
    uni.navigateTo({
      // 跳转到平常页面
      url: '/pages/business/B_WayBill/B_WayBill'
    })
  } else {
    // 跳转到 tabbar 页面
    uni.switchTab({
      url: '/pages/work/work'
    })
  }
  return true
}

实现这种提示：

<!--关闭按钮显示与否-->
    <u-modal :closeOnClickOverlay="true" @close="show = false" @cancel="show = false" cancelText="继续编辑"
      confirmText="下次再编辑" :show="show" @confirm="close" :showCancelButton="true" title="还差一点就添加成功了">
    </u-modal>

// 点击左上角返回按钮触发
onBackPress() {
    this.show = true
    return true
}

close(){
    uni.navigateTo(...)
}

❗close事件不要用 navigateBack 会进入死循环

✨路径传参

uni.navigateTo({
  url: `/pages/business/B_WayBill_Add/components/cargoMessage?rowData=${JSON.stringify(this.rowData)}&cargoData=${JSON.stringify(row)}`
});

❗如果传递的参数是对象，需要用 JSON.stringify 转成字符串，后面接受数据再用 JSON.parse 转成 object

条件编辑

  • // #ifdef H5
// #endif

// #ifdef APP-PLUS

<!-- #ifndef MP-WEIXIN --> ✨除了这种之外

<!-- #ifdef MP-WEIXIN -->

页面下拉刷新事件

async onPullDownRefresh() {
  this.getData()
  // 停止刷新
  uni.stopPullDownRefresh()
}

// 同时要在 pages 里面设置

返回顶部

<!-- 返回顶部的按钮组件 -->
<u-back-top class="u-back-top" :iconStyle="{color:'#fff'}" icon="arrow-up" :scroll-top="scrollTop"></u-back-top>

// 监听返回顶部按钮的距离
onPageScroll(e) {
  this.scrollTop = e.scrollTop;
}

页面重置到顶部

uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
});

搜索定位

uni.pageScrollTo({
    scrollTop:dom元素（vue里面的ref）.offsetTop,
})

图片预览

uni.previewImage({
  current: "",
  urls: [e],
})

页面跳转

// 页面会刷新触发onLoad（有表单组件的话需要存起来
uni.navigateTo()  
❗url要带'/',eg:'/pages/...'

// 页面不会刷新（有表单组件
uni.navigateBack()

PC端技巧总结

element 多试试插槽，实现个性化样式

<template #title>
  <el-tag effect="dark" size="large" style="margin-right: 10px;">主单号</el-tag>
</template>

分割组件 splitpanes

import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

<splitpanes style="height: 100%">
        <pane :size="40" v-if="!rowData"></pane>
</splitpanes>

vuex 的使用

const state = {
    lang:getLang(),
}

const mutations = {
    SET_LANG(state, lang){
        state.lang = lang
        setLang(lang)
    }
}

const actions = {
    changeLang({commit}, lang){
        commit('SET_LANG', lang)
    }
}



export default {
    namespaced: true,
    state,
    mutations,
    actions,
}

import { mapState } from 'vuex'
import store from '@/store/index.js'

computed: {
    ...mapState("addOrderCargo", ["sendMessage", "recieveMessage", "productOptions", "inventoryData", "ruleForm"])
}

store.getters.inventoryData

store.commit('addOrderCargo/setproductOptions', res.data)

vue2 引入组件

import yhCascader from '@/components/YhCascader'

components:{}

// 全局 main.js
import yhUpload from '@/components/yh-upload/yh-upload'

watch

"sendMessage.MailingType": {
    handler(oldVal, newVal) {
      this.getSendAddress()
    },
    deep: true, // 深度监听
    immediate: true // 第一次改变就执行
  }

computed

计算后属性必须渲染后，绑定的方法才会生效这里指就是定义后的变量名在上面html中显示

vue3

引入组件

import yhCascader from '@/components/YhCascader'

判断数据类型

const keyType = data => {
  let type = Object.prototype.toString.call(data);

  if (type === '[object String]') {
    type = 'String';
  } else if (type === '[object Number]') {
    type = 'Number';
  } else if (type === '[object Null]') {
    type = 'Null';
  } else if (type === '[object Boolean]') {
    type = 'Boolean';
  } else if (type === '[object Array]') {
    type = 'Array';
  } else if (type === '[object Object]') {
    type = 'Object';
  } else {
    type = '未进行判断的类型：' + type;
  }

  return type;
};

对象包裹对象转换为数组

for in   +   push

filter

赋值数据

const data = res.data || []

总–总结

对象

深拷贝

JSON.parse(JOSN.Stringfy())

有key字段，但还需要value字段

  • 直接使用 . 加一个名称属性给 Object

不同属性类型共享同一个 object

对象赋值

for (let key in ruleForm) {
      ruleForm[key] = value[key]
    }

callBack 合理使用

封装组件需要注意的点

❗v-if 会影响到 ref 的获取

请求接口参数

  • 拼接参数

    • ?a=${b}&

  • formData

❗async返回值都是 promise对象

解决：

  • 分开

    • 如果是 promise 的话，用 resolve返回

✨善于利用 uniapp 的 API + Promise

  • 代码式书写，解决先后执行问题

async removeBeforeAsync(id) {
        this.show = true
        let returnBool = false
        await new Promise((resolve, reject) => {
          uni.showModal({
            title: '删除文件', //提示标题
            content: '是否删除该文件', //提示内容
            showCancel: true, //是否显示取消按钮
            success: async (res) => {
              if (res.confirm) { //confirm为ture，代表用户点击确定
                let res2 = await this.http.post('/api/B_WayBill_Files/DelWayBillFile?Id=' + id, {}, true)
                if (res2.Status) {
                  this.$toast('删除成功!')
                } else {
                  this.$toast('删除失败!', 'error')
                }
                returnBool = res2.Status
              } else if (res.cancel) { //cancel为ture，代表用户点击取消
                returnBool = false
              }
              resolve()
            }
          })
        })
        return returnBool
      },

请求接口的是否加载可以加在config里面

实现左右滑动

.insure {
  display: flex;
  height: 520px;
  .left {
    width: 40%;
    // overflow: auto;
    .header {
    }
  }
  .right {
    flex: 1;
    // overflow: auto;
  }
}

  • elementUI有个滚动条样式

循环一般用来读取数据，而不要改变响应式数据

根据这个思路，可以把methods或者computed计算完的数据放置于数组中，再在响应式内直接读取数组元素

APP热更新

代码：https://blog.csdn.net/itopit/article/details/124620871

借鉴：https://blog.csdn.net/m_xiaozhilei/article/details/126485684

打包的wgt版本要与后端记录的一样，线下打包的可以搞成第一点版本的去测试

高亮与不高亮基本大小要一样才不会变来边去

请求参数如果没有就不添加：

let params = {}
    if (this.keyword2) {
      params["billNo"]=this.keyword2
    }
    if (this.startTime2 && this.endTime2) {
      params["beginTime"]=this.startTime2
      params["endTime"]=this.endTime2
    }

uniapp select被table遮挡

.uni-table-scroll{
    overflow-x: unset;
  }

this.$set解决新增的对象属性没有响应式（computed无效）

​ this.$set(this.rowData,'coupon',newVal * num || 0)// 优惠金额

图片

uniapp展示本地图片使用image>标签都可以展示图片。但是<img>标签在网页端和真机模拟都不可以展示图片。

路径直接为 /static/… 不需要相对，不需要@符号。直接从/static目录往下写就行了

数组

新增元素

  • arr.splice(1,0,xx)
  • arr.push(xx)
  • arr.unshfit(xx)

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册

掉起拨打电话接口

<a :href="'tel:' + item.VehiclenoCarManTel">{{item.VehiclenoCarManTel}}</a>

vue2一个对象中的一个值是一个计算属性

怎么搞？—只有计算属性依赖项变化才回触发

devtools–给你的vue3项目的main.js加上这一句

app.config.devtools = true

❗vue 循环一定要弄key

  • 要不然顺序变化时会出现错误

js 计算精度问题

自己写公共方法：

/**

   ** 加

   **/

  add(arg1, arg2) {

​    var r1, r2, m, c;

​    try {

​      r1 = arg1.toString().split(".")[1].length;

​    } catch (e) {

​      r1 = 0;

​    }

​    try {

​      r2 = arg2.toString().split(".")[1].length;

​    } catch (e) {

​      r2 = 0;

​    }

​    c = Math.abs(r1 - r2);

​    m = Math.pow(10, Math.max(r1, r2));

​    if (c > 0) {

​      var cm = Math.pow(10, c);

​      if (r1 > r2) {

​        arg1 = Number(arg1.toString().replace(".", ""));

​        arg2 = Number(arg2.toString().replace(".", "")) * cm;

​      } else {

​        arg1 = Number(arg1.toString().replace(".", "")) * cm;

​        arg2 = Number(arg2.toString().replace(".", ""));

​      }

​    } else {

​      arg1 = Number(arg1.toString().replace(".", ""));

​      arg2 = Number(arg2.toString().replace(".", ""));

​    }

​    return (arg1 + arg2) / m;

  },

  /**

   ** 减

   **/

  sub(arg1, arg2) {

​    var r1, r2, m, n;

​    try {

​      r1 = arg1.toString().split(".")[1].length;

​    } catch (e) {

​      r1 = 0;

​    }

​    try {

​      r2 = arg2.toString().split(".")[1].length;

​    } catch (e) {

​      r2 = 0;

​    }

​    m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度

​    n = r1 >= r2 ? r1 : r2;

​    return Number(((arg1 * m - arg2 * m) / m).toFixed(n));

  },

  /**

   ** 乘

   **/

  mul(arg1, arg2) {

​    var m = 0,

​      s1 = arg1.toString(),

​      s2 = arg2.toString();

​    try {

​      m += s1.split(".")[1].length;

​    } catch (e) {}

​    try {

​      m += s2.split(".")[1].length;

​    } catch (e) {}

​    return (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);

  },

  /**

   ** 除

   **/

  div(arg1, arg2) {

​    var t1 = 0,

​      t2 = 0,

​      r1,

​      r2;

​    try {

​      t1 = arg1.toString().split(".")[1].length;

​    } catch (e) {}

​    try {

​      t2 = arg2.toString().split(".")[1].length;

​    } catch (e) {}

​    r1 = Number(arg1.toString().replace(".", ""));

​    r2 = Number(arg2.toString().replace(".", ""));

​    return (r1 / r2) * Math.pow(10, t2 - t1);

  },

或者xe-utils 解决 js 加减乘除精度问题

善于使用对象处理（存储）多数据

let obj = {}
obj[key] = xx

❗一定一定要记得复杂数据类型的特殊性，需求如果是不改变原数据一定要深拷贝

// 一般使用 JSON.stringify 进行拷贝---在获取的时候用JSON.parse来解构就行了

在用store存储、作为参数传递过去、赋值等等操作一定要注意

❗❗❗removeEventListener

addEventListener 之后一定要记得 removeEventListener
  • 取消对一个全局事件的监听。

插件的结束时期

数据传输 传过去=》再传回来（用 uni.navigateTo)

插件使用

❗❗❗回调函数里面如果需要用到 this 记得该回调函数一定得写成箭头函数

存储

要记得 JSON.stringfy 再存储

uni.setStorageSync(app_user_timestamp, JSON.stringify(Date.now())) //设置时间戳

uniapp FormData 形式的参数得更改请求头

if (isFormData) _header['Content-Type'] = 'application/x-www-form-urlencoded'

// 传递的参数是对象

对象

对象一整个赋值会改不到数据，要用 . 来更改属性值

搜索定位功能

uni.pageScrollTo({
    scrollTop: this.$refs[res.Data.BillInfo.BillNo][0].$el.offsetTop-310,
    duration: 0
  });

let obj = {}
obj[key] = xx

❗一定一定要记得复杂数据类型的特殊性，需求如果是不改变原数据一定要深拷贝

// 一般使用 JSON.stringify 进行拷贝---在获取的时候用JSON.parse来解构就行了

在用store存储、作为参数传递过去、赋值等等操作一定要注意

❗❗❗removeEventListener

addEventListener 之后一定要记得 removeEventListener
  • 取消对一个全局事件的监听。

插件的结束时期

数据传输 传过去=》再传回来（用 uni.navigateTo)

插件使用

❗❗❗回调函数里面如果需要用到 this 记得该回调函数一定得写成箭头函数

存储

要记得 JSON.stringfy 再存储

uni.setStorageSync(app_user_timestamp, JSON.stringify(Date.now())) //设置时间戳

uniapp FormData 形式的参数得更改请求头

if (isFormData) _header['Content-Type'] = 'application/x-www-form-urlencoded'

// 传递的参数是对象

对象

对象一整个赋值会改不到数据，要用 . 来更改属性值

搜索定位功能

uni.pageScrollTo({
    scrollTop: this.$refs[res.Data.BillInfo.BillNo][0].$el.offsetTop-310,
    duration: 0
  });

v-for涉及到增删改查时一定好设置一个唯一的id❗

公共的变量/函数/组件写在hooks.js里面

使多个地方可用到，复用性极强

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFC1LY75-1681542182741)(C:\Users\19574\AppData\Roaming\Typora\typora-user-images\1681522169143.png)]

一整个对象赋值改不到原始的对象，而是直接改了对象的数组

  • 要是想改掉原来对象的属性值，则需要：

  • for (let key in this.bjFormFields1) {
      this.bjFormFields1[key] = this.rowData[key]
    }

请求接口报错时，看看是不是多了个id的属性，这样有时会报错

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/424665.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Unity VR开发】结合VRTK4.0：不可移动区域

【Unity VR开发】结合VRTK4.0：不可移动区域

语录&#xff1a; 生活坏到一定程度就会好起来&#xff0c;因为它无法更坏。努力过后&#xff0c;才知道许多事情坚持坚持&#xff0c;就过来了。 前言&#xff1a; 有时候我们可能并不需要所有的区域都进行移动&#xff0c;而只需要部分区域进行移动&#xff0c;那么我们就要将…
阅读更多...
中核武汉 x Tapdata：能源领域老牌央企如何释放数据力量，推进精细化管理

中核武汉 x Tapdata：能源领域老牌央企如何释放数据力量，推进精细化管理

数据孤岛是一直以来的老大难问题&#xff0c;之前也有在寻找相关产品和解决方案&#xff0c;要么太重&#xff0c;要么不容易落地&#xff0c;直到偶然间看到 Tapdata。这是一个小而美的产品&#xff0c;专注实时数据开发领域&#xff0c;其异构数据实时同步能力使我们可以更专…
阅读更多...
陶泓达：4.17午间提前布局美盘黄金原油操作建议！

陶泓达：4.17午间提前布局美盘黄金原油操作建议！

黄金方面&#xff1a; 上周五(4月14日)&#xff0c;美市盘中&#xff0c;黄金金价大幅下跌&#xff0c;盘中一度下跌55美元。随着黄金遭遇技术性抛售压力&#xff0c;回吐一周的大部分涨幅&#xff0c;不过&#xff0c;在周末之前&#xff0c;许多分析师表示&#xff0c;市场早…
阅读更多...
MySQL索引及SQL优化

MySQL索引及SQL优化

先对索引做个大概回顾,然后我们详细探讨SQL优化 索引 索引的分类 主键索引 设定为主键后数据库会自动建立索引&#xff0c;innodb为聚簇索引 单值索引 即一个索引只包含单个列&#xff0c;一个表可以有多个单列索引【建议不要超过3】 唯一索引 索引列的值必须唯一&#xff0…
阅读更多...
算法训练第五十九天 | 503.下一个更大元素II 、42. 接雨水

算法训练第五十九天 | 503.下一个更大元素II 、42. 接雨水

单调栈part02503.下一个更大元素II题目描述思路42. 接雨水题目描述思路暴力解法双指针优化单调栈解法准备工作单调栈处理逻辑503.下一个更大元素II 题目链接&#xff1a;503.下一个更大元素II 参考&#xff1a;https://programmercarl.com/0503.%E4%B8%8B%E4%B8%80%E4%B8%AA%E…
阅读更多...
升级长江存储最新闪存，忆恒创源发布新一代企业级NVMe SSD

升级长江存储最新闪存，忆恒创源发布新一代企业级NVMe SSD

2023年4月11日 —— 北京忆恒创源科技股份有限公司&#xff08;Memblaze&#xff09;正式发布搭载高品质国产闪存的PBlaze6 6541 系列企业级PCIe 4.0 NVMe SSD。作为 MUFP 平台化开发的最新作品&#xff0c;PBlaze6 6541 采用长江存储最新一代晶栈 Xtacking 3D NAND&#xff0c…
阅读更多...
类中的那点事

类中的那点事

c入门必看类类的基本介绍类的实例化类的6个默认成员函数构造函数析构函数拷贝构造函数赋值重载静态成员友元类 类的基本介绍 class为定义类的关键字&#xff0c;ClassName为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为类…
阅读更多...
恢复删除的文件，小白也能轻松掌握的5个方法！

恢复删除的文件，小白也能轻松掌握的5个方法！

案例&#xff1a;如何恢复删除的文件&#xff1f; 【各位大神&#xff01;谁能帮帮我呀&#xff01;一不小心把电脑里很重要的文件删除了&#xff0c;不知道该如何是好&#xff0c;求一个简单方法&#xff0c;感谢大家&#xff01;】 在计算机使用过程中&#xff0c;误删文件…
阅读更多...
Tomcat处理请求的全过程

Tomcat处理请求的全过程

文章目录一、组件详解二、请求处理流程1.总体流程图2.Worker线程任务流程三、源码跟踪1.Tomcat启动线程组件2.Acceptor3.Poller4.Worker总结一、组件详解 在Tomcat处理客户端请求的过程中&#xff0c;这里面有三个组件概念&#xff0c;他们都是线程&#xff0c;分别负责不同的…
阅读更多...
NEWS|关于人工智能大型语言模型能否理解的争论

NEWS|关于人工智能大型语言模型能否理解的争论

科学家调查了当前人工智能&#xff08;AI&#xff09;研究界的一场激烈的争论&#xff0c;即大型预先训练的语言模型是否可以说可以理解语言——以及任何类人意义上的语言编码的物理和社会情境。他们提供了支持和反对这种理解的论点&#xff0c;以及根据这些论点而出现的更广泛…
阅读更多...
7个最新的时间序列分析库介绍和代码示例

7个最新的时间序列分析库介绍和代码示例

时间序列分析包括检查随着时间推移收集的数据点&#xff0c;目的是确定可以为未来预测提供信息的模式和趋势。我们已经介绍过很多个时间序列分析库了&#xff0c;但是随着时间推移&#xff0c;新的库和更新也在不断的出现&#xff0c;所以本文将分享8个目前比较常用的&#xff…
阅读更多...
SpringCloud学习（六）——Feign的简单使用

SpringCloud学习（六）——Feign的简单使用

文章目录1. Feign 的使用1.1 引入依赖1.2 添加注解1.3 编写Feign客户端1.4 测试2. Feign中的自定义配置2.1.配置文件方式2.2.Java代码方式3. Feign 性能优化4. Feign的抽取式使用4.1 抽取配置4.2 引入依赖4.3 指明Client在此之前&#xff0c;我们服务之间需要进行调用的时候使用…
阅读更多...
Spring Cloud Alibaba全家桶（十）——微服务网关Gateway组件

Spring Cloud Alibaba全家桶（十）——微服务网关Gateway组件

前言 本文小新为大家带来 微服务网关Gateway组件 相关知识&#xff0c;具体内容包括微服务网关Gateway组件&#xff08;包括&#xff1a;Gateway核心概念&#xff0c;Gateway工作原理&#xff09;&#xff0c;Spring Cloud Gateway环境搭建&#xff0c;路由断言工厂&#xff08…
阅读更多...
颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)

颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)

一年好景君须记&#xff0c;最是橙黄橘绿时。金三银四&#xff0c;秣马厉兵&#xff0c;没有一个好看的简历模板怎么行&#xff1f;无论是网上随便下载还是花钱买&#xff0c;都是一律千篇的老式模版&#xff0c;平平无奇&#xff0c;味同嚼蜡&#xff0c;没错&#xff0c;蜡都…
阅读更多...
一文理解Transformer整套流程

一文理解Transformer整套流程

【备注】部分图片引至他人博客&#xff0c;详情关注参考链接 【PS】query 、 key & value 的概念其实来源于推荐系统。基本原理是&#xff1a;给定一个 query&#xff0c;计算query 与 key 的相关性&#xff0c;然后根据query 与 key 的相关性去找到最合适的 value。举个例…
阅读更多...
mysql语法大全

mysql语法大全

首先来一个全局总览&#xff0c;后面我会分别对每个命令进行说明&#xff1a; 如果你的mysql导入环境变量&#xff0c;可以在命令行输入&#xff1a; mysql -u root -p然后输入密码登录数据库 否则&#xff0c;打开mysql command line并输入密码进入数据库 一&#xff0c;基础…
阅读更多...
HTTP HTTPS简介

HTTP HTTPS简介

一篇文章带你走进HTTP HTTPS场景复现核心干货HTTP/HTTPS简介&#xff08;简单比较&#xff09;HTTP工作原理HTTPS作用场景复现 最近在对前端的深入学习过程中&#xff0c;接触到了与网络请求相关的内容&#xff0c;于是打算出一个专栏&#xff0c;从HTTP与HTTPS入手&#xff0…
阅读更多...
针对航空安全风险分析和飞行技术评估问题的题解

针对航空安全风险分析和飞行技术评估问题的题解

文章目录针对航空安全风险分析和飞行技术评估问题的题解思路文章最下方针对航空安全风险分析和飞行技术评估问题的题解 最新进度在文章最下方卡片&#xff0c;加入获取思路数据代码论文&#xff1a;2023十三届MathorCup交流 (第一时间在CSDN分享&#xff0c;文章底部) 思路 问…
阅读更多...
VFP读写t5557卡示例源码

VFP读写t5557卡示例源码

T5557卡是美国Atmel公司生产的多功能非接触式射频卡芯片&#xff0c;属于125KHz的低频卡&#xff0c;在国内有广大的应用市场。该芯片共有330bit(比特)的EPROM(分布为10个区块, 每个区块33bit)。0页的块0是被保留用于设置T5557操作模式的参数配置块。第0页第7块可以作用户数据块…
阅读更多...
Excel表格怎么换行？4个方法任你选！

Excel表格怎么换行？4个方法任你选！

案例&#xff1a;excel表格怎么换行 【作为一名excel新手&#xff0c;我真的要被各种功能整懵了&#xff01;今天又遇到了一个难题&#xff01;excel表格怎么换行呀&#xff1f;各位大神帮帮我&#xff01;】 在excel表格中进行换行操作是一种常见的需求&#xff0c;可以使单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023