VUE实现Studio管理后台(十一):下拉选择列表(Select)控件,输入框input系列

VUE实现Studio管理后台(十一):下拉选择列表(Select)控件,输入框input系列

这次Github上传错了,标题中的序号不对,我想这样:《VUE实现Studio管理后台(十一):下拉选择列表(Select)控件,输入框input系列》实际传成了这样《VUE实现Studio管理后台(九):下拉选择列表(Select)控件,输入框input系列》,很无奈的错误,我也不知道怎么修正,下载代码的时候注意分别吧。
这次分享下拉列表输入组件(Select),效果如下:

一如既往,取个好听的名字RxSelect,正常的调用代码应该是这样的:

<RxSelect
  :defaultValue = "defaultValue"
  :list= "list"
  v-model = "inputValue"
>
</RxSelect>

 

list代码:

list:{
  white:"白色",
  black:"黑色",
  red:"红色",
  green:"绿色",
  dntknow:"不知道什么色",
},

 

上一篇作文,已经介绍过,我们的项目是要通过Json数据,动态构建输入界面,所以只需要在测试代码中加入以下代码:

      {
        label:"颜色",
        value:"white",
        defaultValue:"black",
        inputName:"RxSelect",
        props:{
          list:{
            white:"白色",
            black:"黑色",
            red:"红色",
            green:"绿色",
            dntknow:"不知道什么色",
          },
        },
      },

 


RxInputRow控件,会把这段数据转化成上面的代码,两者在RxSelect部分是等效的。
RxSelect代码:

<template>
  <div class="rx-select">
    <div class="value-view">
      <div class="clear-button"
        @click="clear"
      >×</div>
      <div class="value"
        @click="click"
      >
        {{value ? list[value] : $t("widgets.select")}} <span class="right-icon"></span>
        <ul v-if="showList" class="list">
          <li 
            v-for="(name, value) in list"
            @click="itemClick(value)"
          >
            {{name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RxSelect",
  props:{
    value:{ default:"" }, 
    defaultValue:{ default:"" }, 
    list:{ default:{} },
  },

  computed:{
    inputValue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit("input", val);
      },
    },
  },

  data () {
    return {
      showList : false,
    }
  },
  mounted () {
    document.addEventListener("click", this.documentClick)
  },

  beforeDestroyed() {
    document.removeEventListener("click", this.documentClick)
  },

  methods: {
    clear(){
      this.inputValue = ""
    },
    click(event){
      event.stopPropagation()
      this.showList = !this.showList
    },

    documentClick(event){
      this.showList = false
    },

    itemClick(value){
      this.inputValue = value
    },
  },
}
</script>

<style>
.rx-select{
  display: flex;
  flex-flow: column;
  align-items: center;
}

.rx-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-right:2px;
  font-size: 16px;
}

.rx-select .value-view{
  display: flex;
  flex-flow: row;
  align-items: center;
  cursor: pointer;
}

.rx-select .value-view .value{
  position: relative;
  display: flex;
  flex-flow: row;
  padding: 0 10px;
  height: 24px;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.rx-select .value-view .value span{
  margin-left:5px;
  font-size: 16px;
}

.rx-select .list{
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  left: 0;
  top: 100%;
  z-index: 1;
}

.rx-select .list li{
  min-width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  padding-left:10px;
  background: #424242;
  cursor: pointer;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); 
  white-space:nowrap;
}

.rx-select .list li:hover{
  background: #75b325;
}
</style>

 

这段代码,没有什么难懂的逻辑,有问题请留言。需要注意的是,css中我把.list设为position:absolute后,子元素li无法撑开它,百度了半天,也没找到合适解决办法,就把背景跟阴影的设置放在子元素li里了,好在效果还不错,先这样吧。
感谢耐心阅读,详细代码,请参考Github:https://github.com/vularsoft/studio-ui
若有有问题,请留言交流。