按钮点选输入,是一个非常简单的控件,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实现Studio管理后台(十三):按钮点选输入控件,input输入框系列的更多相关文章

  1. VUE实现Studio管理后台(十):OptionBox,一个综合属性输入界面,可以级联重置

    为了便于阅读代码,已经把测试数据分离出来,放在了mock目录下: 阅读代码的话,稍微留意一下就好.本次介绍RXEditor界面最重要的部分,属性输入组件,该组件可以显示是否有数据被修改,还可以批量重置 ...

  2. VUE实现Studio管理后台(完结):标签式输入、名值对输入、对话框(modal dialog)

    一周的时间,几乎每天都要工作十几个小时,敲代码+写作文,界面原型算是完成了,下一步是写内核的HTML处理引擎,纯JS实现.本次实战展示告一段落,等RXEditor下一个版本完成,再继续分享吧.剩下的功 ...

  3. VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

  4. VUE实现Studio管理后台(七):树形结构,文件树,节点树共用一套代码NodeTree

    本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...

  5. VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列

    接下来几篇作文,会介绍用到的输入框系列,今天会介绍组普通的调用方式,因为RXEditor要求复杂的输入功能,后面的例子会用VUE的component动态调用,就没有今天的这么直观了,控件的实现原理都一 ...

  6. VUE实现Studio管理后台(一):鼠标拖放改变窗口大小

    近期改版RXEditor,把改版过程,用到的技术点,记录下来.昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾.不过工作成果完整保留在github上,地址:https:// ...

  7. VUE实现Studio管理后台(三):支持多语言国际化(vue-i18n)

    RXEditor的第一版本是英文版,有些朋友看起来觉得不习惯,后来因为惰性,不愿意再修改旧代码加入中文版,这次提前就把这个问题解决了,克服惰性最好的方式,就是想到就尽快去做,避免拖延. 本来计划在界面 ...

  8. ASP.NET 后台不识别ASPX中的控件

    请问后台不识别ASPX中的控件,怎么解决 这个程序是在网上下载的 C# code <asp:DataGrid runat="server" ID="dgList1& ...

  9. WPF解决按钮上被透明控件遮盖时无法点击问题

    原文:WPF解决按钮上被透明控件遮盖时无法点击问题 IsHitTestVisible="False" 在控件上设置如上属性即可,即可让透明控件不触发点击效果

随机推荐

  1. string判断是否是正常的ip格式

    废话不多说,上代码 bool isCurrectIP(char *ip) { if (ip == NULL) { return false; } char temp[4]; int count = 0 ...

  2. maven-assembly-plugin 打包包含多余依赖问题一则

    有同事反馈自己maven-assembly-plugin打的包里面多了很多mvn dependency:tree中没有的jar. 我当时只是试着把他的maven-assembly-plugin更新到了 ...

  3. Facebook要做约会服务,国内社交眼红吗?

    看看现在的各种相亲趣事就能深深感悟到,中国还是以家庭为重的国家.在传统文化的浸染下,国人始终是将家庭摆在第一位.而对于欧美等发达国家来说,他们固然也以家庭为重,但更注重的是男女之间的关系定位--恋爱也 ...

  4. python代码覆盖率统计-coverage

    coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...

  5. HDU-2138-How many prime numbers(Miller-Rabin新解法)

    题目传送门 sol1:普通判到sqrt(n)的素数判定,不多说了. 素数判定 #include "bits/stdc++.h" using namespace std; bool ...

  6. AUTODESK 卸载工具,完美彻底卸载清除干净autodesk各种软件残留注册表和文件

    小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...

  7. undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决(可能是顺序问题)

    1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库   转载地址: ...

  8. chap1-HttpRequest测试类

    # HttpRequest测试类, 封装请求方法 import requests class HttpRequest: def http_request(self, url, method, data ...

  9. Nginx笔记总结十七:nginx生成缩略图配置(http_image_filter_module)

    编译: ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_realip_module-- ...

  10. Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑

    本文为原创文章,转载请标明出处 目录 猫眼API HttpClient 实现 HTTP 请求 安装 HttpClientModule 模块 创建 provider 创建 page 一些坑 坑1: 未在 ...