zoukankan      html  css  js  c++  java
  • VUE-Day06 vue-ui

    1.vue 最开始是针对pc用户

    pc端 和 移动端 区别:

    ①屏幕宽度:pc > 992px   

    ②操作方式:pc 鼠标事件 移动端 触碰操作

    -饿了么:基于Vue框架开发移动组件库 Mint-UI

    -MUI:开源团队 MUI

    -滴滴:

    2.vue-ui 组件 组件 mint-ui 安装与使用

    方式一:学习环境下载安装

                 下载 mint-ui js/css/font  

    方式二:生产环境下载安装(即脚手架中如何使用)  

                 下载 npm i mint-ui  配置  

    3.vue ui 组件 mint-ui组件分类

    -css Components 组件 (外观)

    -js Components 组件

    -Form Components 组件

    4.vue ui 组件 mint-ui组件 Toast 提示框

    -下载 mint-ui js/mint css  

    -下载 vue.js

    #html 加载文件顺序 先加载vue.js 再加载mint.js     

    this.$toast("提示消息");  

    this.$toast({ });

    5.vue ui 组件 mint-ui 组件 lazyLoad

    <ul>

       <li>

              <img v-lazy="x.png" />  

       </li>

        ...

    </ul>

    #懒加载图片显示样式

    img[lazy=loading]{

         150px;

         height:40px;

         margin:auto;

    }

    6.vue ui 组件 mint-ui 组件 轮播图

    <mt-swipe :auto="4000" :show-indicators="true">

       <mt-swipe-item>

             <img src="x.jpg" />

       </mt-swipe-item>

    </mt-swipe>

    #注意:mint-ui 组件轮播图默认高度0

        

  • 相关阅读:
    C++ com 组件的使用
    年计算机硬件基础知识大全
    prism 的学习网站
    WPF
    C#录音从声卡
    C#实现放大镜
    HTML常用提交按钮
    HTML常用标签
    k8s 运行单实例 mysql
    aws eks ebs StorageClass PersistentVolume PersistentVolumeClaim
  • 原文地址:https://www.cnblogs.com/goforxiaobo/p/12746451.html
Copyright © 2011-2022 走看看