quasar
前端小白到专家
专注于前端开发,感谢大家关注,后续会持续记录工作中用到的小砖头,以供大家分享使用,如果有好的砖头,希望不吝赐教,我会收录。
展开
-
echarts显示不确定项的图表
在实际应用之中有时候不确定后端返回的数据需要显示在几个图表中,从数据中解析需要显示几张图表,每一次显示的数目都不一样。原创 2023-01-09 15:36:55 · 196 阅读 · 0 评论 -
quasar布局之title固定不动
固定tile不动,不管下面怎么移动,title不动。原创 2022-10-10 16:09:26 · 237 阅读 · 0 评论 -
quasar显示带换行的字符串
在使用quasar框架时,有需求展示一个文件,内容是一篇文章,里面就会有换行符,但是在页面显示就是一行,没有换行符。原创 2022-10-10 15:55:01 · 602 阅读 · 0 评论 -
quasar使用vue3-json-viewer显示json文件两端都带引号的说明
在quasar中增加第三方组件,参见https://editor.csdn.net/md/?在使用组件是,在页面显示字符的时候两端会出现引号。原创 2022-10-10 15:29:25 · 744 阅读 · 0 评论 -
quasar vue3 input绑定多个v-model值
在quasar中使用vue3,数组大小未知,需要动态绑定input数值,来让用户输入。原创 2022-09-28 16:48:20 · 1688 阅读 · 0 评论 -
quasar q-layout布局说明
在开发UI页面时发现怎么设置style样式对页面都没有响应。原创 2022-09-19 16:06:05 · 632 阅读 · 0 评论 -
后端返回字符串数据转json格式
flask server后端返回数据是字符串数据,在前端是无法使用对象获取值的。也就是层级关系无法实现。所以需要将json字符串转成json对象才可以。网上有很多类似的代码,但是都不能成功,由于是后端返回的数据是json,不能用JSON.parse转成json对象来使用。试了很多代码都不可以,最后找到了如下代码实现。原创 2022-08-22 11:24:23 · 1270 阅读 · 0 评论 -
quasar框架点击按钮打开新页面的方法实现
在quasar开发时,遇到了,点击需要打开新页面的需求,而在正常的router代码中是没有实现的。这样就在新的页面打开要加载的页面。原创 2022-08-01 15:33:21 · 533 阅读 · 0 评论 -
quasar框架在vue文件的js中调用dialog,点击确认按钮执行特定操作实现
在quasar框架开发时,用到弹窗提示,这就是使用quasar框架自带的dialog插件。原创 2022-08-01 15:24:56 · 755 阅读 · 0 评论 -
在quasar框架中使用table-panel时,切换panel之后数据不跟着切换,完美解决
在quasar框架中使用table-panel时,多个panel之间切换,切换到第二个pannel时,但panel下面的数据仍然是第一个panel下面的数据。原创 2022-07-28 16:52:42 · 583 阅读 · 0 评论 -
quasar框架中使用q-table改变字体大小样式
quasar框架中使用q-table改变字体大小样式的需求,在html的q-table中使用style样式不能生效。原创 2022-07-14 18:31:39 · 592 阅读 · 0 评论 -
quasar框架中使用vue3保存后端json数据,带缩进格式
quasar框架中使用vue3保存后端发来的数据,总是一行。没有缩进格式非常难看。代码:格式如下:原因分析:函数如下:例如:在一些项目中在页面更新时会发送GET请求到后端获取数据。之前已经获取过了,在获取就会出现没有数据。代码:效果:...原创 2022-07-12 18:09:28 · 644 阅读 · 0 评论 -
quasar使用vue3的axios发送post请求,对返回的excel文件保存问题解决
在quasar框架中使用vue3的axios发送post请求时出现乱码:请求代码如下:从浏览器的debug控制台可以看到返回response类型:其中Content-Type:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这个是新版的xlsx后缀名的格式。保存文档类型如下:原因分析:解决方案:代码如下:...原创 2022-07-11 15:46:47 · 502 阅读 · 0 评论 -
getElementById不能获取Dom
在quasar框架中使用vue不能获取Dom元素,显示是NULL。原创 2022-07-11 13:48:49 · 1511 阅读 · 0 评论 -
quasar使用vxe-table插件
在前端开发时经常会用到表格显示数据,但是在quasar的q-table中没有能实现我们目的属性,这时就需要更强大的插件来完成。这个就是vxe-table插件,实现更多的表格功能。1.安装依赖。2.quasar配置。在quasar.conf.js中module.exports = configure(function (ctx)里面的boot:内增加vxe-table启动插件。在/src/boot目录下创建一个文件vxe-table.js,文件内容是:这时会提示然后安装对应依赖即可:3.使用在任原创 2022-07-06 14:06:50 · 1292 阅读 · 3 评论 -
前端框架引入excel表格
`提示:这里描述具体问题:1.npm install handsontable-pro @handsontable-pro/vuenpm install handsontable @handsontable/vue2.Luckysheet3.SpreadJS商业收费例如:浏览器按F5会刷新界面,在quasar或vue中怎么禁止。原因分析:例如:在一些项目中在页面更新时会发送GET请求到后端获取数据。之前已经获取过了,在获取就会出现没有数据。例如:在函数中把F5按键禁止掉,具体就是检测到F5的按键原创 2022-07-05 19:05:29 · 481 阅读 · 0 评论 -
quasar2.0 vue3.0使用q-select中的函数
在quasar官网上q-select api显示如下:在quasar中如何调用呢?与vue2.0的调用方式不一样,还有vue3.0和vue2.0在q-select中的函数有可能发生变化。正常使用以上的方式都不行。原创 2022-07-01 15:56:17 · 1004 阅读 · 0 评论 -
flask server返回json数据对象中有空格的数据提取方法,正常前端是无法用.的形式调用,原因是变量中不能由空格
在quasar框架开发中,前端界面在提取后台返回数据时,发现后台返回的数据中有空格,导致前端无法用正常的.的形式调用。server 返回数据:在vscode中代码提示如下:eslint提示如下:原因分析:解决方案:有两种方式可以解决:1.用数组形式调用。结果如下:2.用for循环打印打印结果:到此完美解决。...原创 2022-07-01 11:06:58 · 590 阅读 · 0 评论 -
ubuntu工具使用
ubuntu sar mpstat等一些命令需要安装sysstatquasar 启动server,默认用的是http协议,修改为https方法。在quasar.conf.js中server type修改为https,即可。但是这个会提示链接不安全。原创 2022-06-30 16:15:17 · 336 阅读 · 0 评论 -
quasar vue3 控制页面布局固定,也就是限制页面自适应和响应式
在开发中我们想要固定页面布局,不受浏览器放大缩小影响。原始页面:缩小效果:.page{max-width: 1540px;min-width: 1540px;}原创 2022-06-24 18:32:29 · 1159 阅读 · 0 评论 -
echart处理Y轴数值过大不能完全显示
在quasar中使用echarts插件时,发现后台数据返回值过大在echarts图表中Y轴显示不全,为0000000。原创 2022-06-23 16:57:33 · 4230 阅读 · 0 评论 -
处理axios.get()等方法调用之后,后端出错的处理方法
在quasar框架中使用axios.get().axios.post()等方法时会出现后端网络断了或者网络链接出现问题时,就会出现错误提示,之前都使用axios拦截器处理。原创 2022-06-23 16:44:49 · 1075 阅读 · 0 评论 -
quasar使用keep alive警告 Component inside <Transition> renders non-element root node
在项目中使用缓存来保持页面不被更新,但是在使用keep-alive时会给出警告。vue3缓存与vue2缓存不一样,需要注意。下面是代码。然后浏览器给出如下警告:原创 2022-06-20 14:14:33 · 1808 阅读 · 0 评论 -
quasar中axios.interceptors.response.use使用多次提示错误
在quasar框架中使用axios.interceptors.response.use响应拦截器多次提示错误信息。原创 2022-06-17 11:24:02 · 1903 阅读 · 0 评论 -
quasar在axios.js中使用响应拦截器不能正常跳转解决
在quasar框架中的/src/boot/axios.js中使用router.push()无效。/router/index.js/src/boot/axios.js引用,提示不能使用push()引入/router/index.js结果push()不能跳转没有反映。这个就可以正常跳转了。原创 2022-06-15 17:18:05 · 1186 阅读 · 3 评论 -
在quasar中用js创建的dialog,用dispaly=‘none’,失去焦点
在quasar框架中,用js创建的dialog,是进度条的话,在用如下代码关闭进度对话框,会出现失去焦点的情况。界面的布局和一些按钮都不能用。原因分析:解决方案:或者在界面上重新获取焦点,这个方法没使用过,只是理论上可以使用。...原创 2022-06-15 17:00:13 · 283 阅读 · 0 评论 -
使用n切换nodejs版本时fetch阶段hang
问题描述提示:这里填写该问题的具体解决方案:在安装quasar时出现不能使用npm,会报nodejs版本太低,所以要升级nodejs,nodejs升级用n命令即可在上述nodejs没有安装完成时按ctl+c,会直接kill掉,并不会安装成功,在/usr/local/n/version/node下会出现对应的文件夹,但是里面的东西不全。这时在命令行打npm任何命令都会出现segment fault。这时需要另一种方法来解决安装问题。解决方法就是,打开浏览器在地址栏输入fetch对应的地址,用浏览原创 2022-05-25 11:09:26 · 190 阅读 · 0 评论 -
quasar框架npm run start提示 @quasar/app requires Node 12.22.1 or superior
问题描述提示:这里描述具体问题:部署一个quasar框架,进行开发。原因分析:提示:这里填写问题的分析:这里填写该问题的具体解决方案:在一台从没有安过quasar的平台上跑项目,需要安装那些依赖完成quasar项目运行。解决方案:提示:继续执行npm run start提示 quasar dev-------------------------------------------------------- INCOMPATIBLE NODE VERSION @quasar/原创 2022-05-09 17:10:53 · 696 阅读 · 0 评论 -
quasar框架npm run start提示sh: 1: quasar: not found
问题描述提示:这里描述具体问题:部署一个quasar框架,进行开发。原因分析:提示:这里填写问题的分析:这里填写该问题的具体解决方案:在一台从没有安过quasar的平台上跑项目,需要安装那些依赖完成quasar项目运行。解决方案:提示:继续执行npm run start提示sh: 1: quasar: not found所以安装quasarnpm i -g @quasar/app提示npm WARN checkPermissions Missing write acces原创 2022-05-09 16:59:04 · 1327 阅读 · 0 评论 -
quasar框架npm run start提示Command ‘npm‘ not found, but can be installed with
问题描述提示:这里描述具体问题:部署一个quasar框架,进行开发。原因分析:提示:这里填写问题的分析:这里填写该问题的具体解决方案:在一台从没有安过quasar的平台上跑项目,需要安装那些依赖完成quasar项目运行。解决方案:提示:npm run start提示Command 'npm' not found, but can be installed with:sudo apt install npm所以安装npmsudo apt install npm提示Re原创 2022-05-09 16:56:17 · 2082 阅读 · 0 评论 -
quasar axios创建访问多个端口url
解决axios或ajax访问多个不同的url问题。原创 2022-04-19 11:17:21 · 1005 阅读 · 0 评论 -
客户端保存文件方法
问题描述提示:这里描述具体问题:在开发浏览器界面时,有时候需要增加保存文件功能。前后端分离的系统里面需要前端实时发送获取数据的请求,然后在前端保存起来,存到文件中。用fileSaver存文件时的问题在,保存一次就是一个文件。在后续实时增加文件中不能实时保存,需要一次性保存文件,在数据量很大的时候不能很好的工作。例如:浏览器按F5会刷新界面,在quasar或vue中怎么禁止。 // 禁止浏览器刷新 function diableF5 () { document.onkeydow原创 2022-04-18 17:28:01 · 347 阅读 · 0 评论 -
quasar 滚动区域滚动条始终在最底端显示
前端设置滚动区域始终保持显示在最底端。原创 2022-03-29 09:36:52 · 750 阅读 · 0 评论