MintUI(详见官方文档)

MintUI

MintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。

http://mint-ui.github.io/docs/#/zh-cn2

Vant组件库也是基于移动端的vue组件库(有赞团队)。

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

基于脚手架项目安装mintui

  1. 新建项目。

    # 找一个空文件夹  VUEUI/day01/demo下执行一个命令
    vue  create  scaffolding
    # 依次选择
    Manually select features   
    选择 Babel - Router - VueX   去掉 linter
    2.x
    是否使用history的路由模式?  回车 Y
    In package.json
    是否将当前上设置作为未来创建项目的预设配置? 回车 N
    
  2. 在新项目中,通过npm i 命令安装MintUI

    # 进入新创建的项目目录
    cd scaffolding
    # 执行安装命令
    npm  i  mint-ui  -S
    

    安装成功后,将会在package.json中出现mint-ui的依赖。node_modules文件夹下也会出现mint-ui的源码包。

  3. 在脚手架项目中,main.js配置MintUI

    // MintUI
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    Vue.use(MintUI)
    
  4. 开始使用组件。

    npm run serve
    

    没有编译错误,配置完成。

测试案例:访问http://localhost:8080/button,看到mintui提供的移动端的按钮样式。

  1. 编写新组件页面:src/testing/Button.vue.
  2. 配置路由: /button Button.vue.

MintUI常用组件

Button组件
Header组件

header用于定义移动端界面的头部标题栏。基本结构:

<mt-header title="标题栏中间的文字内容">
	<div slot="left">左边</div>
	<div slot="right">右边</div>
</mt-header>

案例:访问:/header 看到 src/testing/Header.vue

引入外部样式文件: reset.css

  1. public下新建styles目录,把reset.css放进去。

  2. index.html中引入该css文件即可。

    <link rel="stylesheet" href="/styles/reset.css">
    

脚手架项目属于单页面应用,无论访问任何地址,其实都在加载public/index.html.所以,在public下的资源,可以直接在index.html通过标签路径引入网页。

Field组件

Field组件用于实现表单编辑器,其基本结构:

<mt-field	type="输入框的类型"
          	label="文本框左侧标签的文本"
          	placeholder="占位文本"
          	disabled	是否禁用
          	readonly	是否只读
          	state="输入框的状态 success|error|warning"	
          	disableClear  禁用清空文本框按钮
          	:attr="{maxlength:11}" 为内部的input标签添加属性
></mt-field>

案例:访问 /field, 看到testing/Field.vue.

案例:完成注册页面。

  1. 新建页面:src/views/Register.vue
  2. 配置路由:/register <-> Register.vue
实现注册页面的表单验证
  1. 为按钮绑定click事件,点击后验证表单。
  2. 在事件处理函数中分别为3个组件进行格式验证,都符合条件才输出验证成功。
  3. 可以通过Fieldstate属性来提示用户格式是否正确。
Field组件的@blur失效问题

Mintui中,为Field组件绑定焦点失去、焦点获取的事件的方式如下:

<mt-field @blur.native.capture="checkName()"></mt-field>
<mt-field @focus.native.capture="checkName()"></mt-field>

mt-field组件直接添加@blur无效,因为会被vue当做是mt-field组件的一个自定义事件。而这种事件需要在mt-field组件内部捕获,使用$emit()触发该自定义事件。所以需要在此清楚的告诉vue,该blur事件是原生的焦点失去事件,所以需要添加@blur.native

mt-field组件在编译的时候将会编译成a链接元素:

<a class="mint-cell mint-field">
    <div class="mint-cell-left"></div> 
    <div class="mint-cell-wrapper">
        <div class="mint-cell-title">
            <span class="mint-cell-text">用户名</span>
        </div> 
        <div class="mint-cell-value">
            <input placeholder="请输入用户名" type="text" 
                   class="mint-field-core"> 
            <div class="mint-field-clear" style="display: none;">
                <i class="mintui mintui-field-error"></i>
            </div>
            <div class="mint-field-other"></div>
        </div>
    </div> 
    <div class="mint-cell-right"></div>
</a>

@blur将会被添加到最外层的a上,而浏览器默认inputblur事件阻止冒泡,不会执行ablur事件,所以需要添加:@blur.native.capture,是a上的blur事件在事件捕获阶段先执行。

MintUI常用组件

Navbar组件

navbar组件用于实现顶部选项卡(导航)。其基本语法:

<mt-navbar v-model="active">
	<mt-tab-item id="1">推荐</mt-tab-item>
	<mt-tab-item id="2">科技</mt-tab-item>
	<mt-tab-item id="3">数码</mt-tab-item>
	<mt-tab-item id="4">军事</mt-tab-item>
