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

2021-07-05 0条评论 68点热度 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条评论 36点热度 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条评论 47点热度 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条评论 135点热度 0人点赞 admin 阅读全文

iView中用到一个this.$Modal.confirm对话框,确认后再执行确定动作后,弹出this.$Modal.info对话框告诉用户执行结果,结果是第二个info对话框闪了以下就消失了; debug发现,如果confirm后,执行的动作花的时间长一点的话,第二个info对话框就能显示了!估计是这里的Modal采用的隐藏开关用的同一个变量,第一个消失的时候,导致第二个也跟着消失了。 既然执行的动作花的时间长一点就能解决,也就是说只要给第一个对话框足够的时间让它消失,再执行下一步的动作就可以了,我们可以在第一个…

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

最近在使用iview做项目的时候,遇到一个需求,就是在使用Tabs 标签页的时候,面板TabPane的数量是动态的,但是如果遇到Tabs只有一个的时候,就隐藏掉Tab的标签。虽然官方的API没有现成的实现,但是通过自定义的css,可以做到。 准备好隐藏和显示tab标签的css: /*一个TabPane都时候,把tab隐藏*/ .my-tabs-hidden .ivu-tabs-bar{ display: none; } .my-tabs-block .ivu-tabs-bar{ display: block; } …

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

有个项目的UI开发框架用的iView,不过在Vue框架下,富文本编辑器功能全面的不多,后来找到了百度的ueditor,github页面:https://github.com/fex-team/ueditor 功能确实比较丰富,有图片、文档的上传和整理,不过原生没有在vue下的适配,好在github上有开发者已经做了适配,可以采用v-model来绑定编辑器的内容,这个就很vue了,详见:https://github.com/HaoChuan9421/vue-ueditor-wrap 这篇文章不做详细介绍如何使用,gi…

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

最近项目中遇到一个列较多的表格,需要里面的内容根据屏幕宽度自适应,每一列最多显示2行(有些情况下最多显示一行),超出的部分用...,并且鼠标移上去用ToolTip显示全部 如果是简单的单行显示不下就用...并且Tooltip提示,自带的就可以实现了: var columns = [ { title: '仪器型号', key: 'model', ellipsis: true,//超出用... tooltip: true,//鼠标移上去Tooltip提示 minWidth: 150 } ] 但是很多情况下没有这么简单,…

2021-01-26 0条评论 681点热度 1人点赞 admin 阅读全文