分类 前端技术 下的文章

平衡膳食摄入量总览整体可以参照《中国居民平衡膳食宝塔(2022)》进行全面的物资食品储备,方便计算每天各类营养摄入量。各类食物储备清单储备清单简介本章节主要根据居家隔离生活状态,对各类食品储备的分类、详情、存储期以及分级别储备方案进行详细描述,推荐建议上受限于个人常识,可能存在局限。在实际储备量上可参考《中国居民平衡膳食宝塔》,再辅助以特定时间区间进行购买储备。以成年人一日三餐为例,其中早餐以豆奶制品和面食为主,剩余两餐为正餐,建议分为三个阶段:第一周,即2*7=14餐,尽量接近平时正常饮食,储备食品可不考虑较长保质期;第二周至第三周,即272=28餐,需要考虑中长期可保存- 阅读剩余部分 -

let url = window.URL.createObjectURL(new Blob([文件流(一般为res.data)], { type: 'Blob类型' })) let link = document.creatElement('a') // 创建a标签来下载 link.style.display = 'none' link.href = url link.setAttribute('download', '下载的文件名') document.body.appendChild(link) link.click() document.body.removeChil- 阅读剩余部分 -

最近在把vue2升级vue3过程中遇到了各种bug,这次遇到了在vue2中父子传参的过程中发现showSearch数据不更新问题父组件引用 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 子组件 this.$emit("update:showSearch", !this.showSearch); 我们需要吧父组件改成v-model:value="value" 模式<r- 阅读剩余部分 -

<svg-icon icon-class="clipboard" class-name="disabled" /> 经过分析是少了个解析插件 svg-sprite-loader ,用npm安装一下,然后需要在vue.config.js中添加配置'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } chainWebpack: config => { config- 阅读剩余部分 -

