vue自定义选择器

已于 2023-12-18 18:36:16 修改
阅读量391 收藏 10
点赞数 10
文章标签： vue.js 前端 javascript
于 2023-12-18 10:51:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Circle_Key/article/details/135057433
版权 
//组件部分
<template>
  <div>
    <div>
      <div class="SelectBackground" :class="{
        SelectBackgrounds: BackgroundShow == 2,
        SelectBackgroundss: BackgroundShow == 3,
      }" @click.stop="ShowSelects">
        <span class="SelectText" :style="{ width: label.length == 5 ? '70px' : '' }"> {{ labels ? label+'/'+labels : label }} </span>
        <div class="SelectIcons" v-if="ShowSelect"></div>
        <div class="SelectIcon" v-else></div>
        <span class="SelectLinear" :style="{ right: right }"></span>
        <span class="SelectLinears" :style="{ left: left }"></span>

        <!-- 下拉选择器 -->
        <div class="ShowBackground scale-up-ver-top" v-show="ShowSelect" :class="{
          show: ShowSelect,
          'scale-down-ver-bottom ': !ShowSelect,
          hide: !ShowSelect,
        }" :style="{ width: width, height: height }">
          <div class="ShowTitle">{{ title }}</div>
          <div class="ShowItem" v-for="(item, index) in options" :key="index">
            <div @click.stop="selectItem(item)" :class="{ selected: item.value == selectedOption }">
              {{ item.value }}
            </div>
          </div>
        </div>
        <!-- 二级选择器 -->
        <div class="ShowBackgrounds scale-up-hor-left" v-show="ShowSelectClass" :class="{showLine: ShowSelectClass,}" >
          <div class="ShowItem" v-for="(item, index) in clickData.gradeInfo" :key="index">
            <div @click.stop="selectItemS(item)" :class="{ selected: item.value == selectedOptions }">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // label: String,
    options: {
      type: Array,
      default: () => [],
    },
    title: String,
    BackgroundShow: {
      type: Number,
      default: 1,
    },
    left: String,
    right: String,
    width: String,
    height: String,
  },
  data() {
    return {
      label: '',
      labels:'',
      selectedOption: null,
      selectedOptions: null,
      ShowSelect: false,
      ShowSelectClass:false,
      clickData: '',
      optionsData: [{
        value: '暂无数据',
      }],
    };
  },
  mounted() {
    document.addEventListener('click', this.handleDocumentClick);
  },

  created() {
    this.getPosition();
  },

  watch: {
    options() {
      this.getPosition();
    },
  },

  beforeDestroy() {
    document.removeEventListener('click', this.handleDocumentClick);
  },
  methods: {
    /**
     * 获取传递的数据
     * **/
    getPosition() {
      this.label = this.options ?this.options[0].gradeInfo?this.options[0].value+'/'+this.options[0].gradeInfo[0].value : this.options[0].value : '暂无数据';
      this.selectedOption = this.options ? this.options[0].value : '暂无数据';
      this.selectedOptions = this.options ? this.options[0].value : '暂无数据';
    },
    /**
     * 点击任意位置关闭
     * */
    handleDocumentClick(event) {
      const dropdownElement = this.$el.querySelector('.SelectBackground');
      if (dropdownElement && !dropdownElement.contains(event.target)) {
        this.ShowSelect = false;
        this.ShowSelectClass = false
      }
    },
    /**
     * 点击回收
     * **/
    ShowSelects() {
       // 触发关闭其他下拉框的事件
      this.$emit('closeOtherDropdowns');
      this.ShowSelect = !this.ShowSelect;
      this.ShowSelectClass = false;
    },
    selectItem(item) {
      this.clickData = item
      this.labels=''
      this.$emit('changeData', item);
      this.selectedOption = item ? item.value : '暂无数据';
      this.label = this.selectedOption;

      // 判断是否有二级
      if (item.gradeInfo && item.gradeInfo[0]) {
      this.selectItemS(item.gradeInfo[0],1)
      this.ShowSelectClass = true; // Close the dropdown after selecting an item
      } else {
        this.ShowSelect = false;
      }
      console.log(item,456)
    },
    selectItemS(item,data) {
      this.$emit('changeClassData', item);
      this.selectedOptions = item ? item.value : '暂无数据';
      this.labels = this.selectedOptions;
      if (data!=1) {
      this.ShowSelect = false;
      }
      this.ShowSelectClass = false
    }
  },
};
</script>

