前端开发
-
第一步：安装 i18n 这里为了让 Element 兼容，安装的是 8 版本的 npm install vue-i18n@8 第二步：在 src 目录下新建一个i18n文件 一般有三个文件：index.js( 配置 )、zh( 中文 )、en( 英文 ) 如果有个更多的语言设置，新增对应的 js 文件即可注意：所有语言包的内部结构必须一样，方便调用 1.index.js 文件 /* * @Author: pcf pcf * @Date: 2022-07-19 10:29:46 * @Las
2024-12-02 -
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明 <div class="d1" id="BFC1"> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div
2024-12-02 -
高阶组件——基本含义 高阶组件——扩展render （1）创建工厂函数 import React from 'react'; /** * 罗列工厂函数 * WrappedComponent：传入一个react组件 * componetSetting：自定义一个对象传入相应的组件配置 */ function withHeaders(WrappedComponent,componetSetting) { /** * 返回一个代理组件的渲染，而原先的组件黑包裹在了里面，这
2024-12-02 -
1、效果展示 2、代码 import React from 'react'; import Swiper from 'swiper'; //引入swiper 样式 import 'swiper/dist/css/swiper.min.css'; import 'swiper/dist/js/maps/swiper.jquery.min.js.map' //引入样式 import './index.css' // import './swiper.min.css' class Timeline
2024-12-02 -
开始写PWA 前言 PWA（Progressive Web Apps）是 Google 提出的一个新的 web 体验方式，离线时也可以访问，极大的提升了用户体验。 有三个特性： * Reliable (可靠的) * Fast (快速的) * Engaging (可参与的) 具体可以看的介绍，这里不再赘述。 技术点 栗子 新建一个 index.html 文件如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
2024-12-02 -
一.WebSocket 简单介绍 1.HTTP和WebSocket的区别 http：通信只能由客户端发起； WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种；在webSocket协议下客服端和浏览器可以同时发送信息。 2.WebSocket应用场景 数据推送：webSocket可以代替ajax轮询（即客户端通过一定的时间间隔不断向服务器发起请求获得数据，因此会占用许多带宽和服务器资源），但是webSocket不一
2024-12-02 -
前言 上篇 讲到项目中经常会用到 table 表格，所以做了封装。当然，form 表单使用的频率依然很高，所以和封装 table 表格的思路相似，对 form 表单也做了一个二次封装的组件。 效果图 预览地址 1. EasyForm 表单组件封装 src/components/EasyForm/index.vue Form 表单组件封装 <template> <el-form @submit.prevent :model="formModel" v-bind="_option
2024-12-02 -
为了编码整个URL，通常会使用encodeURI函数，而不是encodeURIComponent，这是出于以下原因： 1、 保留URL的结构 encodeURI用于编码整个URL，它会保留URL中合法的分隔符（如:、/、?、#、@、&、=、+、$、,、;等），这些分隔符对于URL的结构是必需的。 例如，编码http://example.com/path?name=John Doe时，encodeURI会保留?和=，因为它们是查询字符串的一部分。 2、安全性： 使用encodeURI可以避免URL
2024-12-02 -
废话不多说，直接上代码 <script setup lang="ts"> import { computed } from "vue"; import { mapActions, mapGetters, mapMutations, mapState, useStore } from "vuex"; const store = useStore(); //computed属性结合mapState、mapGetters const [abc, list] = Object.values(map
2024-12-02 -
一、面向对象 1. 继承 只要将方法定义放在构造函数中，那么每次 new 时都会执行 function，这样就会反复创建相同函数的多个副本，导致浪费内存。如果将来发现多个子对象都要使用相同的功能和属性值时，都可以用继承来解决。 父对象中的成员，子对象无需重复创建就可直接使用，就像使用自己的成员一样，这就是继承。js 中的继承都是通过原型对象实现的，原型对象就是替所有子对象集中保存共有属性值和方法的特殊父对象。当多个子对象需要使用相同的功能和属性值时，都可将
2024-12-02