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