大屏中常见组件收集

拼搏现实的明天。 2022-09-03 08:28 141阅读 0赞

**目录**

1、select选择器

2、多选框-textarea

--------------------

# select选择器  #

效果图：

![2021080615355954.png][]

直接用原生的select标签，最多就是改一下样式

<template>
      <div class="menu5">
          <select v-model="selectValue" class="theSelect">
            <option value="">全部</option>
            <option value="baidu" label="百度"></option>
            <option value="google">谷歌</option>
            <option value="sougou" :disabled="true">搜狗</option>
            <option value="unable" disabled>禁用</option>
          </select>
          {
       { selectValue }}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          selectValue: "",
        };
      },
    
    };
    </script>
    
    <style lang="scss" scoped>
    .menu5 {
      .theSelect {
        background-color: rgb(66, 66, 66);
        color: white;
        padding: 2px 7px;
        outline: none;
      }
    }
    </style>

# 输入框-input #

![20210806163652973.png][]

.theInput {
        background-color: rgba(7, 7, 7, 0.336);
        color: white;
        padding: 8px;
        border: 1px solid white;
        width: 500px;
        font-size: 18px;
    
        &:focus {
          border: 1px solid rgb(0, 204, 255);
          box-shadow: 0 0 8px rgb(0, 204, 255);
        }
      }

# 文本框-textarea #

![20210806160912316.png][]

<textarea rows="5" cols="5" class="theTextArea">
             这个是多选框 textarea 标签。这个是多选框 textarea 标签。这个是多选框 textarea 标签。这个是多选框 textarea 标签。这个是多选框 textarea 标签。
          </textarea>

样式：overflow: hidden; 用于取消显示右侧滚动条

.theTextArea {
        background-color: rgba(7, 7, 7, 0.404);
        color: white;
        padding: 10px;
        font-size: 18px;
        overflow: hidden;
        border: 1px solid white;
      }

[2021080615355954.png]: /images/20220829/df7af223b7314bb288c51524af82cb7c.png
[20210806163652973.png]: /images/20220829/f4ca8d623c324cd898a1101d1adb9dd8.png
[20210806160912316.png]: /images/20220829/ee6905e24fbe4bfcab94ca6b5e7f6c21.png