大屏中常见组件收集

目录

1、select选择器 

2、多选框-textarea

---

select选择器 

效果图：

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

<!--menu5-->
<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

      <input
        type="text"
        name="username"
        value="LiJiang"
        autocomplete="off"
        class="theInput"
      />

  .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

      <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;
  }