前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue移动端框架Mint UI教程-组件的使用(三)

Vue移动端框架Mint UI教程-组件的使用(三)

作者头像
王小婷
发布2019-04-21 15:36:36
1.6K0
发布2019-04-21 15:36:36
举报
文章被收录于专栏:编程微刊


前面两节说到,从搭建环境,引入Mint框架,到实现一个页面导航跳转;

Vue移动端框架Mint UI教程-搭建环境引入框架(一):https://cloud.tencent.com/developer/article/1406082

Vue移动端框架Mint UI教程-底部导航栏(二):https://cloud.tencent.com/developer/article/1415738

然后就是开始写每个页面的代码,Mint UI存在必有道理

基于vue2.0mint-ui组件的使用

代码语言:javascript
复制
<template>
  <div>
    <gheader :examplename="examplename"></gheader>
    <ul>
      <li><mt-button size="large" @click="ToastA">默认Toast</mt-button></li>
      <li><mt-button size="large" @click="ToastB">带Icon标志的Toast</mt-button></li>
      <li><mt-button size="large" @click="ToastC">自定义位置Toast</mt-button></li>
    </ul> 
    <gfooter></gfooter> 
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  name: 'Toast',
  data(){
    return {
      examplename: "Toast"
    }
  },
  mounted(){

  },
  methods:{
    ToastA(){
      Toast('默认Toast');
    },
    ToastB(){
      Toast({
        message: '操作成功',
        iconClass: 'fa fa-check fa-2x'
      });
    },
    ToastC(){
      Toast({
        message: '自定义位置',
        position: 'bottom',
        duration: 5000
      });
    }
  }
}
</script>
<style scoped>
  ul {
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 10px;
  }
  li {
    margin: 20px 0;
   list-style: none;
  }
</style>

效果如下:


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档