总结vue+elementUI的填坑之路（一）

用vue和elementUI做前端两年多了，大大小小的项目也做了不少，遇到过许多的坑，有时候项目太忙，没有那么多的时间来整理一些知识点。这是挺吃亏的，，因为我始终相信不总结就相当于没学到东西。所以趁着2020年的第一天，对自己立个誓言吧，以后不管项目多忙，抽空总结一下遇到的坑哈，一来可以提升自己，当遇到同样问题时候，可以很快想起这些知识点的解决方案，二来可以方便其他人查阅问题点，便于后来者的学习（因为当我自己遇到问题的时候也经常去查找各种博客，看看别人的理解，到各种群里面询问各路大神们，所以，我觉得在博客里记录下自己的学习感悟和总结是一件有利于自己，也有利于他人的事情。说个题外话哈~~今天是2020年1月1日，祝大家新年快乐哈~）

在接下来的每一篇文章中，我会记录一到两个知识点，没有顺序的，因为我想起来哪个就会记录哪个哦，这些都是零零散散的在项目中遇到的大小坑，，大家不要介意哈，同时也希望路过的大神们给个指点哈~~

先从现在做的项目开始找坑吧：

有个需求是希望在el-radio中，当选中某个radio的时候，希望可以打开el-popover ，如果按照正常思维去做嵌套的话，当选择备选项1的时候，是不可能触发popover打开，原因是因为，el-radio本身就有一个点击事件，当它再次作为popover的触发按钮的时候，那么el-radio就带了两个点击事件，导致事件冲突了，

<template>
    <div>
        <h1>测试1</h1>
        <div>
            <el-radio-group v-model="radio3" size="small">
                <el-popover
                        placement="bottom"
                        title="标题"
                        width="200"
                        trigger="click"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <el-radio slot="reference" label="1">备选项1</el-radio>
                </el-popover>

                <el-radio label="2">备选项2</el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return{
        radio3: '2'
      }
    }
  }
</script>

<style scoped>

</style>

我在网上查阅了一番，看到有位大神给了一个很好的解决方案，为了方便自己日后再遇到这个坑，所以打算在自己的博客里面记录下来，大家看下面的代码，大神给的方案是，在radio的外面包一层button，把触发popover的事件移到button上面去，但是仅仅这样做还是不能打开popover的呢，

<h1>测试1</h1>
        <div>
            <el-radio-group v-model="radio3" size="small">
                <el-popover
                        placement="bottom"
                        title="标题"
                        width="200"
                        trigger="click"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <button slot="reference">
                        <el-radio label="1">备选项1</el-radio>
                    </button>
                </el-popover>

                <el-radio label="2">备选项2</el-radio>
            </el-radio-group>
        </div>

popover还不能打开

<div>
            <el-radio-group v-model="radio3" size="small">
                <el-popover
                        placement="bottom"
                        title="标题"
                        width="200"
                        v-model="visible"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <button slot="reference" >
                        <el-radio label="1">备选项1</el-radio>
                    </button>
                </el-popover>

                <el-radio label="2">备选项2</el-radio>
            </el-radio-group>
        </div>

当把popover绑定v-model就可以打开啦~神奇不（还是要多看看elementui的api的）

别着急呀，这仅仅解决了打开popover，在实际项目中用过的童鞋应该会知道，这里边还藏着一个坑，没玩过的童鞋很容易就又掉到另一个坑里面去了，

大家会发现，会有一个时不时出现的bug，那就是点击备选项1的时候，页面会自己刷新，这是为啥呢？想想就好坑，还能不能好好玩了，对吧？

别急，这个是因为，原生的button有一个type属性，咱们忘了给，如果不给，Internet Explorer 的默认button的type是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"，如果默认是submit就会出现刷新的问题，所以我们要时刻注意使用button的时候，要给type属性，具体看情况定，这里我们就给button的type="button"，告诉浏览器，我这个按钮就只是个按钮而已。

<button slot="reference" type="button">
   <el-radio label="1">备选项1</el-radio>
</button>

看，一坑接一坑，不总结的话，下次可能又忘了，下次再百度去查的时候，可能就又要找半天，何必浪费那时间呢，总结一下，这个知识点就是我的啦~~~哈哈哈

总结vue+elementUI的填坑之路（一）

猜你喜欢