- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 ElementUI表格的动态渲染
场景表头不固定，根据后端返回的对象数组取key值为表头，value为行值。实现tableLookData为渲染数据，tableLookHeader为表头。 <el-table :data="tableLookData" border class="lookDataTable" ref="lookDataTable" @row-dblclick="dblclick" style="width: 100%; height: 100%"
2022-03-17 17:50:12
3110
1
原创 熟悉具名插槽和作用域插槽
为什么用插槽？使得我们的组件具有扩展性，由使用者决定组件内部展示的内容。将不同的地方定义为插槽暴露出去，根据使用的场景需求决定内容。具名插槽？有时候我们在一个组件需要用到多个插槽，用命名name="footer"的方式给每个插槽取名，可以区分它们。作用域插槽？在子组件中动态绑定需要传入的数据，在父组件传入数据给子组件。示例父组件<template> <div> <SlotDemo :title="title"> 具名：在指定的位置输
2021-11-23 11:58:09
574
原创 记录使用tinymce编辑器
示例<template> <div id="app"> <Editor style="width:100%" id="keyinfo-tinymce" :init="init" v-model="keyinfo" ></Editor> </div></template><script>import tinymce from 'tinymce/t
2021-11-22 10:02:04
320
原创 熟悉vue组件过渡效果
官方文档对过渡组件的介绍当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)动态渲染示例
2021-11-21 18:51:09
496
2
转载 熟悉Array.from()
语法：Array.from(arrayLike[, mapFn[, thisArg]])返回值：一个新的数组实例。Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。arrayLike想要转换成数组的伪数组对象或可迭代对象。mapFn 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。从String生成数组Array.from('foo');// [ "f", "o", "o"
2021-11-19 01:29:47
115
原创 Nuxt 报错：render function or template not defined in component: anonymous
问题描述：只想在Nuxt项目下的一个components组件下引入js而不是在插件那里引入，在组件内导入js包会报错。根据百度上别人报错的描述看了下，大概感觉是服务端客户端渲染的问题。解决方案：看报错不是组件名写错的问题，注释掉引入的包是正常渲染，一导入包就会报错，发现需要在包内判断if (process.client)是否为客户端。在js文件里做判断后报错消失。...
2021-09-28 14:18:48
1517
5
原创 vscode里突然.vue文件代码没有高亮
以为是按错键，原来是vue插件被我禁用了。误区：以为安装了Prettier-Standard - JavaScript formatter就不用启用vue插件了。vue2用Vetur，vue3用Volar。两个插件都启用后编辑器就可以识别到.vue文件了。代码不高亮也就解决了。...
2021-09-07 10:35:40
5192
原创 freeCodeCamp刷题之用D3实现数据可视化
D3jsD3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。append数据enter() 方法发现页面中没有 h2 元素，但是需要推入数据（每个对应 dataset 中的一个数据）。 新的 h2元素被append到 body，文本为 New item。<body> &l
2021-07-29 09:15:08
296
原创 freeCodeCamp刷题笔记之Redux
创建一个 Redux Store在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果你有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Reduxstore被定义为单个状态对象， 这是学习 Redux 时要理解的第一个重要原则：Redux store 是应用程序状态的唯一真实来源。这也意味着，如果应用程序想要更新状态，只能通过 Redux store 执行， 单向数据流可以更轻松地对应用程序中的状态进行监测管理。const..
2021-07-28 11:53:10
314
原创 使用Map优雅写多元判断
想要实现的效果使用el-slider组件，有不同的间断值，使用Map写多元判断，实现只能为我设定的间断值。Mapnew Map([iterable])Iterable 可以是一个数组或者其他 iterable 对象 Map 的键可以是任意值（包括函数、对象、基本类型），其元素为键值对(两个元素的数组，例如: [[ 1, ‘one’ ],[ 2, ‘two’ ]])。每个键值对都会添加到新的 Map。null 会被当做 undefined。页面 <el-popover placeme
2021-07-28 10:54:06
339
原创 freeCodeCamp刷题笔记之React
目录创建单个元素创建多个元素在JSX里添加注释渲染 HTML 元素为 DOM 树在 JSX 中定义一个 HTML Class创建一个类式组件使用 React 渲染嵌套组件传递一个数组作为 Props使用默认的 Props覆盖默认的 Props使用 PropTypes 来定义 Props 的类型无状态函数组件的 Props创建一个有状态的组件在用户界面中渲染状态使用state切换元素写一个简单的计数器创建可控制的输入框创建一个可以控制
2021-07-20 19:54:58
414
原创 freeCodeCamp刷题笔记（八）之中级算法
数组的对称差function diffArray(arr1, arr2) { let result1=arr1.filter(function(x){ return arr2.indexOf(x) === -1; }) let result2=arr2.filter(function(x){ return arr1.indexOf(x) === -1; }) let result=result2.concat(result1); return result;}
2021-05-19 16:37:59
191
原创 freeCodeCamp刷题笔记（七）
面向对象编程自身属性和prototype属性。 自身属性是直接在对象上定义的。 而prototype属性是定义在prototype上的。function Bird(name) { this.name = name; //own property}Bird.prototype.numLegs = 2; // prototype propertylet duck = new Bird("Donald");新增多个prototype属性function Dog(nam...
2021-05-11 10:01:48
367
原创 freeCodeCamp刷题笔记（六）
创建一个具有m行和n列“零”的二维数组function zeroArray(m, n) { // 创建一个二维数组，有 m 行 n 列，元素均为 0 let newArray = new Array; let row = new Array; for (let i = 0; i < m; i++) { // 添加第 m 行到 newArray for (let j = 0; j < n; j++) { // 将 n 个 0 推入当前行以创建列
2021-05-06 14:58:21
244
5
原创 freeCodeCamp刷题笔记（五）
匹配多个字符串 |let petString = "James has a pet cat.";let petRegex = /dog|cat|bird/; // 修改这一行let result = petRegex.test(petString);匹配时忽略大小写 ilet myString = "freeCodeCamp";let fccRegex = /freeCodeCamp/i; // 修改这一行let result = fccRegex.test(myString);..
2021-05-05 17:37:11
624
原创 freeCodeCamp刷题笔记（四）
使用箭头函数编写简洁的匿名函数当不需要函数体，只返回一个值的时候，箭头函数允许你省略return关键字和外面的大括号。 这样就可以将一个简单的函数简化成一个单行语句。const myFunc = () => "value";将 rest 操作符与函数参数一起使用let sum=(...args) =>args.reduce((a, b) => a + b, 0);console.log(sum(1, 2, 3)); // 6使用解构赋值来获取对象的值解构赋..
2021-05-05 11:04:58
184
原创 freeCodeCamp刷题笔记（三）
排队function nextInLine(arr, item) { arr.push(item); var item=arr.shift(); return item;}
2021-04-28 22:12:14
261
原创 freeCodeCamp刷题笔记（二）
了解 Alt 文本留空的情景对于有标题的图片，依然需要添加 alt 文本，因为这样有助于搜索引擎记录图片内容。使用标题显示内容的层次关系语义化的意思是，标签名能准确地表达它所含内容的信息类型。figure 标签使用 label 元素提高表单的可访问性label 标签的 for 属性与表单组件的name绑定。使用fieldset 标签包裹整组单选按钮<form> <fieldset> <legend>Choose one of
2021-04-19 10:24:16
202
原创 freeCodeCamp刷题笔记（一）
使用属性选择器来设置元素的样式// 使用 [attr=value] 属性选择器来修改[type='radio'] { margin: 20px 0px 20px 0px;} 绝对单位与相对单位单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如
2021-04-15 23:43:42
222
原创 css实现印章效果
效果代码实现直白的说就是两个有boder的圈，字体相对圈圈绝对定位，倾斜使用到transform的rotate属性。下面展示一些 内联代码片。// 页面<view style="margin-bottom: 20rpx;position: relative;"> <view class="tui-col-12" style="display: flex;"> <view class="tui-col-4 tui-center dotted" style="fon
2021-04-14 14:34:14
6755
原创 css实现票据效果
先上效果图代码实现吃饭的时候突然想到可以这么实现，哈哈，干饭人的灵感总是来得这么突然。下面展示一些 内联代码片。<view class="tui-col-12"> <view class="order-bg"> <view class="left-circle"> </view> <view class="right-circle"> </view> <view class="order-line"&
2021-04-14 00:35:30
1091
原创 对微信小程序云数据库进行增删改查
对微信小程序云数据库进行增删改查微信小程序云开发具体文档：https://developers.weixin.qq.com/miniprogram/dev/framework/get：获取记录数据页面元素：<button type="primary" bindtap="getData">点击获取数据</button><view>{{dataObj.title}}</view><view>{{dataObj.author}}</vi
2020-09-29 16:57:53
717
原创 vue中引用BScroll监听上拉加载报错
项目场景：项目场景：使用better-scroll2.0.4替代原生滚动，原因：原生滚动在移动端体验差，卡顿感强烈。问题描述：报错：mounted() { this.scroll = new BScroll(this.$refs.wrapper,{ probeType:this.probeType, click:true, pullUpLoad:this.pullUpLoad }) if (this.probeTy
2020-09-22 18:01:25
417
原创 关于ivx短信组件的小白经验总结
关于ivx短信组件的经验总结怎么实现短信推送发送短信具体操作下一步我要做什么怎么实现短信推送https://demo.ivx.cn/这是ivx的官方教学Demo，打开之后搜索“短信”，我是跟着第二个Demo实现的短信推送。发送短信发送短信动作分为模板短信和自定义短信，模板短信目前提供了八种模板，选择每种模板后只需要设置自己的变量即可。这次我选的是模板短信测试第一个模板，确认用户身份。具体操作跟着Demo做就是了，每个组件的事件都自己亲手选择，这样有助于成长。不建议直接复制粘贴。要提醒的是，不
2020-06-06 18:18:24
260
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人