H5W3
当前位置:H5W3 > 其他技术问题 > 正文

有关vue的一个场景的最佳实践的问题

我们都知道控制一个组件或页面元素显示或者隐藏,可以使用vue中的v-show绑定一个变量来实现
比如我们点击一个按钮,显示一个组件,再点击,会隐藏

页面部分
<input type="button" @click="toggleModal">
<test-modal v-show="showModal"></test-modal>

逻辑部分
....
data () {
  return {
    showModal: false
  }
},
methods: {
  togggleModal () {
    this.showModal = !this.showModal;
  }
}

现在的场景是,如果我们页面上需要有十个这样的button,对应十个modal,而且这些modal都不是单例的,即可以同时存在,那我们要引入10个变量,而且要绑定10个函数,这样当然是可以的,然而有没有更加简单的方式。
我得想法是,写一个自定义指令v-modal,绑在button上,如

<input type="button" v-modal:modal-1>

然后在v-modal指令的insert方法中绑定button的事件操作,操作相应的DOM,此时是modal-1。故相应的modal应该增加一个ref:

<test-modal ref="modal-1"></test-modal>

这样就少写了很多重复的逻辑语句

请问是否还有更好的办法?


看了一下各位的回答,首先非常感谢,但是我还是觉得用数组解决不是最优解,
准备自己尝试其他更简洁的方法


参考了下饿了么的前端组件库

Jsfiddle

  1. html的写法很简洁,一个button对应一个modal,分别用binding.argref连接起来, 很容易阅读

  2. 指令部分可以单独放在一个文件内

  3. 开关逻辑写在组件内部,且只需要写一次

回答:

10 个功能类似的按钮可以抽象成 10 条数据,然后进一步抽象成一个数组:

export default {
  data () {
    return {
      buttons: [
        { text: 'xxx', isModalOpen: false },
        { text: 'yyy', isModalOpen: false },
        // ...
      ]
    }
  },
  methods: {
    toggleModal (index) {
      this.buttons[i].isModalOpen = !this.buttons[i].isModalOpen
    }
  }
}

然后在模板中简单地复用 methods 与 data 数据。按钮分散在页面各处时,不需要 v-for,直接硬编码数组下标即可:

<button @click="toggleModal(0)">{{buttons[0].text}}</button>

回答:

直接写也不麻烦啊,循环遍历输出就好了,而且逻辑很清楚。https://jsfiddle.net/stardew/…

回答:

为什么不直接用个方法来控制元素?
然后直接按钮监听调用就完了啊.
感觉像是为了尝试vue的功能而写功能,而不是为了需求写功能.

回答:

如果不想用v-for循环其实我觉得可以用slot插槽,具体写法我写了一下,组件如下:

<template>
  <div>
    <button @click="changeModal">click</button>
    <div v-show="showModal">
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        showModal: false
      }
    },
    methods: {
      changeModal () {
        this.showModal = !this.showModal
      }
    }
  }
</script>

在其他组件里面的用法如下:

<modal>
  <test-modal></test-modal>
  <!-- test-modal为你想要控制的组件 -->
</modal>

本文地址:H5W3 » 有关vue的一个场景的最佳实践的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址