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

若有有问题,请留言交流。

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!