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

问题描述

问 题

第一次使用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>

解决方案

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框。

这篇关于javascript - vue下的mint-ui框架，popup组件怎么加载数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！