Vue材料加入组件

我很新，使用Vue材质的Onboarding组件。我正在使用它作为照片的卡鲁塞尔。我试图在我的项目上实施，但看起来有点乱。任何人都知道一些文件从官方网站的一部分？Vue材料加入组件

THANKS

<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显示为空。

来源

2017-06-24 user3380738

请提供一些代码，以便我们可以帮忙页。这个问题对于stackoverflow并不够具体。 – mesqueeb

@mesqueeb只是上传我的问题 – user3380738

看起来不错（但一个语法时才错误 - 丢失：前“MD-刷卡距离=‘50’”字符

我认为它应该工作，如果你：一）包括所有需要的依赖（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: { 

    } 
});

并包含“依赖关系”;

CSS：

//unpkg.com/[email protected]/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/[email protected] 
//unpkg.com/[email protected]

Codepen发挥它：

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

好运：d

来源

2017-07-17 14:18:23 nettutvikler

Vue材料加入组件

回答

相关问题