溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue.js中mint-ui框架的使用方法

發(fā)布時(shí)間:2020-09-21 17:15:52 來源:腳本之家 閱讀:173 作者:遇酒 欄目:web開發(fā)

本文為大家分享了vue.js中mint-ui框架的使用方法,具體內(nèi)容如下

1.安裝vue2.0的mint-ui框架

npm install mint-ui -save 

2.引用和使用框架,我用的是全部組件,也可以按需選擇加載相應(yīng)的組件,不過要使用babel-plugin-component

import Mint from 'mint-ui'; 
Vue.use(Mint);

3.創(chuàng)建一個(gè)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組件中調(diào)用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.預(yù)覽圖

vue.js中mint-ui框架的使用方法

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI