vue 简略版select自定义组件

最新推荐文章于 2024-09-03 08:50:28 发布

要炸

最新推荐文章于 2024-09-03 08:50:28 发布

阅读量617

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/weixin_42238474/article/details/92627157

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

// 组件格式
Vue.component("select-template",{
      template:'<div class="select-template" @click="toggleMenu"><i class="fa fa-angle-left" :class="{\'rotate-90\' :inputfocus}"></i>' +
        '<input type="text" readonly :value="schoolName" :disabled="disabled">' +
        '<ul class="select-list" v-show="inputfocus">' +
        '<li v-for="(item, index) in school" :key="index" @click="choseItem (item)">{{item}}</li>' +
        '</ul></div>',
      props:['school','value','disabled'],
      data: function () {
        return {
          inputfocus: false,
          schoolName: ''
        }
      },
      methods:{
        toggleMenu: function (e) {
          e.stopPropagation();
          if (this.disabled) {
            return
          }
          this.inputfocus = !this.inputfocus;
        },
        choseItem (item) {
          this.schoolName = item;
          this.$emit('input', item);
        }
      },
      created: function () {
      }
    });

// 调用组件
<select-template v-model="school" :school="schoollist" ref="select"></select-template>