08 2021 档案

摘要:值得注意的新特性 1==> 组合式 API 2==> Teleport 3==> 片段 4==> 触发组件选项 5==> createRenderer API 来自 @vue/runtime-core 创建自定义渲染器 6==> 单文件组件组合式 API 语法糖 (<script setup>) 实 阅读全文
posted @ 2021-08-30 17:35 南风晚来晚相识 阅读(167) 评论(0) 推荐(0) 编辑
摘要:<a-drawer :title="myTitle" placement="right" :visible="visible" @close="onClose" width="720" :bodyStyle="{ marginBottom: '30px' }" > </a-drawer> :body 阅读全文
posted @ 2021-08-28 17:30 南风晚来晚相识 阅读(3897) 评论(0) 推荐(0) 编辑
摘要:单文件上传 <a-upload name="file" :beforeUpload="beforeUpload" :multiple="false" accept=".xls,.xlsx" :showUploadList="nofalse" class="select-file" :customRe 阅读全文
posted @ 2021-08-27 12:42 南风晚来晚相识 阅读(692) 评论(0) 推荐(0) 编辑
摘要:场景描述 echarts主要用于数据可视化展示 有些时候,我们可能会根据不同的条件,在页面上进行显示和隐藏。 比如说:页面最初展示了数据,当我点击不同的按钮的时候。 echarts会对应的展示或者隐藏。 下面当我点击单个机构的时候。 echarts会隐藏,点击多个机构的时候,echarts会展示出来 阅读全文
posted @ 2021-08-26 21:03 南风晚来晚相识 阅读(1649) 评论(0) 推荐(0) 编辑
摘要:场景描述 在工作中,我们经常需要进行文件上传。 比如在进行图片上传的时候, 我们需要将上传的图片展示出来。 这个时候我们就需要将file文件转化为base64。 将file文件转化为base64 // 将file文件上传转化为base64进行显示 function getBase64(file) { 阅读全文
posted @ 2021-08-26 20:04 南风晚来晚相识 阅读(5685) 评论(0) 推荐(0) 编辑
摘要:// 假设httpServe 是服务器返回来的数据 // 我们这里有一个需求, // 某一个区域需要对这一份数据进行展示 // 另一个区域需要只需要展示前1条数据 let httpServe = [ { name: '张三', age: 14 }, { name: '李四', age: 13 }, 阅读全文
posted @ 2021-08-25 22:28 南风晚来晚相识 阅读(285) 评论(0) 推荐(0) 编辑
摘要:<template> <a-table :columns="columns" :data-source="data"> <template #action> <a>action</a> </template> </a-table> </template> <script lang="ts"> imp 阅读全文
posted @ 2021-08-24 19:21 南风晚来晚相识 阅读(24) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-24 00:37 南风晚来晚相识 阅读(1957) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-22 15:18 南风晚来晚相识 阅读(544) 评论(0) 推荐(0) 编辑
摘要:通过 show:false控制手否显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v 阅读全文
posted @ 2021-08-22 11:39 南风晚来晚相识 阅读(803) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-20 00:02 南风晚来晚相识 阅读(74) 评论(0) 推荐(0) 编辑
摘要:设置legend样式 legend: { x: 'center', data: ['班车', '包车'], icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none itemWidt 阅读全文
posted @ 2021-08-19 23:40 南风晚来晚相识 阅读(579) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <!-- https://blog.csdn.net/weixin_42698255/article/details/89249531 --> <head> <meta charset="utf-8"> <title>五分钟上手之饼状</title> < 阅读全文
posted @ 2021-08-19 22:38 南风晚来晚相识 阅读(1106) 评论(0) 推荐(0) 编辑
摘要:场景描述 场景描述:在用户刷新页面或者关闭页面的时候,前端要给后台发一条请求,释放该页面的授权占用。 最初的代码 window.addEventListener("beforeunload", () => { let oReq = new XMLHttpRequest(); oReq.open("P 阅读全文
posted @ 2021-08-19 13:31 南风晚来晚相识 阅读(168) 评论(0) 推荐(0) 编辑
摘要:定义饼状图的指向线内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2021-08-19 13:06 南风晚来晚相识 阅读(416) 评论(0) 推荐(0) 编辑
摘要:option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, //定义折线图legend的形状哈 legend: { itemWidth: 10, itemHeight: 1, itemGap: 10, data:[ {name 阅读全文
posted @ 2021-08-18 22:20 南风晚来晚相识 阅读(464) 评论(0) 推荐(0) 编辑
摘要:var option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, //中央自定义文字 title:{ text:'总考生数', left:'center', top:'45%', textStyle 阅读全文
posted @ 2021-08-17 23:20 南风晚来晚相识 阅读(811) 评论(0) 推荐(0) 编辑
摘要:xAxis: { data: ["土地、房屋及建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、装具及动植物", "袜子"], // 坐标与标签刻度对齐 axisTick: { alignWithLabel: true } }, 阅读全文
posted @ 2021-08-17 22:53 南风晚来晚相识 阅读(1295) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echa 阅读全文
posted @ 2021-08-17 22:44 南风晚来晚相识 阅读(1782) 评论(0) 推荐(0) 编辑
摘要:我们在使用echarts中,可能会遇见文字太长。导致显示不完全。 我们可以使用换行来处理 第一方式直接使用 \n 文字直接换行显示 使用\n <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</tit 阅读全文
posted @ 2021-08-17 22:18 南风晚来晚相识 阅读(3231) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echa 阅读全文
posted @ 2021-08-17 21:58 南风晚来晚相识 阅读(1666) 评论(0) 推荐(0) 编辑
摘要:series: [{ name: '销量', type: 'bar', barWidth : 30,//柱图宽度 data: [5, 20, 36, 10, 10, 20], itemStyle: { //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多 normal: { 阅读全文
posted @ 2021-08-17 21:48 南风晚来晚相识 阅读(4177) 评论(0) 推荐(0) 编辑
摘要:barWidth属性 series: [{ name: '销量', type: 'bar', barWidth : 30,//柱图宽度 data: [5, 20, 36, 10, 10, 20] }] 阅读全文
posted @ 2021-08-17 21:48 南风晚来晚相识 阅读(1160) 评论(0) 推荐(1) 编辑
摘要:场景描述 在项目开发中。我们可能会使用父组件调用子组件中的方法 也有可能子组件中调用父组件中的方法 下面我们来看一看组件之间方法的调用 父组件页面 <template> <div> <list-com ref="listRef"></list-com> <button @click="changeV 阅读全文
posted @ 2021-08-16 22:25 南风晚来晚相识 阅读(2364) 评论(0) 推荐(0) 编辑
摘要:场景描述 在使用vue3的时候。我们很多人喜欢一个页面分成几个几个部分来写 这样做的目的是为了区分。 做的彼此的逻辑互相独立,互不干扰 但是有的时候,我们可能会去获取不属于自己区域的函数 这个时候我们有集中方式去获取函数呢?? 传参的方式 <script> import { reactive } f 阅读全文
posted @ 2021-08-16 21:22 南风晚来晚相识 阅读(1521) 评论(0) 推荐(0) 编辑
摘要:场景 很多时候我么需要返回返回tree结构下的所有自己节点 很显然这个时候需要遍历了 废话不多说 直接递归遍历 数据结构 var treeData = [{ id: 111, title: "机构1", children: [{ id: 123, title: "机构1", }, { id: 111 阅读全文
posted @ 2021-08-12 23:53 南风晚来晚相识 阅读(4823) 评论(0) 推荐(0) 编辑
摘要:<template> <a-tree-select v-model:value="value" style="width: 320px" :tree-data="treeData" allow-clear @select="selectHnader" search-placeholder="Plea 阅读全文
posted @ 2021-08-11 22:55 南风晚来晚相识 阅读(3634) 评论(0) 推荐(0) 编辑
摘要:表单验证详解 <template> <!-- 第一个坑 :model="formState.youForm" 一定要写成这样 不要写成:model="formState" :labelCol="{ style: 'width: 100px' }" 控制labe显示宽度 useSlectValue 是 阅读全文
posted @ 2021-08-11 22:49 南风晚来晚相识 阅读(5773) 评论(0) 推荐(0) 编辑
摘要:场景描述 今天遇见一个问题, tableAllFun 函数中写了一个 index=1; 然后在 otherAllFun 函数中去改变这个index=2的值 奇怪的事情发生了 在视图index展示的值是2; 但是在打印的时候index=1 我就是觉得很奇怪 代码 <template> <div> <l 阅读全文
posted @ 2021-08-11 21:51 南风晚来晚相识 阅读(73) 评论(0) 推荐(0) 编辑
摘要:遇见这样的结构图 我的制作的思路 我是将视图分成左右两部分 右边只负责列表内容; 左侧相对而言要复杂一些 左侧主要是有 【垂直的线】 以及【最上面的横线】和【中间的线】【最下面的线的横线】 如何处理垂直的线了[linedotted] 我是这样操作的 进行定位,主要的是控制高度我是使用height: 阅读全文
posted @ 2021-08-09 21:42 南风晚来晚相识 阅读(168) 评论(0) 推荐(0) 编辑
摘要:<template> <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /> </template> <script lang="ts"> import { defineComponent } 阅读全文
posted @ 2021-08-09 21:12 南风晚来晚相识 阅读(2172) 评论(0) 推荐(0) 编辑
摘要:限制file上传类型 很多时候,我们都需要使用 <input type="file"> 进行文件上传。 在上传的时候,我们需要对文件类型进行限制。 如果上传图片的时候。 用户只能够限制用户上传 .jpeg, .png, .gif, .bmp, .jpg, .webp 图片类型说明,特别是webp 1 阅读全文
posted @ 2021-08-08 22:16 南风晚来晚相识 阅读(357) 评论(0) 推荐(0) 编辑
摘要:逻辑分层 我们在使用vue3开发项目的时候, 如何进行【区域分层】呢???? 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 exp 阅读全文
posted @ 2021-08-08 22:13 南风晚来晚相识 阅读(1004) 评论(0) 推荐(0) 编辑
摘要:props参数的使用 在使用vue的项目开发的过程中 经常会定义大量的组件使用 这个时候组件中的定义的数据类型就非常重要了 此时我们需要定义组件中需要的数据类型 之前我只知道简单的几个 今天忽然发现原来还可以这样使用简直太棒了 特别是自定义验证这一块可能不经常用 但是可以处理很多特殊的场景 prop 阅读全文
posted @ 2021-08-07 21:17 南风晚来晚相识 阅读(2123) 评论(0) 推荐(0) 编辑
摘要:场景 在项目开发的时候,前端肯定是先写静态页面 在静态页面写好之后 然后就可以与后端对接数据了【高兴】 但是在对接接口的时候 我们会发现后端返回来的字段与前端在页面上写的可能不一致 这个时候有意思的事情就发生了 这种情况数据是不会跟新的 <div> {{ objData }} <button @cl 阅读全文
posted @ 2021-08-03 22:39 南风晚来晚相识 阅读(21270) 评论(1) 推荐(1) 编辑

点击右上角即可分享
微信分享提示