</mt-navbar>
<script>
   ....
   data: {
       return {
           active: '1'
       }
   }
   ....
</script>

案例:访问:/nav, 看到 testing/Nav.vue

脚手架项目中的图片访问机制

如果在vue组件中访问src下的资源,则可以使用相对路径来引入:

<img src="../assets/001.png">    相对路径  相对当前文件的路径写法
<img src="@/assets/001.png">     相对路径  @代表了src

如果如上述方式访问图片,则脚手架将会在编译打包过程中,将该引用的图片当做代码模块来处理。会将图片放入/img目录,并且重命名 001.xxxxxxxx.png。而后还将修改src属性值,使得可以访问到该图片。

<img src="/img/001.2cb338f3.png">

上述过程为脚手架对图片的编译打包过程,如果图片足够小,脚手架还有另外一种处理图片的方式:将小图片直接转换成base64图片编码,为src属性直接赋值。

研究一下图片的存放位置

在脚手架项目中图片的存放位置有两处:public下、 src

src下的图片用相对路径访问

假设有图片:  src/assets/001.png

<img src="../assets/001.png">    相对路径  相对当前文件的路径写法
<img src="@/assets/001.png">     相对路径  @代表了src

public下的图片用绝对路径(斜杠/)直接访问

假设有图片:  public/001.png
<img src="/001.png">

public文件夹下的资源会在打包时原封不动的复制到dist目录下,所以可以直接通过/来访问这些资源。

什么图片放src?什么图片放public

src目录属于源代码目录,需要思考这些图片是不是属于源代码的一部分。一些不会变化的、项目中必须显示的小图标就适合放到src,其余的都可以放入public或其它静态图片服务器,通过网络地址动态加载。

TabContainer组件

TabContainer组件用于实现面板,页面中可以保存多个面板,并且实现面板内容的切换(一个显示,其它隐藏)。其基本结构:

<mt-tab-container v-model="active">
	<mt-tab-container-item id="1">面板1内容</mt-tab-container-item>
	<mt-tab-container-item id="2">面板2内容</mt-tab-container-item>
	<mt-tab-container-item id="3">面板3内容</mt-tab-container-item>
	<mt-tab-container-item id="4">面板4内容</mt-tab-container-item>
</mt-tab-container>

Tabbar组件

Tabbar组件用于实现底部选项卡,其语法:

<mt-tabbar v-model="selected">
	<mt-tab-item id="sy">首页</mt-tab-item>
	<mt-tab-item id="gwc">购物车</mt-tab-item>
	<mt-tab-item id="wd">我的</mt-tab-item>
</mt-tabbar>
data:{
	selected: 'sy'
}

案例:访问:/tabbar 看到:testing/Tabbar.vue

脚手架环境下的图片的动态路径问题

有如下标签:

<img src="../assets/main_0.png">

该路径为相对路径,访问了src下的资源。这种写法最终将会被脚手架编译,重写src

<img src="/img/main_0.adsdkfhs.png">

注意:如果src为动态属性(前面有冒号),脚手架将不会编译该路径,直接输出到页面

<img :src="../assets/main_0.png"> 
将不会编译,直接输出为:
<img src="../assets/main_0.png">   // 导致图片找不到

所以应该将动态路径字符串交给require方法进行处理,将会返回处理后的结果(目标路径):

<img :src="require('../assets/main_0.png')">
将会编译为:
<img src="/img/main_0.adsdkfhs.png">

图片处理方案(总结):

  1. 先确定图片应该放在public还是src
  2. public下图片用绝对路径访问,src下图片用相对路径访问。
  3. src下的图片路径需要动态处理(:src=""),使用require()方法处理该路径。

处理底部选项卡的选中效果

点击某一个底部选项卡时,需要动态切换上半部分的内容。可以通过动态组件的方式实现。也可以使用嵌套路由。

访问:  
localhost:8080/home/index      Home中显示'首页'内容
localhost:8080/home/me         Home中显示'我的'内容

实现步骤

  1. 准备好3个Vue页面:

    1. HomeView.vue 该页面中包含一个底部选项卡,还有一个<router-view/>
    2. Index.vue 该页面中用于显示首页内容。Header Navbar TabContainer
    3. Me.vue 用于显示我的个人信息页面内容。
  2. 配置嵌套路由:

    访问:  
    localhost:8080/home/index      Home中显示'首页'内容
    localhost:8080/home/me         Home中显示'我的'内容
    
