VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列
程序员文章站
2022-06-27 21:18:19
按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件。先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', value:'h2', defaultValue:'h2', inputName:'RxButtonSel ......
按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件。先看效果:
根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码:
{ label:'标题', value:'h2', defaultvalue:'h2', inputname:'rxbuttonselect', props:{ canclear:false, list:{ h1:'h1', h2:'h2', h3:'h3', h4:'h4', h5:'h5', h6:'h6', }, }, }, { label:'border', value:'left', defaultvalue:'left', inputname:'rxbuttonselect', props:{ canclear:true, list:{ top:'上', right:'右', bottom:'下', left:'左', }, }, },
rxinputrow会把这个数据转化成上面的按钮。
按钮实现代码:
<template> <div class="rx-button-select"> <div class="clear-button" v-if="canclear" @click="clear" >×</div> <div class="select-button" v-for = "(name, value) in list" :class = "inputvalue === value ? 'selected' : ''" @click = "itemclick(value)" v-html = "name" > </div> </div> </template> <script> export default { name: 'rxbuttonselect', props:{ value:{ default:'' }, canclear:{ default:false }, list:{ default:{} }, }, computed:{ inputvalue: { get:function() { return this.value; }, set:function(val) { this.$emit('input', val); }, }, }, data () { return { } }, methods: { clear(event){ this.inputvalue = '' }, itemclick(value){ this.inputvalue = value }, }, } </script> <style> .rx-button-select{ display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; } .rx-button-select .clear-button{ display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255,255,255,0.1); border-radius: 3px; margin:1px; font-size: 16px; cursor: pointer; } .rx-button-select .select-button{ display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 5px; background: rgba(255, 255, 255, 0.15); border-radius: 3px; margin:1px; font-size: 12px; cursor: pointer; } .rx-button-select .select-button.selected{ background: rgba(255, 255, 255, 0.07); } </style>
canclear属性用与指示按钮,是否可以清空数值。
之前的文章中没提的是,按钮的颜色变化,是通过给按钮设置白色半透明背景实现的,这样只要主题背景是深颜色,就会有同样的效果,不会出现色系冲突。
渲染按钮的时候,使用了v-html,如果想给按钮加图标,直接在list里放入图标代码,如:left:"<i class='fas fa-file'></i>",效果如下:
详细代码,请参考github:https://github.com/vularsoft/studio-ui
若有有问题,请留言交流。
上一篇: 设计模式--概述
下一篇: 如何开发和发布一个Vue插件
推荐阅读
-
VUE实现Studio管理后台(十二):添加输入组合,复杂输入,输入框Input系列
-
VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列
-
VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列
-
VUE实现Studio管理后台(十一):下拉选择列表(Select)控件,输入框input系列
-
VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列
-
VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列
-
VUE实现Studio管理后台(十一):下拉选择列表(Select)控件,输入框input系列
-
VUE实现Studio管理后台(十二):添加输入组合,复杂输入,输入框Input系列