<style scoped lang="scss">
.SelectBackground {
  background: url(../../assets/image/SelectBackground.png);
  width: 90px;
  height: 30px;
  background-size: 100%;
  /* 防止背景图在页面滚动时重复显示 */
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;

  position: relative;
  z-index: 9999;
  cursor: pointer;
}

.SelectBackgrounds {
  background: url(../../assets/image/BigSelectBackground.png);
  width: 123px;
  height: 36px;
  background-size: 100%;
  /* 防止背景图在页面滚动时重复显示 */
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  // margin-right: 20px;
}

.SelectBackgroundss {
  background: url(../../assets/image/LongSelectBackground.png);
  width: 183px;
  height: 36px;
  background-size: 100%;
  /* 防止背景图在页面滚动时重复显示 */
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.SelectText {
  color: #c7d6ec;
  text-align: center;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 13.2px;
  /* 110.002% */
  letter-spacing: 0.721px;
}

.SelectIcon {
  background: url(../../assets/image/SelectBottom.png);
  width: 28px;
  height: 20px;
  background-size: 100%;
}

.SelectIcons {
  background: url(../../assets/image/SelectTop.png);
  width: 28px;
  height: 20px;
  background-size: 100%;
}

.SelectLinear {
  width: 37px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 45px;
  background: linear-gradient(90deg,
      rgba(60, 89, 207, 0) 0%,
      rgba(1, 132, 252, 0) 0.01%,
      #00fcda 45.83%,
      rgba(1, 134, 253, 0.01) 100%);
  filter: blur(0.3604423999786377px);
}

.SelectLinears {
  width: 37px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 46px;
  background: linear-gradient(90deg,
      rgba(60, 89, 207, 0) 0%,
      rgba(1, 132, 252, 0) 0.01%,
      #00fcda 45.83%,
      rgba(1, 134, 253, 0.01) 100%);
  filter: blur(0.3604423999786377px);
}

.ShowBackground {
  position: absolute;
  top: 40px;
  background: url(../../assets/image/ShowBackground.png);
  width: 90px;
  height: 180px;
  // max-height: 0;
  background-size: 100%;
  overflow: auto;
  -webkit-animation: scale-up-ver-top 0.3s ease;
  animation: scale-up-ver-top 0.3s ease;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  z-index: 99;
   /* 隐藏滚动条 */
 scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */

  .ShowTitle {
    // text-align: center;
    color: #e7f1ff;
    // text-align: center;
    font-family: PingFang SC;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    // line-height: 13.2px;
    /* 110.002% */
    letter-spacing: 0.721px;
    margin: 10px;
  }

  .ShowItem {
    // height: 24px;
    // text-align: center;
    color: #e7f1ff;
    font-family: PingFang SC;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    /* 110.002% */
    letter-spacing: 0.721px;
    // margin: 0 0 0 12px;
    padding: 10px;
  }


  .selected {
    color: #1890ff;
  }
}


@-webkit-keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}

@keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}

