标签：vue name 自定义 color 编辑表格 height rotate background border

1、组件页面

<template>
  <!-- 时间点选择组件 -->
  <div class="m-select-wrap">
    <input
      :class="['u-select-input f16', color === 'blue' ? '' : 'white-color']"
      type="text"
      readonly
      @click="openSelect"
      @blur="onBlur"
      v-model="selectName" />
    <div :class="['triangle-down', { 'rotate': rotate }]"></div>
    <div :class="['m-options-panel f16', showOptions ? 'show': 'hidden']">
      <div class="flexBox">
      <p @mousedown="getValue(item.name, item.value, index)" v-for="(item, index) in selectData" :key="index">
        <!-- status
             1蓝色：已上报并上报成功
             2红色：已上报但上报失败
             3绿色：有数据但未上报
             4灰色：无数据(时间未到)
        -->
        <span v-if="item.status==2" class="u-option u-bgRed">{{ item.name }}</span>
        <span v-else-if="item.status==1" class="u-option u-bgBlue">{{ item.name }}</span>
        <span v-else-if="item.status==3" class="u-option u-bgGreen">{{ item.name }}</span>
        <span v-else class="u-option u-bgHui">{{ item.name }}</span>
      </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'selectmodel',
    props: {
      selectData: {
        type: Array,
        default: () => {
          return []
        }
      },
      selName: {
        type: String,
        default: ''
      },
      // eslint-disable-next-line vue/require-prop-types
      selValue: {
        default: undefined
      },
      color: {
        type: String,
        default: () => {
          return 'blue'
        }
      }
    },
    computed: {
      selectName: {
        get () {
          return this.selN
        },
        set (newVal) {
          this.selN = newVal
        }
      },
      selectValue: {
        get () {
          return this.selV
        },
        set (newVal) {
          this.selV = newVal
        }
      }
    },
    data () {
      return {
        selN: this.selName,
        selV: this.selValue,
        rotate: false,
        showOptions: false
      }
    },
    methods: {
      openSelect () {
        this.showOptions = !this.showOptions
        this.rotate = !this.rotate
      },
      getValue (name, value, index) {
        this.selectName = name
        this.selectValue = value
        this.$emit('getValue', name, value, index)
      },
      onBlur () {
        this.showOptions = false
        this.rotate = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .m-select-wrap {
    display: inline-block;
    width: 1.3rem;
    height: 30px;
    line-height: 30px;
    position: relative;
    .u-select-input {
      width:1.25rem;
      position: relative;
      background: #3A79EE;
      color: #000;
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      outline: none;

    }
    .white-color {
      background: #FFFFFF;
      color: #000;
    }
    .triangle-down {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid #eaeaea;
      position: absolute;
      top: 11px;
      right: 15px;
      transition: transform 0.3s ease-in-out;
    }
    .rotate {
      transform: rotate(180deg);
    }
    .m-options-panel {
      padding: 10px 8px 10px 14px;
      z-index: 99;
      position: absolute;
      background: #FFFFFF;
      border-radius: 4px;
      width: 468px;
      height: 360px;
      overflow-y: scroll;
      border: 1px solid #E3E3E3;
      top: 36px;
      left: 0;
      color: #706F94;
      .u-option {
        display: inline-block;
        padding: 0 12px;
        cursor: pointer;
        background-color: #999999;
        border: none;
        border-radius: 5px;
        color: #fff;
        margin-right: 5px;
      }
      .u-option:hover {
        color: #FFFFFF;
        background: #83EBD8!important;
      }
    }
    .show {
      display: block;
    }
    .hidden {
      display: none;
    }
    .u-bgBlue{
      background: #0099ff!important;
    }
    .u-bgHui{
      background: #999999!important;
    }
    .u-bgRed{
      background: #ff6666!important;
    }
    .u-bgGreen{
      background: #28d8b4!important;
    }
    .flexBox{
      display: flex;
      flex-flow: wrap;
      justify-content: start;
    }
  }
</style>

2、使用页面

        2.1 引入js

import Select from "./components/selectmodel"

        2.2 在components注册

components: {
      Select
},

        2.3使用

<Select
                :selectData="selectData"
                :selValue="selValue"
                color="white"
                :selName="selName"
                v-model="queryParam.ptime"
                @getValue="getValue" />

        2.4 写方法

getValue (name, value, index) {
        this.queryParam.ptime = value;
      },

3、效果图

标签：vue,name,自定义,color,编辑表格,height,rotate,background,border
来源： https://blog.csdn.net/qq_35952203/article/details/119453320

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。