专栏首页编程微刊Vue移动端框架Mint UI教程-组件的使用(三)

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



前面两节说到,从搭建环境,引入Mint框架,到实现一个页面导航跳转; Vue移动端框架Mint UI教程-搭建环境引入框架(一):https://www.jianshu.com/p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏(二):https://www.jianshu.com/p/56e887cbb660

然后就是开始写每个页面的代码,Mint UI存在必有道理 基于vue2.0mint-ui组件的使用

<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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS写一个缺角的div

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div

    王小婷
  • 小程序云开发实战六:云数据库读取的数据显示在小程序端列表里

    参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/data...

    王小婷
  • jQuery实现一个穿梭框

    需求:点击选中左侧内容,把左侧的内容放到右侧的框里面,可以一次放入一个,也可以一次放入多个或者全部,同样,右侧也一样。

    王小婷
  • JQuery插件

    1.页面 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml...

    用户1055830
  • 经验贴:如何进行大数据入门级学习

    虽然题主问的是大数据的入门,但在我看来“大数据”就是数据科学的一个高阶状态。以下内容中除个别情况,我基本上都会使用“数据科学”这个概念。数据科学并没有一个独立的...

    华章科技
  • 【干货】怎样进行大数据的入门级学习?

    数据科学并没有一个独立的学科体系,统计学,机器学习,数据挖掘,数据库,分布式计算,云计算,信息可视化等技术或方法来对付数据。但从狭义上来看,我认为数据科学就是解...

    小莹莹
  • 【数据科学】怎样进行大数据的入门级学习?

    数据科学并没有一个独立的学科体系,统计学,机器学习,数据挖掘,数据库,分布式计算,云计算,信息可视化等技术或方法来对付数据。但从狭义上来看,我认为数据科学就是解...

    陆勤_数据人网
  • 怎样进行大数据的入门级学习?

    文 | 郭小贤 数据科学并没有一个独立的学科体系,统计学,机器学习,数据挖掘,数据库,分布式计算,云计算,信息可视化等技术或方法来对付数据。 但从狭义上来看,...

    CDA数据分析师
  • Greenplum数据库巡检报告

    4.2.4 查看所有segment是否可达,确保QD(query dispatching)正常 16

    小徐
  • Java并发-16.重入锁

    悠扬前奏

扫码关注云+社区

领取腾讯云代金券