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

最新推荐文章于 2024-07-24 10:48:36 发布

as-鲨鱼辣椒

最新推荐文章于 2024-07-24 10:48:36 发布

阅读量1k

点赞数

文章标签： vue elementui javascript css html5

本文链接：https://blog.csdn.net/weixin_47534571/article/details/112479285

版权

本文介绍了如何使用Vue.js和Element UI框架创建一个带有搜索框的单选框组件。首先展示了组件的效果图，然后强调了需要预先安装Element UI的注意事项。接着详细讲解了组件的具体内容，最后给出了在父组件中引用该组件的示例代码。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

注意事项

此组件是基于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>
            &