- 博客(81)
- 收藏
- 关注
原创 vue3 + mark.js | 实现文字标注功能
子绝父相topleftjavascript操作光标和选区详情可参考文档:https://blog.51cto.com/u_14524391/3712814${
2023-09-26 17:07:17
1800
1
原创 vue3 | defineExpose的使用
使用的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例,不会暴露在任何在中声明的绑定换句话说,如果一个子组件使用的是选项式 API 或没有使用,被引用的组件实例和该子组件的this完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问权。但是如果使用了的组件,这种组件是默认私有的,也就是一个父组件无法访问到一个使用了的子组件中的任何东西,除非子组件在其中通过// 像 defineExpose 这样的编译器宏不需要导入a,b})</script>
2023-09-21 14:55:53
689
原创 javascript | 变量、函数、属性的命名规则
变量、函数、属性的名字、或者函数的参数,都可称为标识符。标识符可以是按照下列格式规则组合起来的一个或者多个字符。字母下划线_美元符号$数字数字字母下划线_美元符号$
2023-09-08 16:06:32
497
原创 naiveui | select下拉选择自定义选项渲染
要提升价值就要改变; 要达到完美就得经常改变。To improve is to change; to be perfect is to change often.
2023-09-01 11:06:57
3047
原创 naiveui | 数据表格超长文字省略处理
使用 弹出信息Popover组件,自定义省略内容的宽度title: '文本',return h(NPopover,// width: 'trigger', //设定 `width="trigger"` 使 popover 的宽度等于触发元素。maxWidth: '600px', //自定义宽度},},h('p',},),},},Data TablePopover。
2023-08-29 13:20:06
637
原创 【css面试篇】| 清除浮动
理想中的状态,让子盒子撑开父亲,有多少孩子,父盒子就有多高。由于父级盒子在很多情况下,不方便给高度,但是子盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。子不教父之过,注意是给父元素添加代码。我们浮动元素有一个标准的父元素,他们都有一个共同的特点,都是有高度的。但是,所有的父盒子都必须有高度吗?由于浮动元素不再占有原文档流的位置,所以他会对后面的元素排版产生影响。额外标签法会在浮动元素的末尾添加一个空的标签。注意:要求这个添加的新的空标签必须是块级元素。清除浮动的策略是:闭合浮动。
2023-07-31 11:04:32
80
原创 支付宝小程序 | 上传图片组件(添加默认样式以及自定义上传样式)
人们害怕他们不理解的东西。 People are afraid of what they don't understand.
2023-05-25 20:32:38
1132
原创 支付宝小程序 | 下拉刷新、自动刷新、上拉加载
demo.js//做相应的逻辑处理},参考文档:https://blog.youkuaiyun.com/qq_42345108/article/details/124321126。
2023-03-28 20:43:28
1427
1
原创 vue3 + naiveui | 实现input自定义上传图片(可拖拽)
vue3 + naiveui | 实现input自定义上传图片(可拖拽)
2023-02-09 20:56:08
1267
原创 vue3 | shallowReactive 、shallowRef、triggerRef
vue3 | shallowReactive 、shallowRef、triggerRef
2023-02-09 20:48:12
227
原创 CSS3 animation 动画用法介绍
一、css3 动画是什么css3动画是使用css3的动画属性,去控制页面元素,让元素从一种样式逐渐变化为另一种样式的效果。二、css3的动画属性三、animation 介绍animation主要包含六个属性,具体含义如下:(一)、keyframe在介绍animation具体使用之前,要先介绍keyframe。@keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式(或者说停留点)来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。要使
2021-12-30 00:45:37
7913
原创 immutable.js学习笔记(八)----- immutable.js对象 和 原生对象的相互转换
一、原生对象转换为immutable.js对象fromJS例子2如果数组里面有对象,对象里面有数组,怎么转换呢复杂结构的转换二、immutable.js对象转换为原生对象toJS()是对象身上自己带的
2021-04-24 22:14:18
262
原创 immutable.js学习笔记(七)----- Seq
一、Seq简介懒得意思就是“不运算,不执行”二、运行当console.log这个值的时候,才去观察三、任意collection四、Seq.keyed五、Seq.Indexed六、Seq.Set
2021-04-24 22:12:13
230
原创 immutable.js学习笔记(五)----- Set
一、Set二、add 和 delete注意:删除后的Set是无序的三、clear四、union五、intersect注意是无序的六、subtract七、forEach循环key与value一样的八、getget下标是没有意义的九、has十、reset十一、butlast十二、skip十三、skipLast十四、skipWhile十五、skipUntil找到第一个不包含o的十六、take十七、takeLast十八、takeWhil.
2021-04-24 22:09:18
171
原创 immutable.js学习笔记(六)----- OrderedSet
二、普通Set于 OrderedSet注意:普通Set并不是严格的一定是升序的三、takeWhile四、升序 sort valueA - valueB五、降序 valueB - valueA
2021-04-24 21:58:33
443
原创 immutable.js 学习笔记(三)----- Map
MapMap在原生的js中对应的是Object这样的结构,它都是key-value的键值对,并且它是无序的APIsetdelete每做一次增删改查都会把这些数据重新生成一份,如果要想删除多个key的话,对内存的消耗也是很大的,所以deleteAll是一次删除多个key,然后只返回一次新的对象deleteclearupdatemergemergeWith第一个参数表示:如果值重复的话应该怎么办setIntoJS() 与 toJSON()toJS() 是深转换to
2021-04-24 21:57:00
239
原创 immutable.js学习笔记(二)----- List
一、immutable.js介绍示例:使用immutable.js二、Listlist与数组是兼容的,大多数的api与数组是类似的List.of(),不需要写中括号(二)List的APIsizeset如果下标超过数组值,自动填充为undefined把最后一个值更改,无需取得数组长度delete删除下标为0的数从右往左数,删掉第二个insert这个会把数组完整的拷贝下来,性能不是特别好updateclearclear是进行一次copy,返回一个新
2021-04-24 21:44:35
229
原创 immutable.js学习笔记(一)----- Immutable简介
一、Immutable.js 介绍Immutable.js 官方文档 : https://immutable-js.github.io/immutable-js/关于Immutable的定义,官方文档是这样说的:Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoiz
2021-04-24 21:43:17
466
原创 移动 WEB 开发之 阿里百秀移动端页面制作
技术选型需求分析1.页面布局分析2. 屏幕划分页面制作1. 项目前期准备搭建项目结构创建 html 骨架结构以及引入相关样式<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie
2020-12-13 22:13:23
650
原创 Bootstrap 的基本使用
一、BootStrap 简介BootStrap是目前受欢迎的前端框架之一,是基于HTML,CSS,JavaScript的,它简洁灵活,使web开发更加快捷中文官网:http://www.bootcss.com/官网:http://getbootstrap.com/推荐:https://v3.bootcss.com/1.优点2. 版本二、 BootStrap 使用控制权在框架本身,使用者要安装框架所规定的某种规范进行开发BootStrap使用四部曲:2.1 创建文件夹结构2.2
2020-12-13 22:12:17
846
原创 移动 WEB 开发布局方式 ---- flex 布局
一、flex布局体验1.1 传统布局 flex 布局1. 2 初体验1. 搭建 HTML 结构<div> <span>1</span> <span>2</span> <span>3</span></div>2. 添加样式<style> div { width: 80%; height: 300px; b
2020-12-13 22:08:35
226
原创 使用 flex布局 制作携程网首页
1. 技术选型2. 搭建相关文件夹结构3. 引入视口标签以及初始化样式4. 常用初始化样式5. 首页布局分析以及搜索模块布局index.css/*搜索模块*/.search-index{ /*固定定位跟父级没有关系,它以屏幕为准*/ position: fixed; top: 0; left: 50%; /*固定的盒子应该有宽度*/ -webkit-transform: translateX(-50%); transform: ..
2020-12-13 22:07:28
668
原创 移动 WEB 开发布局方式 ---- rem 适配布局
一、rem 基础1. rem 单位em :相对于父元素的字体大小来说的<div> <p></p></div>div { font-size: 12px; } p { width: 10em; height: 10em; background-color: pink; }rem:相对于 html 元素字体大小来说的 html { .
2020-12-13 22:01:15
317
原创 使用 flexible.js + rem 制作苏宁移动端首页
一、技术选型二、搭建相关文件夹三、设置视口标签以及引入初始化样式文件和js文件四、body 样式五、rem 适配方案二 body样式修改index.cssbody { min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份 */ width: 10rem; margin: 0 auto; line-height: 1.5; font-family: Arial, He
2020-12-13 22:00:23
356
原创 移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作
一、技术选型二、搭建相关文件夹结构三、设置视口标签以及引入初始化样式四、设置公共common.less 文件common.less//设置常见的屏幕尺寸大小,修改里面的html 文字大小//因为在 pc 端也可以打开苏宁的移动端网页//我们默认字体大小为 50 px html { font-size: 50px;}//注意:这句话一定要写在最上面//定义划分的份数 15等份@no:15;//320 大小的屏幕@media screen and (min-widt
2020-12-13 21:57:51
816
2
原创 移动 WEB 开发布局方式 ---- 响应式布局
一个页面布局兼容了 PC端 iPad 端 和移动端所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型特点:响应式布局是不需要单独写移动端页面的响应不同的设备来发生变化的一、响应式开发1.1 响应式开发原理1.2 响应式布局容器栗子:<style> .container { height: 150px; background-color: pink; margin: 0 auto;
2020-12-13 21:21:20
235
原创 简述 JavaScript 的执行机制
一、同步和异步为了解决这个问题,防止下一个任务等待上一个任务等待太长的时间,所以提出了 Web Worker标准,允许 JS 创建多个线程,于是JS出现了同步 和 异步 ,异步就是可以同时进行多个任务,这样,大大的提高了我们代码的执行效率栗子:打印结果为:同步任务同步任务都在主线程上执行,形成一个执行栈异步任务JS的异步通过回调函数来实现,一般而言,异步任务有三种类型普通事件: click事件 ,resize事件等资源加载,如load,error等定时器,包括 se
2020-12-01 15:19:57
122
原创 apply 、call 以及 bind 的使用和区别
一、被apply和call调用的函数中没有传递参数(一)不传参数结果:(二)传递 null结果:总结:1.当使用 apply和 call去调用函数并且没有传递参数时,前提这个函数中也没有传递参数,我们发现 他们的打印结果和 this 指向是相同的 都是指向window 此时相当于 f1() 调用函数 就相当于 f1.apply() 和 f1.call()2.当传递 null 的时候,他们的指向也是相同的 都是指向 window此时相当于 f1() 调用函数 就相当于 f1.
2020-12-01 12:25:49
529
原创 vuex 的使用详解
一、vuex 概述1.组件之间共享数据的方式只适合在小范围内进行数据共享,如果我们需要频繁的进行数据共享,这三种方案就优点力不从心,2.vuex 是什么主要实现数据共享状态值的就是 vuex 中所要共享的全局数据vuex 就是实现组件之间共享数据的方案3. 使用 vuex 的好处4.什么样的数据适合存储到 vuex 中但是这三种方案,只适合小范围的数据共享,如果我们需要频繁的大范围的进行组件之间的数据共享,那么我们就适合使用 vuex二、vuex 的基本使用...
2020-11-30 19:59:15
210
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人