随笔分类 -  杂谈

个人自学前端46-function()和new function()的区别
摘要：<script> export default { created() { this.test1() this.test2() this.test3() }, methods: { test1() { // 基础用法 const a = 'a1' function fun() { console.l 阅读全文
posted @ 2023-03-01 09:40 暗鸦08 阅读(23) 评论(0) 推荐(0)
个人自学前端47-export default 和 import语句中对象的解构赋值问题
摘要：(目录) 共同点 export与export default均可用于导出常量、函数、文件、模块等。 区别 1.在一个文件或模块中，export、import可以有多个，export default仅有一个 2.通过export方式导出，在导入时要加{}，export default则不能加 3.ex 阅读全文
posted @ 2023-02-24 09:29 暗鸦08 阅读(359) 评论(0) 推荐(0)
自用对比vue2的vue3+vite 笔记
摘要：(目录) 一. 自用基础对比研究 子组件 <script setup> import { reactive, ref, computed, watch, watchEffect, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBefor 阅读全文
posted @ 2022-12-30 16:00 暗鸦08 阅读(120) 评论(0) 推荐(0)
vue+nuxtJs+monaco制作Monaco Editor编辑器
摘要：(目录) 前言 使用版本较低 一、版本 二、使用前配置 nuxt.config.js 实现下方五种语言的自动补全 三、使用 <template> <div class="warp"> <div ref="container" class="monaco"></div> </div> </templa 阅读全文
posted @ 2022-12-29 14:19 暗鸦08 阅读(771) 评论(1) 推荐(0)
自用vue+nuxtJs+vue-monaco制作Monaco Editor编辑器
摘要：(目录) 前言 有小bug；后续写个不用vue-monaco 一、版本 二、使用前配置 按插件作者说明下载 1.插件注册文件 2.nuxt.config.js 实现下方四种语言的自动补全 三、使用 <template> <div class="warp"> <monaco-editor ref="m 阅读全文
posted @ 2022-12-28 17:17 暗鸦08 阅读(604) 评论(0) 推荐(0)
简易搜索组件（vue键盘事件）
摘要：<template> <div class="hello"> <h1>值：{{text}}</h1> <div class="box" @keydown.down="increment" @keydown.up="decrement" @keydown.enter="go" > <div class 阅读全文
posted @ 2022-08-05 17:36 暗鸦08 阅读(98) 评论(0) 推荐(0)
css简易收缩展开动画
摘要：.fade-in-top { // 收缩 overflow: hidden; transition: max-height 0.5s ease-out; -webkit-transform: max-height 0.5s ease-out; max-height: 0; } .slide-out- 阅读全文
posted @ 2022-06-21 15:24 暗鸦08 阅读(2020) 评论(0) 推荐(0)
@nuxt/content的大坑
摘要：(目录) 一. this.$content().search()只能获得从开头开始输入的字段 官网链接 https://nuxtjs.org/docs/directory-structure/content/ https://content.nuxtjs.org/v1/getting-started 阅读全文
posted @ 2022-06-10 16:37 暗鸦08 阅读(502) 评论(0) 推荐(0)
个人自学前端43-杂谈-vue中iframe中通信
摘要：(目录) 需求：菜单点击关闭按钮，页面关闭前可能会有页面关闭前事件，需要传方法到页面中 一. 不跨域 外框 <template> <div> <iframe ref="pageRef" :src="src"></iframe> </div> </template> <script> export d 阅读全文
posted @ 2022-04-09 17:06 暗鸦08 阅读(74) 评论(0) 推荐(0)
个人自学前端42-杂谈-vue中树的深度遍历和广度遍历
摘要：(目录) 一. 深度遍历 // res 遍历的数组，id 判断条件 console.log(this.setMenuId(res,id)) setMenuId(res, id) { for (let i = 0; i < res.length; i++) { // 条件判断 if (res.id = 阅读全文
posted @ 2022-04-09 16:01 暗鸦08 阅读(192) 评论(0) 推荐(0)
import 与 export 个人学习
摘要：(目录) export 导出 export 命令用于规定模块的对外接口 // 写法一，直接导出 export const m = 1; // 写法二，使用解构导出 const m = 1; export {m}; // 写法三，重命名导出的内容 const n = 1; export {n as n 阅读全文
posted @ 2022-02-27 20:17 暗鸦08 阅读(149) 评论(0) 推荐(0)
gojs中ZoomSlider放大缩小组件的坑
摘要：(目录) 一. 需求 在gojs的画布上使用ZoomSlider放大缩小组件。 二. 问题 使用elementui中的Tabs切换标签，不同标签中的ZoomSlider按钮位置错乱。 三. 排查源码 发现源码根据ID来获取元素，但在VUE中会导致ID不唯一，所以按钮位置错乱 四. 解决问题 创建元素 阅读全文
posted @ 2022-02-12 13:58 暗鸦08 阅读(1048) 评论(0) 推荐(0)
简单前端分页
摘要：(目录) 参数 // 参数 pageParam{ total: 0, // 总数 pageSize: 10, // 每页显示条数 page: 1, // 默认页数 } 核心代码 getDataByPage(pageParam) { let newData = []; // 返回值 let {tota 阅读全文
posted @ 2022-01-24 17:13 暗鸦08 阅读(76) 评论(0) 推荐(0)
flex杂谈-解决 Flex 子元素居中，溢出滚动后被裁切的问题
摘要：(目录) 一. 需求 为开发一个空状态通用组件，需要将所有内容水平垂直居中，还需要横向纵向排列，故选择flex布局。 组件内容分为三部分，图片、文字、其他（插槽） 默认状态，组件排列方式为纵向，图片307*145，所有内容水平垂直居中。 容器宽高任一小于330px，假设宽大于高组件排列方式变为横向， 阅读全文
posted @ 2022-01-20 16:21 暗鸦08 阅读(1695) 评论(0) 推荐(0)
个人网站推荐
摘要：一. 前端 HTML 兼容性 http://browserhacks.com/ JS ALL BLACK SCREEN https://allblackscreen.com/ 任何设备API https://webapicheck.com/ css 不同浏览器样式兼容Normalize.css ht 阅读全文
posted @ 2021-11-29 12:55 暗鸦08 阅读(2717) 评论(0) 推荐(1)
个人自学前端40-杂谈-URL中#?&号，window.location对象
摘要：(目录) 一.#号（锚点） 代表网页中的一个位置。其右面的字符，就是该位置的标识符。浏览器读取这个URL后，会自动将print位置滚动至可视区域。 在VUE中，路由的实现方式有两种，其中一种就是通过#标识符进行页面内导航从而实现路由切换。 HTTP请求不包括# 用来指导浏览器动作的，对服务器端完全无 阅读全文
posted @ 2021-10-28 23:08 暗鸦08 阅读(188) 评论(0) 推荐(0)
腾讯文档-实时协同功能思路
摘要：(目录) 一.整体参考资料 富文本编辑器的技术演进之路 谷歌文档开发思路 实现一个多人协作有哪些难点？ 从零开始设计一个Web端多人协同编辑器思路 二.实时通信问题 解释： 使不同用户在同一文档查看到内容的修改 方法：使用WebScoket可以使不同用户在同一文档查看到内容的修改 参考链接：http 阅读全文
posted @ 2021-06-24 09:57 暗鸦08 阅读(2159) 评论(0) 推荐(1)