欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列

程序员文章站 2022-04-15 13:59:50
按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件。先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', value:'h2', defaultValue:'h2', inputName:'RxButtonSel ......

按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件。先看效果:

VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列

根据以前的设定,通过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>",效果如下:

VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列

详细代码,请参考github:https://github.com/vularsoft/studio-ui
若有有问题,请留言交流。