本文為大家分享了vue.js中mint-ui框架的使用方法，具體內容如下
1.安裝vue2.0的mint-ui框架
npm install mint-ui -save
2.引用和使用框架，我用的是全部組件，也可以按需選擇加載相應的組件，不過要使用babel-plugin-component
import Mint from 'mint-ui'; Vue.use(Mint);
3.創建一個header.vue組件，里面寫入mint-ui的頭部組件
<template>
<mt-header title="問答">
<router-link to="/search" slot="left">
<mt-button icon="search">{{searchTitle}}<mt-button>
<router-link>
<mt-button to="/ask" slot="right">
<mt-button icon="ask">提問<mt-button>
<mt-button>
<mt-header>
<template>
<script>
require('../less/config.less');
export default {
data(){
return{
searchLeft:'searchLeft',
searchTitle:'搜索',
}
},
methods:{
handleClose:function(){
this.$indicator.open('加載中...');
}
}
}
<script>
4.在app.vue組件中調用header.vue組件
<template> <div id="app"> <h-eader><h-eader> <router-link to="/home">主頁<router-link> <router-link to="/news">新聞<router-link> <mt-button @click.native="handleClick">按鈕<mt-button> <div> <router-view><router-view> <div> <div class="box"><div> <div> <template>
<script>
import Header from './components/header.vue';
require('./less/collect.less');
export default {
name: 'app',
methods:{
handleClick:function(){
this.$indicator.open('加載中...');
},
},
components:{
'h-eader':Header
}
}
<script>
5.預覽圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