.ShowBackground.show {
  /* 展开状态 */
  // max-height: 180px; /* 根据实际内容的最大高度调整 */
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

@-webkit-keyframes scale-down-ver-bottom {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }

  100% {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}

@keyframes scale-down-ver-bottom {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }

  100% {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}

.ShowBackground.hide {
  -webkit-animation: scale-down-ver-bottom 0.5s ease;
  animation: scale-down-ver-bottom 0.5s ease;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

.ShowBackground::-webkit-scrollbar {
  width: 0;
}
.ShowBackgrounds{
  background: url(../../assets/image/ShowBackground.png);
  width: 123px;
  height: 246px;
  // max-height: 0;
  background-size: 100%;
  overflow: auto;
  position: absolute;
  top: 40px;
  right: -130px;
  -webkit-animation: scale-up-hor-left 0.3s ease;
  animation: scale-up-hor-left 0.3s ease;
  -webkit-transform-origin: left;
  transform-origin:left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  z-index: 99;
   /* 隐藏滚动条 */
 scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  .ShowItem {
    // height: 24px;
    // text-align: center;
    color: #e7f1ff;
    font-family: PingFang SC;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    /* 110.002% */
    letter-spacing: 0.721px;
    // margin: 0 0 0 12px;
    padding: 10px;
  }


  .selected {
    color: #1890ff;
  }
}
@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
.ShowBackgrounds.showLine {
  /* 展开状态 */
  // max-height: 180px; /* 根据实际内容的最大高度调整 */
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
</style>

 父组件使用

  <Select
                ref="firstSelect"
                  v-if="selectorOptionss"
                  :options="selectorOptionss"
                  style="margin-right: 25px;"
                  :BackgroundShow="3"
                  :left="'132px'"
                  :right="'132px'"
                  :width="'183px'"
                  :height="'366px'"
                  @changeData="getterm"//传递数据的方法
                  @closeOtherDropdowns="closeOtherDropdowns"//异步关闭的方法
                />
                <Select
                ref="secondSelect"

                  v-if="selectorOptions"
                  :options="selectorOptions"
                  style="margin-right: 25px;"
                  :BackgroundShow="2"
                  :left="'72px'"
                  :right="'72px'"
                  :width="'123px'"
                  :height="'246px'"
                  @changeData="getGradeData"
                  @changeClassData="getclass"
                  @closeOtherDropdowns="closeOtherDropdowns"
                />
                <Select
                ref="thirdSelect"

                  v-if="selectorOptionsSubject"
                  :options="selectorOptionsSubject"
                  :BackgroundShow="2"
                 
                  :width="'123px'"
                  :height="'246px'"
                  @changeData="getsubject"
                  @closeOtherDropdowns="closeOtherDropdowns"
                />
  /**
     * 处理数据
     * **/
    handleData() {
      // let gradeData = this.$store.state.gradeData;
      const subjectInfo = this.GradeData.gradeInfo.map((gradeItem) => ({
        ...gradeItem,
        value: gradeItem.gradeName,
        subjectInfo: gradeItem.subjectInfo
          ? gradeItem.subjectInfo.map((subjectItem) => ({
              ...subjectItem,
              value: subjectItem.subjectName,
            }))
          : [],
      }));

      this.selectorOptionsClass =
        subjectInfo.length > 0 ? subjectInfo : [{ value: '暂无数据' }];
      this.selectorOptionsSubject = subjectInfo[0]
        ? subjectInfo[0].subjectInfo
        : [{ value: '暂无数据' }];
      // this.getData();
      // console.log(subjectInfo, '4566');
    },  /**
     * 处理数据
     * **/
    handleData() {
      // let gradeData = this.$store.state.gradeData;
      const subjectInfo = this.GradeData.gradeInfo.map((gradeItem) => ({
        ...gradeItem,
        value: gradeItem.gradeName,
        subjectInfo: gradeItem.subjectInfo
          ? gradeItem.subjectInfo.map((subjectItem) => ({
              ...subjectItem,
              value: subjectItem.subjectName,
            }))
          : [],
      }));

      this.selectorOptionsClass =
        subjectInfo.length > 0 ? subjectInfo : [{ value: '暂无数据' }];
      this.selectorOptionsSubject = subjectInfo[0]
        ? subjectInfo[0].subjectInfo
        : [{ value: '暂无数据' }];
      // this.getData();
      // console.log(subjectInfo, '4566');
    },  
 /***
     * 选择的班级
     * ***/
    getclass(data) {
      // this.selectorOptionsSubject = data.subjectInfo;//控制是否重置科目
      // 班级
      this.$store.commit('setClassData', data);
      // this.$store.commit('setSubjectData', data.subjectInfo[0]);//控制是否重置科目
        // 作业负担
        this.$refs.WorkCheck.getData();
        // 作业质量监测
        this.$refs.WorkQuality.getData();
        // 作业精辅导
        this.$refs.WorkBear.getData();
        // 教师积极性
        this.$refs.TeacherActive.getData();
        // 教师教学行为统计
        this.$refs.TeachingBehavior.getData();
        // 教学质量和作业质量对比
        this.$refs.TeacherBehavior.getData();
        // 学生层次分布
        this.$refs.StudentGradation.getData();

        // 单元测试
        this.$refs.TeachTest.getData();
        // 数字资源建设
        this.$refs.TeacherNumber.getData();

      console.log(data);
    },
      closeOtherDropdowns() {
    // 关闭其他下拉框
    const dropdowns = [
    this.$refs.firstSelect,
    this.$refs.secondSelect,
    this.$refs.secondSelectClass,
    this.$refs.thirdSelect,
  ];


  dropdowns.forEach(dropdown => {
    if (dropdown) {
      dropdown.ShowSelect = dropdown.ShowSelect ? true : false;
    }
  });
    },

Circle_Key
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue 自定义文件选择器组件的实例代码
10-15
主要介绍了使用Vue 自定义文件选择器组件的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3选择器（Select）
Mr Dear的博客
03-31 9203
下拉选择器组件，支持禁用、删除、搜索、自定义过滤函数、自定义节点 label 和 value 的字段名、自定义下拉面板数、自定义样式等等
前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版
chenchuang0128的博客
06-29 6482
### 使用方法```使用方法-- 省市区选择 show:是否显示 @sureSelectArea：确认事件 @hideShow：隐藏事件-->main.js文件设置全局函数methods: {[] : {};} else {});} else {});});```#### HTML代码实现部分```html
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 2863
Cascader 级联选择器
vue 3 第二十六章：样式（scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind）
to_the_Future的博客
05-25 3886
在 Vue 中，我们可以使用scoped特性来给组件的样式添加作用域。通过为组件的标签添加scoped特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。
vue基础一
dream_of_forget的博客
09-15 2230
1.挂载点el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图2.注意点(1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器开发中基本上都是id选择器，保证HTML标签唯一性如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中(2)如果选择器选中了多个元素，只会选择第一个元素(3)挂载点不能设置为html和body标签 （程序报错）
Vue2选择器（Select）
热门推荐
Mr Dear的博客
05-26 2万+
使用Vue2封装的与ant design样式类似的下拉选择器组件。
vue 中选择器的使用
qq_37570710的博客
03-29 623
3. 通过 this.$el.querySelector() 方法查找。2、通过 document.querySelector() 方法查找。1、通过 $refs 属性查找。
vue选择器
qq_51389137的博客
07-28 2159
简陋
Vue学习笔记
weixin_52938172的博客
12-12 1284
vue入门
el-data-picker季度区间选择器
08-02
基于elementui2.15.8和vue2的el-data-picker季度区间选择器
vue项目中自定义video视频控制条的实现代码
11-21
最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW... 能选择倍速 能控制声音 能全屏播放 接下来一步步的实现 首先康康首页的，上结构代码： <div class="clickL video-box" @mouseover="p
iCalendar:vue的PC端日期选择器
04-01
end 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl
weixin_44867717的博客
09-06 2217
【代码】vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl。
WEB前端
亮Orz的博客
03-06 593
WEB前端
vue+element 多选级联选择器自定义props
Whit3ZzT的博客
05-01 4893
element多选级联选择器及自定义props，自定义标签、值
vue中深度选择器
Yan9_9的博客
11-04 5041
例如你使用了ElementUI的走马灯（轮播图）组件，你想修改其中的样式，但是你设置样式不起作用，这个时候就是因为组件的scoped的影响，所以，不妨试试我们的深度处理器吧。为了防止在一个组件内引入了子组件，而子组件没有加scoped。我们可以看到,子组件加了scoped后,父组件对h3的css样式就不会影响到子组件,如果子组件没加scoped，就会影响到也变成红色。scss: ::v-deep（如果使用了预处理器都可以使用这个(::v-deep 如果使用了预处理器都可以使用。
一文彻底搞懂vue中scoped与deep深度选择器
SmileLife123的博客
02-19 1029
1. css属性选择器是什么。 2. scoped的实现原理。 3.scoped产生的影响。 4.deep深度选择器原理是什么。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue 自定义事件选择器
08-11
Vue自定义事件选择器是指在Vue组件中使用自定义事件进行事件传递和处理。可以通过在组件中使用`$emit`方法触发自定义事件并传递参数，然后在父组件中通过在子组件上监听自定义事件来处理该事件。在代码中，可以使用`$emit`方法来触发自定义事件，如`this.$emit("事件类型名","要给触发的事件的函数handler传入值(可省)")`。例如，可以创建一个名为`box2.vue`的组件，当其中的事件被触发时，使用`this.$emit("click1")`来触发一个名为`click1`的自定义事件。 参考资料： 123 #### 引用[.reference_title] - *1* [vue.js 自定义组件_简单的可自定义Vue.js时间选择器组件](https://blog.csdn.net/cuk5340/article/details/107697078)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* *3* [Vue中自定义事件](https://blog.csdn.net/m0_59345890/article/details/126730572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值