利用device-pixel-ratio单独适配像素比@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18), (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18), (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) { :root { - 阅读剩余部分 -

首先安装vue-i18n包新建locales/i18n.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16. */ import Vue from "vue"; import VueI18n from "vue-i18n"; import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang import elementEnLoc- 阅读剩余部分 -

vue项目根目录新增配置文件 .babelrc{ "presets": [ "stage-2" ] } 修复好 Syntax Error: Unexpected token 启动发现又报如下问题Failed to compile with 9 errors Module build failed: Error: No PostCSS Config found in: D:\project\ 根目录新建postcss.config.js/** * Created by liweiliang 406320591@QQ- 阅读剩余部分 -

<template> <div class="moduleIntro"> <el-button-group> <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button> <el-button type="primary" - 阅读剩余部分 -

经纬度正则/^[\-\+]?(0(\.\d{1,10})?|([1-9](\d)?)(\.\d{1,10})?|1[0-7]\d{1}(\.\d{1,10})?|180(\.0{1,10})?)$/ 纬度/^[\-\+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/ 日期格式化'20150825'.replace(/(\d{4})(\d{2})(\d{2})/,'$1-$2-$3')

安装包 jszip和file-saver代码<template> <div class="jszip"> <span @click="demoZip">downloadZip</span> </div> </template> <script> import JSZip from 'jszip' import { saveAs } from 'file-saver' export default { n- 阅读剩余部分 -

项目main.js文件引入import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* { default global options } */) /* eslint-disable no-new */ new Vue({ el: '#- 阅读剩余部分 -

最近在各种魔改一个老项目,遇到了一个这样的错误Ant Design Vue 局部引入 Modal 组件方式import {Row, Col, Button, Collapse, Icon, Modal, Input} from "ant-design-vue"; components: { AButton: Button, AInput: Input, ACollapse: Collapse, ACollapsePanel: Collapse.Panel, AIcon: Icon, AModal: Modal }, 开始看到 di- 阅读剩余部分 -

npm init -y npm i -S koa@2 创建app.js文件,代码如下:const Koa = require('koa') const app = new Koa() app.use(async (ctx,next) => { const start = new Date() console.log('[logger middleware] before await ...') await next() console.log('[logger middleware] after await ...') con- 阅读剩余部分 -

声明:此篇文章转自阮一峰大佬博客对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是,你需要另一个分支的所有代码变动,那么就采用合并(git merge)。另一种情况是,你只需要部分代码变动(某几个提交),这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用,就是将指定的提交(commit)应用于其他分支。$ git cherry-pick <commitHash> 上面命令就会将指定的提交commitHash,应用于当前分支。这会在当前分支产生一个新的提交,当然它们的哈希值会不一样。举- 阅读剩余部分 -

最近老搞移动端开发,赶脚调试起来很不方便,然后就发现了腾讯开源的vConsolevConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies、localStorage 和 SessionStorage手动执行 JS 命令行自定义插件上手方法一:使用 npm(推荐)$ npm install vconsole Import 并初始化后,即可使用 console.log 功能,如 Chrome devtools 上一样。import VConsole from 'vconso- 阅读剩余部分 -

这两天有开始搞华为VOLTE第二版了,偷懒样式直接@import,这时发现第一版样式全服错乱,查看了下是在使用@import引入css的时候,css-loader对import的文件会当做外部资源来编译造成它变为全局样式案例<style scoped> @import "./main.css"; .VoLTE{ width: 100%; height: 500px; background: #434656; background-size: cover; } </style>修改成<style scoped - 阅读剩余部分 -

最近开发项目在和华为Volte做对接,结果华为volte第一版还是原生加jquery来实现的,由于里面有不少需要引入外部js文件的,就给了一天的时间做对接,没办法只能剑走偏锋了首先定义一个 utils/loadScript.js 封装一个动态加载js文件的方法export function loadScript (url) { return new Promise((resolve, reject) => { const script = document.createElement('script') script.onload = () =&- 阅读剩余部分 -

最近在搞vue3+Typescript脚手架然后在定义变量的时候报错 'name' is never reassigned. Use 'const' instead prefer-const 大概意思就是 标识符'errMsg'永远不会被重新分配;使用'const'而不是'let'。(prefer-const)解决方法就是在eslint配置文件或者tslintt配置文件增加{ "rules":{ "prefer-const": "off" } }

Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3常见问题关于该项目和可能问题的几点说明:问:这是否取代了Vuex,是它的继任者吗?答:不,或者至少这不是主要意图问:动态模块呢?答:动态模块不是安全的类型,因此我们允许创建不同的商店,可以在任何地方导入Pinia 优势符合直觉,易于学习极轻, 仅有 1 KB模块化设计,便于拆分状态安装 Piniayarn add pinia@next # or with npm npm install pinia@next 用法创建一个- 阅读剩余部分 -

    大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。看下面的代码:test.html<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> - 阅读剩余部分 -

iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?一:去掉全部的滚动条第一个方法: iframe 有一个scrolling属性,它有 auto , yes , no 这三个值。 scrolling : auto -----在需要的时候滚动条出现 scrolling : yes ------始终显示滚动条 scrolling : no -------始终隐藏滚动条 当设置 scro- 阅读剩余部分 -

在循环数组的时候基于每个对象中的某个参数来进行数据请求,获取当前对象对应的数据状态实现方法基于最新的es6中的async await 来实现首先要把对应的Promise方法进行一个封装_getReportStatus(item){ return new Promise((resolve, reject) => { getReportStatus({reportCode:item.reportNo}).then(data => { if(data.data.code == '0000'){ - 阅读剩余部分 -

主要语句 vnode.elm.dispatchEvent(new CustomEvent('input'));/** * Created by liweiliang 406320591@QQ.com on 2021/01/26 23:04. */ import pattern from '@/utils/pattern' let amountCheck = function (vnode, binding, el) { // console.log(el, vnode, binding) let reopenState = binding.modifiers.- 阅读剩余部分 -

Column配置比如:操作列{ key: 'action', scopedSlots: { customRender: 'action', title: '变量名' }, align: 'center' } 代码段<template slot="变量名">{{动态表头名称}}</template> demo: 注意不要在括号 dataIndex同级节点加title属性名,否则的话scopedSlots设置的title会失效//Column { dataIndex: 'belong', key: 'belong- 阅读剩余部分 -

首先来说 百度地图默认的api,通过查看接口文当 中 MapOptions -> enableMapClick:是否开启底图可点功能,默认启用new BMap.Map(mapid,{enableMapClick:false});在vue-baidu-map中,上面这个方法是无效的通过查看源码发现需要在baidu-map上添加个:mapClick="false" 就可以了官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/index

::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset006pxrgba(255,0,0,.3); background: hsla(0,0%,100%,.1) } ::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0,0,0,.2); -webkit-box-shadow: inset006pxrgba(0,0,0,.5- 阅读剩余部分 -

icon 自定义图标(1.14.0 新增) string|()=>VNode 一、利用自带的icon赋值个默认的icon名字就可以了,但是有时候我们需要用到实底风格的icon,所以只能用()=>VNodethis.$confirm({ title: '确认设置当前位置为出险地点?', content: this.infoWindow.contents, icon: 'exclamation-circle', onOk: () => { this.onMapClose(); c- 阅读剩余部分 -

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] 使用 Ant Design的时候报key警告,这由于columns中定义的默认key值在返回的数据中没有当前的这个字段造成的,一个是使用rowKey默认指定一个对应的键值对,或者使用类似v-for循环中的下标index来代替:rowKey="(record,index)=>{return index}"

最近试了下 Vue.extend 方法,写好后发现访问会报如下错误vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.接下来我们分析下报错的原因在哪里和解决办法原因vue有两种形式的代码 c- 阅读剩余部分 -