vue下的mint-ui框架，popup组件怎么加载数据？

Question

第一次使用mint-ui，当我现在能出现popup的模糊背景效果，但是数据加载出来直接都是代码，官网文档实在是简略。这里是官网文档

<template>
  <div id="first">
    <p>我是第一个{{msg}}</p>
    <mt-button @click.native="handleClick">按钮</mt-button>
    <mt-popup v-model="popupVisible" position="bottom">{{slots}}</mt-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'组件',
      popupVisible:false,
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    }
  },
  methods: {
    handleClick: function() {
        this.popupVisible = true
        }
    }
}
</script>

<style>

</style>

Answer 1

v-for 循环 slots 的每一条信息，
例如:

<template>
  <div id="first">
    <p>我是第一个{{msg}}</p>
    <mt-button @click.native="handleClick">按钮</mt-button>
    <mt-popup v-model="popupVisible" position="bottom">
        <div v-for="it in slots">
            <span v-text="it.flex"></span>
        </div>
    </mt-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'组件',
      popupVisible:false,
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    }
  },
  methods: {
    handleClick: function() {
        this.popupVisible = true
        }
    }
}
</script>

<style>

</style>

这样就能循环出每一条数据了，加点样式美化一下，你就能得到你想要的。

官网文档给的是一个空白页，意思是里面的东西随你自己填，只要放到组件里面，就能通过相关的触发事件去调出这个popup框。

Answer 2

你直接把slots的数据丢进去的肯定出来的就是书卷呀，你要循环出来啊，连上样式再绑进去

Answer 3

你这样写在vue里就是这么展示的额。你需要在mt-popup标签里面自己写标签和样式，包括循环数据，popup只负责展示你给他的东西。