前端
姜不吃葱
随时记录,慢慢积累
展开
-
Vue读取static文件url
Vue项目在不同的服务器上部署时需要针对该服务器配置请求后端的url路径。在static文件夹下配置config.js文件window.aaa= { baseUrl: 'https://www.baidu.com/',};在URL.ts中static getBaseURL() { return window.aaa.baseUrl;}直接引用会出现问题,TS2339: Property 'aaa' does not exist on type 'Window & ty原创 2020-11-24 14:02:46 · 2475 阅读 · 0 评论 -
Vue Typescript 实现微信支付
Vue框架下用typescript代替JavaScript,实现微信支付的功能。查询微信开发者文档可知,需要调用WeixinJSBridge实现此功能。但是WeixinJSBridge为微信私有接口,一般情况下WeixinJSBridge内置对象在其他浏览器中无效。难点在于使用TypeScript,如果在JavaScript中,逻辑代码如下所示。router作用在于付款后的页面跳转。static onBridgeReady(result, router) { WeixinJSBridge.in原创 2020-11-11 22:14:37 · 958 阅读 · 0 评论 -
Vue报错 Property name “xxx“ is not PascalCase
报错一Property name “my” is not PascalCase首字母需要大写,写成小写的就会报错。报错二Do not use built-in or reserved HTML elements as component id: Component组件名称,不能和html标签重复。由于在模板需要插入到 DOM 中,所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况:一是完全不合法的标签名,例如 </>;二是与 HTML 元素重名会产生不确原创 2020-09-10 10:25:48 · 8529 阅读 · 0 评论 -
Vue数字转汉字
Vue中将阿里伯数字转换为中文表示,一般用作排名使用。目前支持两位数字转换。let toChinese=function(val){ let chin_list=['一','二','三','四','五','六','七','八','九','十'];//所有的数值对应的汉字 let sn = parseInt(val)+1;//这里由于我的后台是从0开始排序 if(sn<=10){ return chin_list[sn-1]; } else if(s原创 2020-08-21 23:42:17 · 2381 阅读 · 3 评论 -
Vue v-model修饰符,@change事件
输入框经常受到需求或者客观逻辑的制约,对于输入内容需要就进行优化。v-model.number使用修饰符.number可以将输入的数据转换为Number类型,否则虽然你输入的是数字,但它的类型其实还是string。v-model.trim如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符。@change@change当输入框失焦的时候触发而且在elementUI中使用change时是这样的@visible-change。可以使用于:<input>,原创 2020-07-23 20:59:19 · 8679 阅读 · 0 评论 -
vdom例子
之前一直使用Vue来做项目,然后需要实现一个查询和获取全部结果的功能,样式如下:一开始加载全部退款结果,然后我们可以输入条件进行查询(eg:输入操作者姓名)。当查询之后我们点击全部按钮,需要使查询条件置空,显示全部内容。并且当我们下一次进入该页面之后,需要加载上次的结果。 例如如果我们上次用操作者姓名为张三进行查找,这时我们去别的页面然后回来进入此页面,则呈现张三查询结果。如果我们先用张三进行查询然后点击全部按钮,则我们去别的页面然后回来进入此页面后,呈现全部的结果。先放关键代码,解释原因之后其余部分代原创 2020-06-28 23:28:26 · 144 阅读 · 0 评论 -
Vue中@keyup事件——输入自动转大写
先说需求,两个输入框,要求输入的小写字母自动变为大写,输入非字母会自动删除。html代码如下<div class="param-box" > <span class="title-box"> <span class="font-blod">允许参加舱位</span> </span> <input v-model原创 2020-06-09 22:41:56 · 1759 阅读 · 0 评论 -
html改变按钮样式
今天有人问我怎么改样式,需求是三个按钮,一次点一个,要求被点击的按钮和没被点的按钮是两种不同的样式,如图所示。最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”按钮,“全部”按钮样式改变,“已读”按钮变回原样式。按钮的html代码如下<div style="justify-content: space-between;width: 20%" class="flex-row"> <button原创 2020-05-26 23:17:43 · 7267 阅读 · 0 评论 -
CSS cursor 属性约束光标
在一个页面上,当鼠标触碰不同对象时,往往光标呈现的样式不同,比如输入框一般为 I-Beam(即一条竖线),想呈现不同类型,通过CSScursor属性来进行约定。原创 2020-05-20 14:32:15 · 176 阅读 · 0 评论 -
html元素隐藏与显示
首先先解释一下两种不显示元素的基础知识,然后在给出一个例子及其实现的代码。先展示一下例子想要的效果。如下图,这个表格最后两列正常情况下是没有显示的。当鼠标移动该行时,该行的最后两列显示出来,如下图红框内显示。接下来介绍两种使得元素不显示的方法。CSS中visibility: hidden和display: none 均可以让我们看不到元素,但是有所不同。作用不同visibilit...原创 2020-05-08 15:32:31 · 2206 阅读 · 0 评论 -
Vue与父组件通信
接上文,这篇会用到Vue组件里的一些知识要实现策略里面各个按钮及其功能。如下图所示html代码很简单如下,一个div标签下四个button按钮<div style="display: flex;flex-direction: row;justify-content: center;margin: 8px 0;"> <button ...原创 2020-05-07 00:06:27 · 95 阅读 · 0 评论 -
HTML根据选择控制显示
需要写如下图这样的一个策略页面,要求一开始为空,每次点击做下面的新增按钮即可增加一个策略。然后对于每个增加的策略可以手动选择条件来增加条件。最后不同的策略之间可以上下移动,每个策略可以保存和删除。在整个策略列表要实现增加每个子策略,整个项目使用Vue架构,所以使用了Vue组件。这一篇主要来说如何实现子策略如何实现<template> <div> <...原创 2020-05-06 14:40:12 · 1911 阅读 · 0 评论 -
html网页输入数字
写网页的时候想要添加一个输入数字的地方,如图所示。在框内想要有汉字提示来指示这个框输入什么,那么仍然使用input来写,html代码如下:<input v-model="activityParam.basePrice" type="number" placeholder="最低价">v-model用来获取输入的数值。...原创 2020-04-29 13:04:37 · 2112 阅读 · 1 评论 -
html单选按钮默认选择
页面需要一个选择性别的单选按钮,要求默认是根据后台返回值来选择“男”或“女”,然后可以手动进行修改。注:下图中单选按钮的按钮是图片,根据是否被选中来显示不同的图片。先写出性别里的两个单选按钮。<div class="userBox"> <div class="nameString">性别</div> <input type="radio" ...原创 2020-04-24 21:21:34 · 4438 阅读 · 0 评论 -
html中div标签放一行
如下图,在网页中要想实现这种布局形式,及所有的框(div标签)放在同一行,有以下方法。方法一:display: inline-block方法二:float: left方法三:display: flex;flex-direction: row;...原创 2020-04-24 20:45:24 · 2766 阅读 · 0 评论 -
Vue项目input时间类型自动补全
最近Vue项目中出现了设置时间的一个要求,一开始是简单的使用以下代码。<input v-model="activityParam.startTime" type="datetime-local" placeholder="活动时间" >这时时间格式为“yyyy-MM-dd HH:mm”,手动设置时间,如下图所示。但是...原创 2020-04-21 16:02:13 · 2809 阅读 · 0 评论