- 博客(121)
- 收藏
- 关注
RSS订阅原创 山海鲸——大屏可视化自学总结1
选择你组件所在文件夹，组件必须是 .html 结尾的文件，暂时不太支持vue项目的之间导入。山海鲸可视化拥有自己的组件，方便使用者直接拖拽使用，调整样式达到自己想要的东西。2、有些图形没有合适的组件使用，需要用html+css这种写出来的。-在山海鲸里面ctrl+F搜索二开echart，即可使用。如果你有线上的组件，可以直接修改iframe地址。-注意使用的js文件格式，必须是以下代码格式。1、使用山海鲸的二开echart图表。山海鲸自己集成了echart的配置。可以用山海鲸里面的iframe。
2024-05-22 14:12:52
83
原创 代码的复用——Mixin使用例子
在上面的例子中，我们定义了一个名为 mixin 的对象，它包含了一些方法。注意，如果Mixin和Vue实例中有相同的方法名，那么Vue实例中的方法将覆盖Mixin中的方法。在上面的例子中，我们定义了一个名为 “important-text” 的Mixin，它包含了一些CSS样式规则。然后，在 .danger 选择器中，我们使用 @include 指令引入了这个Mixin，并将它与其他样式规则一起应用到了 .danger 元素上。在Vue.js中，Mixin提供了一种非常灵活的方式来分发组件中的可复用功能。
2024-02-20 15:06:18
181
原创 js实现img图片懒加载
当然，这只是一个简单的示例代码，实际开发中可能需要处理更多的细节和边界情况。同时，也可以借助第三方的 JavaScript 库来简化懒加载的实现。然后，通过监听滚动、窗口调整大小和屏幕旋转等事件，在合适的时机检查图片是否需要加载。如果图片已经进入可见区域内，就将。在前端中，可以使用 JavaScript 来实现图片的懒加载。上述代码首先在页面加载完成后获取所有带有。类名，触发图片加载。
2023-08-25 17:30:25
460
原创 微信小程序开发，设置小程序为可转发可分享朋友圈
key=value’ 这里是示例代码中的一个参数，你可以将其替换为你自己的具体参数。你可以根据自己的需求来设置 query 参数的值，以便在分享朋友圈时携带相关的数据。具体的参数值可以是用户ID、商品ID、分享ID等，根据你的业务需求自由定义。例如，你可以根据当前页面的状态或用户的操作，动态生成 query 参数，你也可以根据自己的需求进行定制化设置，例如添加动态的分享内容、图片等。函数中，你可以设置转发的标题、页面路径和分享图片的链接。函数中，你可以设置分享朋友圈的标题和参数。
2023-08-03 15:43:34
3073
1
原创 TS写法,一看就会
4、 函数类型 可选参数 在可传可不传参数名称后面加?3、void 类型 函数没有返回值 那么返回值。1、指定 参数和返回值 的类型。
2023-07-10 10:35:09
692
原创 写一个js框架你会用到哪些设计模式
组合模式 (Composite Pattern)：组合模式可以用于将对象组合成树形结构，使得用户以一致的方式对待单一对象和对象集合。适配器模式 (Adapter Pattern): 适配器模式可以用于将不同对象之间的接口转换为兼容的接口。在上面的例子中，我们使用组合模式将文件和目录组合成树形结构，使得用户可以以一致的方式对待单一文件和文件集合。对象包裹在闭包中才隐藏了起来，而通过返回的对象，我们可以实现与其它模块互动并读取配置数据。通过使用工厂模式，我们可以方便地创建多个类似的对象。实例来管理浏览器窗口。
2023-05-10 09:28:14
967
1
原创 js-面试（1）
同源策略是一种用于网页安全的基本原则，它定义了浏览器如何限制一个文档或脚本如何与另一个源的文档或脚本进行交互的规则。所谓“同源”是指，两个网页具有相同的协议（即http或https）、主机名和端口号。这意味着，如果一个页面加载了来自其他源的文档、脚本或其他资源，浏览器将会根据同源策略去限制这些资源对当前页面的访问权限。同源策略的目的是防止恶意攻击者利用跨站点脚本攻击（XSS）等技术，从其他网站窃取用户数据或执行恶意代码。同时，同源策略也保障了用户隐私和数据安全。
2023-05-06 16:21:14
451
原创 js对链表的处理方法
链表是一种常见的数据结构，用于存储一系列元素，并按照一定顺序连接它们。在链表中，元素被存储在独立的节点中，每个节点都包含一个值和一个指向下一个节点的指针。通过这些指针，链表的一部分可以被轻松地插入到另一个链表的结尾或中间。链表的一个重要特点是它可以动态增长和缩小，并且在内存中非常紧凑。链表和数组不同，数组的所有元素都是存储在连续的内存块中的，而链表的节点可以分散在内存中的任意位置。因此，在数组中，可以通过索引来直接访问元素，但在链表中，必须通过遍历来访问元素。
2023-05-06 09:51:55
546
原创 babel.config解读一些常用的配置
这个 preset 是 Vue CLI 内置的一个 Babel 预设，它包含了一些常用的 Babel 插件和配置，用于将 ES6+ 语法转换为浏览器可识别的代码。如果将style属性设置为其他值，例如’scss’或’less’，则将使用相应的预处理器来处理样式文件。为一个函数，用于指定引入 Vant UI 库的样式文件路径，这里使用了 Less 样式预处理器。插件的一个配置项，用于指定引入的组件库的样式文件路径。将自动引入相应的CSS样式文件，以确保组件的样式正确显示。
2023-04-25 15:09:35
1672
原创 vue.config配置解读
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。下面是 vue.config.js 中的所有配置项及其解释：（太多找不着，按 ctrl + F 进行全局搜，搜不到的评论艾特我，我进行补充）publicPathoutputDirassetsDirindexPathpagesintegritydevServerproxy。
2023-04-25 10:33:31
1684
1
原创 new Date 时间的常用方法，点赞收藏，很多你不知道
toISOString() - 将当前日期转换为ISO格式的字符串，格式为"yyyy-MM-ddTHH:mm:ss.sssZ"toJSON() - 将当前日期转换为JSON格式的字符串，格式为"yyyy-MM-ddTHH:mm:ss.sssZ"toString() - 将当前日期转换为字符串，格式为"星期 月 日 年 HH:mm:ss 时区"toTimeString() - 将当前时间转换为字符串，格式为"HH:mm:ss 时区"toUTCString() - 将当前日期转换为UTC时间格式的字符串。
2023-04-24 15:16:38
3777
原创 new FormData 的详细使用方法
FormData是一个用于处理表单数据的API，它可以通过JavaScript来创建一个FormData对象，然后将表单数据添加到该对象中。
2023-04-24 14:41:26
1931
原创 vue3源码(3)——computed
这些对象和函数的组合，使得computed能够实现响应式的计算，并在计算过程中自动收集和更新依赖的响应式数据。Proxy对象中的get函数会调用ReactiveEffect对象中的run函数来执行getter函数，并在执行过程中使用track函数来收集computed所依赖的响应式数据。在Proxy对象中的set函数中，会调用ReactiveEffect对象中的invalidate函数来标记computed的值为无效，并在执行过程中使用trigger函数来触发computed所依赖的响应式数据的更新。
2023-04-23 17:03:23
684
原创 解读vue3源码（3）——watch
当数据发生变化时，Proxy对象的set方法会触发watcher实例的回调函数，从而更新组件的视图。在Vue3中，每个组件实例都会有一个watcher实例，用于监听组件数据的变化。当组件数据发生变化时，watcher实例会触发回调函数，从而更新组件的视图。在watcher实例的回调函数中，执行用户定义的回调函数，并将新旧值传递给回调函数。在Proxy对象的set方法中，触发watcher实例的回调函数。在回调函数中，执行用户定义的逻辑，例如更新组件的视图。创建一个Proxy对象，用于监听数据的变化。
2023-04-23 16:43:13
932
原创 vue-面试题（1）
13、Vue.js中的mixins和extends有什么区别？13、Vue.js中的keep-alive有什么作用？11、 Vue.js的Vue Router的路由守卫有哪些？9、Vue.js的v-for和v-if的顺序是什么？3、Vue.js的双向数据绑定是如何实现的？10、Vue.js的Vuex的中间件有哪些？1、Vue.js是什么？5、Vue.js的组件通信方式有哪些？6、Vue.js的路由是如何实现的？4、Vue.js的生命周期有哪些？8、Vue.js的过滤器有哪些？7、Vue.js的指令有哪些？
2023-04-23 11:13:29
810
原创 ant design vue自定义时间段范围(range-picker)，moment相关API
【代码】ant design vue自定义时间段范围(range-picker)，moment相关API。
2023-03-07 11:30:38
776
原创 css中的 :root
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
2022-10-09 15:36:04
7937
原创 vue3实现商城左右联动数据---BScroll（vue3代码复制就能用）
vue3实现商城左右联动数据---BScroll（vue3代码复制就能用）
2022-06-22 11:34:39
1027
原创 前端加密处理，对称和非对称
JSEncrypt 加密解密下载npm i node-rsanpm i jsencrypt大家可以自己 在线生成密钥对 来试试加密import { JSEncrypt } from 'jsencrypt'// 公钥const key = `xxxx`// 加密export function setEncrypt (msg) { const jsencrypt = new JSEncrypt() jsencrypt.setPublicKey(key) return jsenc
2022-05-25 11:00:35
648
1
原创 react函数式组件通信
父亲通过props给子传递信息父组件：import Son1 from './Son1' //引入子组件import { useState } from 'react'function Father(){ let [text, setText] = useState(0) return ( <> <Son1 text={text}></Son1> </> )}export default Father子组件：
2022-05-12 17:37:00
1394
原创 react双向绑定、监听、计算
在组件内部，我们使用useState来定义一个名为value的状态变量，并将其初始化为props.value。最后，我们在App组件中渲染了一个h1元素来显示name的值，并渲染了一个TextInput组件来实现双向绑定。在上面的例子中，我们定义了一个名为TextInput的组件，它接收一个value和onChange属性。在App组件中，我们使用useState来定义一个名为name的状态变量，并将其初始化为空字符串。一、在React中，函数式组件是一种轻量级的组件类型，它通常用于简单的UI组件。
2022-05-07 16:01:36
2171
原创 react插槽使用
slot(默认插槽)子：import React, { useState, useEffect } from "react"export default function Dialog(props) { // 原谅我用visible -1这种傻叉的方式先实现了, 重点不是在这里 const { children, title = '', visible = -1 } = props const [visibleInner, setVisibleInner] = useState(false
2022-05-07 11:20:36
919
原创 vue插槽的使用方法
slot(默认插槽)子：dialog.vue<template> <div class="dialog" v-show="visible"> <div class="dialog-mask" @click="onHide"></div> <div class="dialog-body"> <div class="dialog-title" v-if="title">{{ title }}</di
2022-05-07 11:12:37
517
原创 vue3—html元素变成图片canvas（海报生成），进行图片保存，复制就能用
// 网页上只有一张图片 我们可以直接就进行图片保存// 但是你想 保存这张图片的时候 顺便把下面的字也带上 相当于截图 那请你像我这样做 <div id="capture" style="padding: 10px; background: #fff"> <img :src="whoImg" style="width: 300px" alt="" /> <h4 style="color: #000">Hello world!</h4
2022-05-07 09:17:59
3724
7
原创 移动端一键复制
举个例子看了就会vant的Dialog Dialog.confirm({ title: '投诉编码', message: () => { return ( <input id="codeInput" style={{ border: 'none', textAlign: 'center' }} value={code} readonly &g
2022-05-06 16:24:06
883
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人