Question

我很高兴使用Vue Material的Onboarding组件。我希望将它用作照片的转盘。我试图在我的项目上实施，但看起来有点凌乱。有人从官方网站上了解一些文档吗？

感谢

    <md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
            <md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" md-swipe-distance="50">
                <md-board id="slide1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
            </md-boards>
</md-layout>

所有Lorem P标签都显示在同一张幻灯片上（num.1），其他3个标签显示为空。

Answer 1

看起来不错（但是一个sytax错误 - 缺失：字符在＆＃39; md-swipe-distance =＆＃34; 50＆＃34;＆＃39;。

我认为如果您： a。）包括所有必需的依赖项（CSS，JS） b。）用材料初始化Vue

代码：

HTML：

<div id="app">
 <md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
            <md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" :md-swipe-distance="50">
                <md-board id="slide1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
                <md-board id="slide4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
                </md-board>
            </md-boards>
</md-layout>
</div>

JS：

Vue.use(VueMaterial);

new Vue({
  el: '#app'
  , methods: {

  }
});

并包含＆＃34;依赖＆＃34;;

CSS：

//unpkg.com/vue-material@0.7.4/dist/vue-material.css
//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic
//fonts.googleapis.com/icon?family=Material+Icons

JS：

//unpkg.com/vue@2.2.4
//unpkg.com/vue-material@latest

Codepen玩它：

https://codepen.io/anon/pen/vZMqEx

祝你好运：D

Vue材料入职组件

1 个答案: