当前位置: 首页 > Web前端 > HTML5

VUE实战13:按钮点击输入控件,输入法输入框系列,admin后台管理

时间:2023-04-05 14:27:25 HTML5

按钮点击输入,很简单的一个控件,一个20分钟就能搞定的控件。先看效果:按照前面的设置,这两个按钮是通过json数据动态生成的。例子中两个按钮对应的json代码:h1',h2:'H2',h3:'H3',h4:'H4',h5:'H5',h6:'H6',},},},{label:'Border',value:'left',defaultValue:'left',inputName:'RxButtonSelect',props:{canClear:true,list:{top:'top',right:'right',bottom:'bottom',left:'left',},},},RxInputRow会把这个数据转换成上面的按钮。点击现实代码:canClear属性用于表示按钮是否可以清空值.上一篇文章没有提到的是,改变按钮的颜色是通过给按钮设置一个白色半透明背景来实现的,这样只要主题背景是深色,就会有同样的效果并且不会有颜色冲突。渲染按钮时,使用v-html。如果要给按钮添加图标,直接把图标代码放在列表中,如:left:",效果如下:详见代码请参考https://github.com/vularsoft/studio-ui