Swipe组件

swipe组件用于实现轮播图,其基本语法结构:

<mt-swipe>
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
引入ArticleItem组件,构建基本界面结构
  1. article_item.vue 复制到components目录下。

  2. Index.vue中引入该组件:

    <template>
    	....
        <ArticleItem />
        ....
    </template>
    
    <script>
    import ArticleItem from '../components/article_item.vue'
    export default {
      components:{
        ArticleItem
      }
    }
    </script>
    
  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python 是一种易于学习又功能强大的编程语言。它提供了高效的高级数据结构,还有简单有效的面向对象编程。Python 优雅的语法和动态类型,以及解释型语言的本质,使它成为多数平台上写脚本和快速开发应用的理想语言。 Python 解释器及丰富的标准库以源码或机器码的形式提供,可以到 Python 官网 https://www.python.org/ 免费获取适用于各个主要系统平台的版本,并可自由地分发。这个网站还包含许多免费第三方 Python 模块、程序和工具以及附加文档的发布页面或链接。 Python 解释器易于扩展,可以使用 C 或 C++(或者其他可以通过 C 调用的语言)扩展新的功能和数据类型。Python 也可用于可定制化软件中的扩展程序语言。 这个教程非正式地介绍 Python 语言和系统的基本概念和功能。最好在阅读的时候准备一个 Python 解释器进行练习,不过所有的例子都是相互独立的,所以这个教程也可以离线阅读。 有关标准的对象和模块,参阅 Python 标准库。Python 语言参考 提供了更正式的语言参考。想要编写 C 或者 C++ 扩展可以参考 扩展和嵌入 Python 解释器 和 Python/C API 参考手册。也有不少书籍深入讲解Python 。 这个教程并没有完整包含每一个功能,甚至常用功能可能也没有全部涉及。这个教程只介绍 Python 中最值得注意的功能,也会让你体会到这个语言的风格特色。学习完这个教程,你将可以阅读和编写 Python 模块和程序,也可以开始学习更多的 Python 库模块,详见 Python 标准库。
管理系统,作为一种高效的企业运营管理工具,旨在通过集成化、系统化的手段,对组织内部的各类资源进行规划、协调、控制和优化,以实现企业战略目标,提升运营效率,增强核心竞争力。以下是对管理系统的详细介绍: 一、定义与构成 管理系统是指由硬件设备、软件应用、数据资源、人员以及相关管理制度共同构建的,用于处理、监控、分析和决策各类业务活动的综合信息系统。它通常包括以下几个核心组成部分: 数据采集模块:负责从各类业务环节中实时、准确地收集信息,形成企业的基础数据资源。 数据分析模块:运用统计学、人工智能等技术对数据进行深度挖掘和智能分析,提供决策支持。 业务流程管理模块:设计、执行、监控和优化业务流程,确保各项任务按照预定规则高效运转。 决策支持模块:基于数据分析结果,为管理者提供直观的可视化报告,辅助其进行科学决策。 用户界面与交互模块:提供友好的人机交互界面,方便用户操作使用。 二、主要类型与功能 管理系统根据所针对的管理对象和领域,可分为多种类型,如: 人力资源管理系统(HRM):涵盖招聘、培训、绩效考核、薪酬福利等人力资源全流程管理,提升人才效能。 客户关系管理系统(CRM):集中管理客户信息,优化销售、营销和服务流程,提升客户满意度和忠诚度。 供应链管理系统(SCM):整合供应商、制造商、分销商、零售商等供应链各环节,实现物流、资金流、信息流的协同运作。 企业资源计划系统(ERP):对企业内部财务、生产、采购、库存、销售等各项资源进行全面集成管理,提高整体运营效率。 项目管理系统(PM):对项目全生命周期进行规划、跟踪、控制,确保项目按时、按质、按预算完成。 三、价值与优势 提高效率:自动化工作流程、标准化业务操作,显著减少人工干预,提升工作效率。 优化决策:实时数据分析与预测,提供精准的决策依据,助力管理层做出明智选择。 资源整合:打破部门壁垒,实现信息共享,优化资源配置,降低运营成本。 合规风控:内置法规遵循机制,强化内部控制,降低经营风险。 持续改进:通过对系统数据的持续监控与分析,驱动业务流程持续优化,促进企业创新与发展。 总的来说,管理系统作为现代企业管理的重要工具,以其强大的数据处理能力、智能化的决策支持和高效的业务流程管理,有力推动了企业的数字化转型,助力企业在日益激烈的市场竞争中保持竞争优势。
毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管理系统。毕业设计管

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值