您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
Vue UI框架 MintUi的介绍 以及使用(mint,ui,actionsheet,索引,index)
发布时间：2023-04-11 18:17:07编辑：雪饮阅读（）
-
安装mint-ui
npm install mint-ui –save
配置mint ui
主要是我这里想要在一个单独的路由里面写mint ui，所以单独一个vue文件，但我又想要挂在App.vue中通过路由点击过去。
所以首先是main.js中配置mint ui以及路由配置如
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Index from './components/Index.vue';
import News from './components/news.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
import User from './components/user.vue';
import UserAdd from './components/userAdd.vue';
import UserList from './components/userList.vue';
import './assets/css/basic.scss';
//导入mint ui
import MintUI from 'mint-ui';
//由于项目可能创建时候有选择支持scss，然后scss的支持则就会附带包含css的支持
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
//导入mint ui练习的组件
import MintUI_Practice from './components/MintUI_Practice.vue';
const routes=[
{path:'/',component:Index,name:'index'},
{path:'/news',component:News,name:'news'},
{path:'/news/content1/:aid',component:Content1},
{path:'/news/content2',component:Content2},
{
path:'/user',
component:User,
name:'user',
children:[
{path:'/user_add',component:UserAdd,name:'user_add'},
{path:'/user_list',component:UserList,name:'user_list'},
]
},
//配置mint ui练习组件的路由
{path:'MintUI_Practice',component:MintUI_Practice,name:'MintUI_Practice'},
{path:'*',component:Index}
];
const router=new VueRouter({
routes,
mode:'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
那么接下来就是要在这个mint ui练习的区域演示下
普通按钮default
比较重要的按钮primary
按英文字母索引元素表
ActionSheet的使用
那么MintUI_Practice.vue如
<template>
<div>
<div>这里是mint ui练习区</div>
<hr/>
<mt-button type="default">default类型按钮</mt-button>
<mt-button type="primary">primary类型按钮</mt-button>
<hr/>
<!---
按英文字母索引元素表
每个mt-index-section的index属性值为索引索引字母
每个mt-cell的title值为mt-index-section的index属性值下的索引成员元素值
--->
<mt-index-list>
<mt-index-section index="A">
<mt-cell title="Aaron"></mt-cell>
<mt-cell title="Alden"></mt-cell>
<mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
<mt-cell title="Baldwin"></mt-cell>
<mt-cell title="Braden"></mt-cell>
</mt-index-section>
<mt-index-section index="C">
<mt-cell title="china"></mt-cell>
<mt-cell title="chongqing"></mt-cell>
<mt-cell title="cake php"></mt-cell>
<mt-cell title="cookie"></mt-cell>
</mt-index-section>
<mt-index-section index="D">
<mt-cell title="desk"></mt-cell>
<mt-cell title="dedecms"></mt-cell>
<mt-cell title="disk"></mt-cell>
<mt-cell title="day"></mt-cell>
</mt-index-section>
<mt-index-section index="F">
<mt-cell title="frosting"></mt-cell>
<mt-cell title="fasten"></mt-cell>
<mt-cell title="fuck"></mt-cell>
<mt-cell title="free"></mt-cell>
</mt-index-section>
<mt-index-section index="Z">
<mt-cell title="Zack"></mt-cell>
<mt-cell title="Zane"></mt-cell>
</mt-index-section>
</mt-index-list>
<hr/>
<!---
actionsheet的使用
click.native我的理解就是直接写原生js代码，省略了多写一个方法，相当于直接写方法体里面的语句
只不过里面的变量没有显式声明的情况下应该是以data()里面的数据为载体
这里即表示当这个“选择用户头像”被点击，则flag赋值为true
那么mt-actionsheet的实现原理应该就是依据其v-model绑定的flag，当flag为true时候则mt-actionsheet就会显示
然后mt-actionsheet中呈现的菜单中的条目是由:actions提供的这里同样也是绑定到data里面的actions
这个actions的值是一个列表，也就是条目列表，每个条目有条目名称和该条目被点击后所执行的方法的配置。
--->
<mt-button @click.native="flag=true" size="large">选择用户头像</mt-button>
<mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet>
</div>
</template>
<script>
export default {
data(){
return {
flag:false,
actions:[]
}
},
methods:{
takePhoto(){
alert("你点击了拍照");
},
openAlbum(){
alert("你点击了从相册中选择");
}
},
mounted(){
this.actions=[
{
name:"拍照",
method:this.takePhoto
},
{
name:'从相册中选择',
method:this.openAlbum
}
];
}
}
</script>
那最后App.vue上面挂上MintUi_Practice.vue
<template>
<div id="app">
<button @click="goto('index')">首页</button>
<button @click="goto('news')">新闻</button>
<button @click="goto('user')">用户</button>
<button @click="goto('MintUI_Practice')">MintUI练习区</button>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods:{
goto(name){
this.$router.push({name:name});
}
},
}
</script>
关键字词：mint,ui,actionsheet,索引,index