一个简单的带搜索框的单选框组件(vue+elment-ui)

效果图

注意事项

此组件是基于vue和elementui 请先安装elementui

组件内容

 <template>
    <!-- 添加和修改标签弹出框 -->
    <el-dialog :title="title" :visible.sync="open" width="350px" append-to-body :close-on-click-modal="false">
        <el-input
                v-model="context"
                placeholder="搜索标签"
                prefix-icon="el-icon-search"
                clearable
                @keyup.enter.native="search()"/>
        <div style="margin-top: 20px">已选标签: {{selectData.name}}</div>
        <div class="tagsDiv">
            <div v-for="item in searchData" v-bind:key="item.id">
                <el-radio  v-model="id"  :label="item.id" size="medium" class="tagDiv">{{item.name}}</el-radio>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit" >确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "Radio",
        props: {
            // 接收所有参数,必传项
            data: {
                type: Array,
                required: true,
                default() {
                    return {}
                }
            },
            title: {
                type: String,
                required: true,
                default() {
                    return undefined;
                }
            },
            selectKey: {
                type: Number,
                required: true,
                default() {
                    return undefined;
                }
            },
            // 弹窗是否显示
            visible: {
                type: Boolean,
                required: true,
                default: false
            },
        },
        computed: {
            selectData() {
                let item = this.data.find(e => {
                    return e.id === this.id
                });
                if (this.isEmpty(item)) {
                    return '';
                } else {
                    return item;
                }
            },
            searchData() {
                return this.data.filter(e => {
                    return e.name.indexOf(this.searchContext) !== -1;
                })
            },
            open: {
                get() {
                    return this.visible
                },
                set(val) {
                    this.$emit('update:visible', val)
                }
            }
        },
        data() {
            return {
                searchContext: '',
                context: '',
                id: this.selectKey,

            };
        },
        methods: {
            isEmpty(obj){
                if(typeof obj == "undefined" || obj == null || obj == ""){
                    return true;
                }else{
                    return false;
                }
            },
            search() {
                this.searchContext = this.context;
            },
            cancel() {
                this.open = false;
                this.searchContext = '';
            },
            submit(){
                this.$emit('submit', this.id);
                this.open = false;
            }
        }
    }
</script>

<style>
    .tagDiv {
        height: 30px;
        margin-left: 20px;
        margin-top: 10px;
    }

    .tagsDiv {
        border: #c0c0c0 1px solid;
        height: 350px;
        overflow-y: auto;
        margin-top: 10px;
        border-radius: 3px;
    }

</style>

父组件引用示例

<template>
  <div id="app">
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <Radio @submit="changeId" :title="title" :data="data" :visible.sync="open" :selectKey="selectKey"/>
    <el-button @click="add">添加</el-button>
    <el-button @click="print">打印</el-button>
  </div>
</template>

<script>
import Radio from './components/Radio.vue'

export default {
  name: 'App',
  components: {
    Radio
  },
  data() {
    return {
      title: "标签",
      data: [{"id":1,"name":"哈哈"},{"id":2,"name":"嘿嘿"},{"id":3,"name":"多多"}],
      open: false,
      selectKey: 1 //传入可进行默认选中
    };
  },
  methods: {
    add(){
      this.open = true;
    },
    print(){
      console.log(this.selectKey);
    },
    changeId(id){
      this.selectKey = id;
    }
  }
}
</script>