一些Mobile版本的网站,上面顶部菜单图标,按上去可以展开菜单,再点击,可以收回菜单,如图所示: 下面分享我项目中用到的菜单Toggle效果的代码 利用CSS画出三个横线,以及一个叉叉,然后加入动画效果 <!doctype html> <html> <head> <style> .menu-toggle .span { height: 2px; margin: 7px 0 0 0; transition: all .3s ease-out; backface-vis…

2021-09-05 0条评论 19点热度 0人点赞 admin 阅读全文

Vue开发的时候,由于本地的浏览器环境是http://localhost:8080类似这样的地址,而API地址,很可能是后端开发的,不在同一台而AXIOS导致跨域无法请求的问题。 可以利用vue的代理功能,让vue使用proxy去转发流量给API服务器,从而避免跨域问题 假设API服务器的API链接都是/api开头的,如果是开发环境,baseURL就设置为api,是相对路径,这样根据下面的vue.config.js的配置,匹配规则的都转发给proxy服务器 http.js import axios from 'ax…

2021-08-31 0条评论 30点热度 0人点赞 admin 阅读全文

很多时候导出(或者下载)文件的时候,用的是超链接的方式,相当于window.location.href='xxx.xlsx'的方式,很容易实现文件的导出下载,不过一般是针对API采用GET的方式,如果后台API是POST的方式呢? 其实也很简单,这里介绍在Vue.js下采用了axios来post请求,并下载文件,示例如下: downloadExportExcel() { var payload = {"start":"2021-07-11","end":"2021-07-22"}; axios.post('http…

2021-08-09 0条评论 118点热度 0人点赞 admin 阅读全文

遇到一个问题,在Vue中使用img显示图片,如下代码是可以显示出来图片的。 <!--使用@代表根目录--> <img src="@/assets/add.svg"  @click="addClicked"/> 但是如果通过绑定的方式(或者说使用动态的src的时候)就不行了: <template> <div> <img :src="addImgSrc"  @click="addClicked"/> </div> <template> …

2021-07-05 0条评论 166点热度 0人点赞 admin 阅读全文

iView的Tabs 标签页组件里,里面的label想用render动态设置label的文字,render函数并可以接收参数,可以使用参数,如下: <!--根据items动态生成多个TabPane--> <TabPane :label="tabLabel(item, index)" v-for="(item, index) in items"> </TabPane> tabLabel: function (item, index) { return function (h) { …

2021-06-25 0条评论 61点热度 0人点赞 admin 阅读全文

iView里在render下渲染出来的组件里,是不能直接做数据绑定的,不过只要能在组件初始化的时候,给组件赋值,以及用户交互下监听组件状态改变,即时改变相对应的data,就就符合我们的预期了,下面举例介绍 以Select为例: { title: '类型', key: 'type', width: 300, render: (h, params) => { return h('Select', { props: { // 初始化赋值,从params.row中挑出给select初始化赋值 value: param…

2021-06-20 0条评论 67点热度 0人点赞 admin 阅读全文

iView下表格(Table)组件里columns的render写法,对应普通HTML组件的写法整理如下: return h('Tag', { slot: 'list', // class: 'my-class my-class2', class: { 'show':true, 'iscolor':true }, props: { type: 'primary' }, style: { marginRight: '10px' }, attrs: { src: require("@/assets/xxx.png") …

2021-06-18 0条评论 304点热度 0人点赞 admin 阅读全文

Vue/iView中Table表格组件的Columns使用render渲染出来的组件,不但可以render一个Button,还可以使用其他html的组件,绑定事件,可以使用on: {click}来实现,如下render一个Icon实现绑定单击事件: columns: [ { title: '删除', key: "action", fixed: 'left', minWidth: 144, render: (h, params) => { return h("Icon", { props: { type: 'm…

2021-06-11 0条评论 214点热度 0人点赞 admin 阅读全文

在做vue前端开发的时候,有时候会遇到需要将某个div或者其他元素重复生成N个,如果N比较小,那么可以使用如下v-for迭代4次: <div v-for="item in [0,1,2,3]"> </div> 如果要迭代的数很大,这种方式可能就要写到手抽筋了,或者在js的data里定义一个array,这种方式就不介绍了,这里介绍一个简单点的,利用了之前介绍的简短代码快速生成数组:https://blog.terrynow.com/2021/04/25/javascript-generate-…

2021-05-01 0条评论 128点热度 0人点赞 admin 阅读全文

虽然很多提交的表单,我们已经改用post来提交数据了,但是还是有一些使用了<form action='xxx'></form>来提交表单,但是我们往往要在表单提交之前,做一些额外的检查或前置代码。 通过增加使表单默认不提交,然后在需要提交的按钮上,增加手动提交 <form id="form1" action="login" method="post" onsubmit="return false;"> </form> #Javascript下的手动提交(根据你使用的框…

2021-03-24 0条评论 228点热度 0人点赞 admin 阅读全文