没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
第四阶段目录
的组件库 天
新特性——处理音频,视频,绘制弹幕 天
微信小程序—— 天
组件库
组件,企业为了提升开发效率,针对结构、表现及行为
的封装。
·组件的优势:
提升开发效率,提升项目的可维护性,简化调试步骤
·组件库的分类:
移动端组件库
饿了吗基于 !" 的移动端组件库
#有赞
$%滴滴
桌面端组件库
&饿了吗
'(凹凸实验室
#)视图更新
Mint UI
一款基于 vue.js.2.0 的移动端组件库
* 种组件:" 组件 组件 + 组件
·安装 Mint-ui
,,,
第一步:打开 - 命令行快捷键 )./
第二步:有可能需要切换盘符:输入盘符 敲回车
第三步:输入 -,进入指定的目录
第四步:输入 ,,,
·配置 Mint-ui(在 main.js 下执行)
需要三步基本操作:
·使用 Mint UI
·Header 组件用于实现顶部导航,语法结构:
<mt-header tle=”标题信息” xed> ... </mt-header>
---------------------------
01- 属性用于设置是否固定顶部导航,% 类型,当固定后,脱离标准的文档流
在,+-元素中可以嵌套子元素,但必须为子元素设置 2343或 235+3属性
·reset.css(重置 css 文件)
每个浏览器对于 + 标签都有默认样式(比如:+6),不同浏览器对于标签的默认样式不
同,最好的解决方案是:
重置所有 标签的默认样式,保证所有浏览器的默认样式相同,,!
·Bu%on 组件
%7组件用于实现按钮,语法结构:
<mt-bu%on
type=”按钮类型”
size=”按钮尺寸”
icon=”按钮图标”
disabled
plain>
...
</mt-bu%on>
---------------------------
按钮的类型:-8默认的主要的-5危险的
按钮的尺寸:5
按钮的图标:%9返回更多
-%- 属性用于表示按钮是否为禁用状态,% 类型
属性用于表示按钮是否为镂空,% 类型
按钮内可以嵌套图片 如果该为图片添加 233属性的话,该图片将作为按钮的图标来
显示
·Field 组件
:- 组件用于实现表单编辑器,语法结构:
<mt-eld
type=”输入框的类型”
label=”标签”
placeholder=”占位符内容”
state=”输入框状态”
v-mode=”变量名称”
:a%r=”{原生属性}”
readonly//只读
disabled //禁用
disableClear//是否禁用输入框的清除按钮>
...
</mt-eld>
输入框类型:1)-1%
输入框状态:)5
;7属性用于设置输入框的原生属性 %" 类型:
如:
<mt-eld type=”password” :a%r=”{maxlength:’10’,autocomplete:’o5’}”></mt-eld>
---------------------------
-;属性用于表示输入框是否为只读,% 类型
-%-;属性用于表示输入框是否禁用,% 类型
-%$ 属性用于表示是否禁用输入框的清除按钮,% 类型
注意:autocomplete 属性用于表示是否自动显示文本域的选项
例子:比如多次输入用户名,下次可直接在下拉列表中选择,密码框或者信用卡账号之类
的必须不能直接显示,所以 选 <
·Toast 组件
组件用于显示短消息提示框,语法结构:
//简捷语法
this.$toast(“提示信息”);
//标准语法
this.$toast({
message:”提示信息”,
posion:”提示框显示的位置(top/middle/bo%om)”,
duraon:持续时长(默认 3000ms)
iconClass:”字体图标 css 类”
});
---------------------------
·Messagebox 组件
5 组件用于显示消息提示框,语法结构:
//简捷语法
this.$messagebox(“标题信息”,”提示内容”)
打开集成终端
不要右键点 package.json 会域名会在 8080 的基础上+1 以此类推
ctrl+` //打开集成终端
·<mt-eld>组件的获取/失去焦点事件
<mt-eld
@blur.nave.capture=”函数名称”
@focus.nave.capture=”函数”>
</mt-eld>
---------------------------
Vue.js 的事件修饰符:stop prevent nave capture
·Navbar 组件
=% 组件用于实现顶部选项卡,语法结构:
<mt-navbar v-model=’acve’>
<mt-tab-item id=’a’></mt-tab-item>
<mt-tab-item id=’b’></mt-tab-item>
<mt-tab-item id=’c’></mt-tab-item>
<mt-tab-item id=’d’>
//可以嵌套图片为选项卡图标
<img src=’../../xxx’ slot=’icon’>
</mt-tab-item>
</mt-navbar>
---------------------------
注意:
·navbar 组件 双向绑定时,绑定的变量值只能是 tab-item 其中的一个 id
tab-item 中的 id 值,只需要在当前选项卡内唯一即可
01- 属性用于控制是否固定顶部选项卡,% 型,当 +- 和 % 都固定时只能显
示一个,所以将 +- 和 % 用 - 套住,给 - 用 01- 属性即可
·可以在<mt-tab-item>中嵌套图片,作为选项卡的图标
·Tabcontainer 组件
% 组件用于实现面板,语法结构:
<mt-tab-container v-model=”变量名称” swipeable=””>
<mt-tab-container-item id=””>
<p>...</p>
....
</mt-tab-container-item>
....
</mt-tab-container>
理论同上下一样
% 组件和 % 组件
·Tabbar 组件
Tabbar 组件用于实现底部选项卡,语法结构:
<mt-tabbar v-model=”变量名称” xed>
<mt-tab-item id=”当前选项卡的 id”>
...
</mt-tab-item>
</mt-tabbar>
---------------------------
,%%绑定的变量值只能为,%,的 -
,%,的 - 只需要在当前,%%中保持唯一
01- 属性用于控制是否固定底部选项卡,% 类型
可以在,%,中嵌套图片,作为图标 233
注意:
两个小题:
① 切换面板,参照顶部选项卡实现
② 跳转不同的路由地址
第一种方法:
mt-tab-item 形成的其实是 a 标签
所以可以添加 href 属性(不建议使用这种方法)
第二种方法:
Watch+this.$router
·Cell 组件
Cell 组件用于实现单元格,语法结构:
<mt-cell
tle=”标题”
label=”备注信息”
value=”内容”
icon=”图标”
isLink to=”路由地址”> //to 路由 -- 跳转别的页面
...
</mt-cell>
---------------------------
图标类型包括:%9
可以在内嵌套图片 作为图标 233
9 属性用于表示单元格是否为可点击链接 % 类型
小题:
尝试将底部选项卡封装为子组件
实现首页中的文章列表结构
剩余28页未读,继续阅读
畏旧
- 粉丝: 13
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0