element-ui键盘怎么触发
粉丝24.0万获赞161.4万
相关视频
11:28查看AI文稿AI文稿好，接下来我们实现一下这个页面的头部钥匙，我们头部钥匙简单的做几个 功能，第一个呢就是在这个头部呢有一个 logo 啊，后边，然后跟着一个我们的系统名， 然后在最右侧呢有一个小拉菜单，就是说我们可以推出系统啊，或者之后加一些修改个人资料啊什么的啊，然后我们打开代码， 找到这个组件里边的这个嗨点部分，我们先加一个图片，找一妹子，然后呢给一个 logo 图片，嗯，这是他默认的，让我们给他换一个， 这准备了一个照片，一个小图片， ok 啊，我们引入一下，我们用艾特的方式，哇塞斯的啊， log 点偏进好看一下啊，他有点大。然后我们给他改一下这个样式， 我们给他加一个类名，就叫 sisterm logo， 在这钥匙里边给他加一下钥匙啊，加一个死扣， 那样式呢，我们 给一个宽度五十啊，因为我们这个头部的这个高度呢，我们之前就是给的五十啊，直接给个五十 px， 嗯，然后圆角给个一半二十五 px， 像这样的话就是个圆形啊，然后我们加一个左边距啊，然后看一下效果， ok， 就这样啊，然后我们呢再加一个这个系统的一个题目啊，一个标题啊，系统名称， 然后我们加一个 spa， spa 呢，我们就交个我的个人项目，嗯， 然后我们也给他加一个克拉斯 啊，这里呢我们先保存一下，看一下效果啊，他现在是这样的，就是图片呢导致这个文字错位了啊，我们给他给图片加一个微， 我炒个烂出去啊，等于没到。这样呢，让这个文字呢能够垂直居中，然后我们再给文字加一点样式啊，比如说这个大小 十八个篇，然后文字的 粗细，然后给个七百，然后距左边的一个位置给个十八 ps 啊，大概就是这样一个简单的效果啊，然后我们在右侧呢做一个下拉菜单， 然后我们打开这个哎里面的 ui 啊，这有这个桌不当的一个下拉菜单啊，就是这种效果啊，鼠标放上去或者是鼠标点击的一种效果啊， 然后我们就用最最普通的这个，我们复制一下代码啊，就是 el 得不到 复制到代码中，然后他这有一部分样式啊，我们给他加一下，其实这块不需要也行，我们 自己自己再实现一下啊，现在我们先给他加上 啊，我们看一下效果啊，他现在是在这，然后我们给他加一个样式，让他去到右边啊， 然后我们之前说过，就是他使用这个 e l 杠桌不当的这个标签名，那我们就可以拿到 用他这个相同的类名来拿到这个元素啊，我们给他加一个这点 el 这么大啊，我们给他加一个右浮动， 然后让他跑到右边来，右边之后呢，我们给他加一个靠右的编剧 martin on right， 给个四十八 pix 啊，现在是这， ok， 我们再看一下这个，他这个元素啊，他这个是左右没有编剧的，我们稍微给他加一点编剧， 然后我们在这个 earling 上给他加一个拍顶啊，上下铃左右呢这个十二撇了啊，这样呢，就是鼠标放到旁边的时候呢，也有也可以把这个菜单给下拉出来啊。另外呢就是这个箭头， 他这现在是不是一个居中的位置？然后我们让他居中一下啊，然后我们可以看一下这个 他这个属性啊，然后有一个普利斯门特，然后一个菜单的弹出位置啊，我们可以给他改到这个 正下方叫波特么啊，然后我们看一下这个他的属性，给他加一下啊啊，普利斯面特等于这个波特， 这样呢，就是这个箭头呢，能够属于处于正中间位置啊，然后我们给他加几个菜单啊，比如说这个退出系统 修改资料， 然后我们就先给两个吧，我们后边有需要的话再讲啊，然后他这里边呢有一个类似一个歪柳直的形式啊， 然后我们看一下 hmm， 然后他可以看到这个地方，他有个 come on， 这个地方呢，就代表他一个歪九值啊，我们可以先给他付一下那个 come on 呢，等于一个啊，随便我们定一个，比如说我们叫 logo out， 另一个修改资料啊，然后他有个这个菜单的一个选择的试件，然后看一下我们这个叫艾特 come on 的啊，给他放进来 啊，我们去实现一下这个方法， 下拉菜单，点击式，选中式，然后我们再看一下啊，他这个方法里边有个 come 这个参数名，可以随便定义啊，然后不一定要叫这个 come on 啊，然后我们可以输出一下这个，打印一下这个 come on 的 看一下， ok， 我们点退出退出系统，然后他叫 logot 啊，然后点修改资料叫啊不对他，然后我们就可以通过判断这个 come on 的值啊，来进行不同的操作啊，然后我们判断一下 if command 等于 log out， 这个呢就代表 退出系统， 推出系统呢，我们可以再实现一个方法啊，就叫 logos 推出系统的方法，让我们再单独写一个啊， 推出系统呢，我们目前只保存了这个，嗯，在这个本地这个路口 老蕊中呢，保存了这个用户的登录信息，所以说我们现在这个系统呢，我们只需要在推出的时候删除一下这个存储的用户信息就行了，然后删除之后呢啊，调回到这个登录页啊就可以了，然后后期的话 这个退出呢，是需要调用这个后台接口的，因为他需要清除这个淘汰啊等等一些东西啊，那时候呢，我们在调用接口，调用完接口之后呢， 再清除一些需要清除的数据，然后再调回到这个登录页啊，我们现在就是清除一下这个用户信息就可以了，然后就是 look sorry 了啊， remove item 艾特，那我们的这个本地存储啊，这个我们可以看一下，我们保存的叫有点硬，放， 看这个 k 值，我们就拿着这个 k 值就可以了，然后他就会把我们保存这个优点信息呢给清掉啊，就叫优点一放就可以了，清，说完之后呢，我们需要跳回到灯笼页， 那我们使用这个 z 四点儿刀篮 就是里边呢，我们可以直接通过这个 pass 的方式啊，这就是 loy， 这样 ok， 我们看一下这个效果，我们点推出推出登录 这个地方呢，就直接给我们返回到这个灯笼印啊，然后我们再登一下 啊，这个后台接口挂了，我们再到时候再重启一下吧，然后现在的话就讲到这啊。
18前端杨wh
08:06查看AI文稿AI文稿各位同学大家好，欢迎大家参加十天技能课堂系列，我是主讲老师李彦辉。 今天呢，我们来看一款 vivo 点 gs 的桌面前端 ui 库啊，它是一个前端的主键库，那我们来首先了解一下他的入门信息呢和他的安装方式。好，首先呢先来看一下啊，什么是 amt ui， 他是一套呢为 传统桌面啊，主要是传统桌面准备的基于 vivo 点 js 的前端主键库。那我们先打开他的官网啊，他的官网就在这里啊，网站快速成型工具，我们点主键这里啊就可以了，指南的话我就自己说一说了啊，好， 逐渐这里我们来看一下，好，再打开这里。那我们需要哪些学习基础呢？好，那么，呃，首先呢，我们是他是基于六点啊，可以脚手 架下啊，其实不基于也是可以的，但是我们推荐是基于这个脚手架下，我们去学习和开发啊，所以需要一些基础。 我们之前呢学过两门课程，一个是 v 有点 gs 的核心篇，就是语法篇，那第二个呢，就是工具篇啊，讲到最主要的就是两样，就是他的脚手架和他的陆游啊，如果学习过，我出的啊，第三门课就是威实在， 那效果更佳啊，因为他把前面两个呢做了一个什么，做了一个综合， ok， 好，上面两门课呢啊，两门课呢也是需要基础的啊，那你可以去参考上面课程的第一节课的要求。那我这边就说一下啊， h t m 五 css 加 stay 的对吧。 e s 啊， e c m s pro 的六啊。 ok， 那如果你有后端技术那更好了，如果是纯简单的话啊，就这么多好安装环境呢，我们就不安装， 因为之前都安装好了啊， no 的 gs 的环境和 vivo 点 gs 脚手架等工具即可。好，首先呢我们来看一下他到底是来做什么的， 他是一个前端的啊，优爱库，那我们就来个最简单的，比如说巴特，我们就是个按钮，你看有这么多好，这么多好看的按钮可以提供给你使用。然后呢，他还有布局啊，布局暂时看不出来，要我们真正做项目的时候才能慢慢看出来啊。好，然后我们再 啊日期选择器，哎，这边就是日期选择器，这个呢就是优爱库的哎，这个他的核心所在啊，各种各样方便的工具提供给你使用，我们再找一个啊 啊，通知啊，弹窗，我们点个弹窗，哎，一个弹窗，对吧？然后加载，哎，加载，哎，就这么个东西啊。好了，那这边呢，我就不一个一个去借条了，哎，因为我们都会学 到。好，然后呢我们来开始搭建我们的学习的环境，首先呢我们要创建一个项目，好，在这边我们已经创建了，我们写一个爱丽们， 嗯，这样一歪就可以了，我们点击创建。好，等他创建完毕啊，创建好之后呢，我在这里呢创建一下 vivo， 点 gs 的脚手架。好，怎么创建呢？ vivo pro 啊，艾特，然后呢写个格力啊，回车，那让他去安装啊， 稍微等一下，现在最新的版本是四点五点六啊，大家可以升级一下，因为我们讲这个呢，不需要升级啊，好，选择第三个，那我不需要这个啊，我只需要这个陆游就可以了，就陆游和上面第一个啊。然后呢，我们回车，回车的时候要不要这个？ 嗯，陆游的地址我们可以玩啊，然后呢选第二个，然后不要保存，嗯，就可以了，那么现在呢，就等他来安装，安装的过程呢，可能花一点时间，可能一分钟，我们稍微暂停一下， 好，我们已经安装完毕了啊，我把暂停又打开了，那在这一块呢，我们来，哎，把它缩放一点啊，把它往这拉一下，这边呢打开哎，这里我们已经把 vivo 点 gs 安装好了，然后我们先进入这个目录啊， nbm 二，先把它运行起来啊，看看他是否正常运行 好，启动一下我们的服务啊，稍微等一下啊，好，他正在哎，然后执行。 然后呢，我们顺利的打开了 home bot， 对吧？很简单啊，这个好，那么下面我们再来看，我们已经安装好脚手架。之后呢，我们要安 装 amtu i， 那在这里他是怎么做的呢？点主键啊，这里就会有第一个安装，这边有这，这边有个命令，我们直接把这个命令复制一下，然后新建一个啊，我们先进到这个目录下去，然后右击，右击，我们粘贴一下， 嗯，复制一份 ctrl v。 有了啊，回车。哎，稍微让他安装一下啊，稍微等一下啊，这个呢，我就不切不切了啊，就让他安装，因为这个呢很快 好，基本上 ok 了啊，九秒钟。装好了。之后呢，我们来在这边的配置文件，我们稍微来看一下啊，配置文件，哎，你们的 ui 啊，二点一点三就已经安装好了，安装好之后呢，我们要测试，第一节课呢，我们要测试他是否真的安装好呢， 那么首先我们再来看一下笔记，好在文档这块呢，写的非常多，然后点快速上手，还有一大堆问题啊，还有一大堆他的注意点，我们暂时先不考虑这么多，我们先把它运行起来，对吧？所以说笔记上我就啊，来个最简单的，把这两个引入进来啊， 把你们的 ui 引入进来，然后把他的 css 引入进来啊，然后意思一下就 ok 了。好，那我们来看一下，在面点 gs 这里，首先第一步，用破 好艾力 mantey pro， 好，这面写上艾力 mat， 哎，直接就有了。然后呢，引破，然后再写个什么呢？ 来写一个，哎哎，里面的 ui， 然后杠斜杠啊， l i b 斜杠他这个主题，然后下面一个引带个 css 啊，这样做就 ok 了啊，以后有再有别的 问题我们再做，先做这么多，然后呢？这个呢？红的对吧？啊，把它斜进去，哎，这边怎么回事？好，确定一下啊。 好，然后呢，这边一呃这个 vivo 点 eute， 然后写上 amtey 就搞定了。好，这边就不会有什么哪边没用到，对吧？好，我们关闭掉之后呢，我们再来看。嗯，首先我把这里的 vivo 后面这边打开，把这边呢，我们调成四啊，调成四，把这个呢就去掉，这个去掉的话就什么都没有了。那我现在来一个最简单的啊， 最明显的就是一个疤痕按钮，我们来一个疤痕，比如说成功就是撒个 case， 就这个按钮，那这个按钮我们点开这边的显示代码，他这里呢？哎，有这种写法，根据他的主键来 来写，我们来看怎么写呢？好， el 什么肉就可以了。但是他有没有代码提示呢？因为我们这个 id 编辑工具啊，他的代码提示比较怪异啊，我也是研究了一下，因为 我用 vs 扣的，用习惯了之后呢，再回到这边都有点不太适应了。好，那么他的代码提示是这样子的，先写个兼括号，一页摇，你看是不是就提示了回车，然后呢，你还要闭合一下，就这样子，是这样子的啊，那里面写个一页摇，然后八层，那这样不提示， 那这个呢，就习惯上可能就会有点障碍了啊，那对于这个呢，其实是比较简单的，所以说我个人就觉得无所谓了，就自己写吧，这样也挺好的，对吧，你也要巴特，哎，就自己写对不对？好，那么这边写个什么呢？叫做按钮，然后这边写个太太，写个什么呢？ 嗯，打个 case 啊，虽然不提示啊，但是都是简单的单词啊，无所谓了。好，我们在这里呢就已经看到了，是吧，哎，说明我们的 ui 成功加载了，那么从第二节课开始呢，我们就按照他的顺序一个一个讲过去啊，基本上这个顺序呢， 呃，就跟我们学习顺序差不多啊，没什么太大的问题啊，如果有问题的话，我会调整啊，就是这样子的，那么第一节课呢，我们就是把它安装和配置好，那这节课呢，我们就讲到这么多，最后感谢收看本次课程，谢谢大家，再见！
365有孚亨通
05:18查看AI文稿AI文稿各位同学大家好，欢迎大家参加十天技能课堂系列，我是主讲老师李彦辉。今天我们来看 element ui 第六节 butt 按钮。这节课呢，我们来看一下啊，之前一直用到的这个按钮，那 butt 按钮和上节课的那个文字呢？是一样的，有固定几个样式。首先我们来看一下， 那在这里呢，我们直接写一个 div 啊， butter 好写一个啊，写写换行，先换一行吧，这样子的话清晰一点啊。首先呢，我们先写几个他固定的样式啊，一也要 but， 那只要在这里呢，写上先写个按钮，那在这里呢，写个 type 啊，那第一个呢，就已经出来了，我们点一下，在巴特这里啊，第一个就已经出来了，我们后面呢再写几个啊，空一格， 哎，单脚 worry success 看一下啊，是不是都出来了，那这是第一种，我们来看一下。下面一个呢，我们还可以使用实现镂空效果，然后 disabled 呢，也可以使用禁用啊，这些都是很多属性都有的，我们就 都试一下啊，那在这里呢，我只要给他加上一个，哎，这个就是镂空效果。把前面这个呢复制一份啊，我全部加上去，先看一下这个效果如何，好，保存一下，我们来看一下，哎，这就是镂空效果，好了，可以这样子啊，这样子 好，那么下面一个呢是禁用，禁用的话，那很简单了， disabled， 哎，没什么好说的。这个啊，哎，那还有一个，再往下看，下面一个呢，实现椭圆和 实现圆，那椭圆的话还是比较可以加文字的，哎，这边就变椭圆了，如果你想实现圆的话，这边就最好不要用文字了，我们来看一下， 嗯，你用文字的话就不是很圆，这里呢就推荐是空，然后呢采用的是我们上前一节课学的这个叫做小图标啊， 比如说，哎，查找啊，或者 user 吧，这样子，这个图片好看一点啊，哎，就是这样子的，就变成真正的圆了，对吧？好，那么接着我们继续往下看， 下面一个呢，也可以使用 text 将 but 转换成纯文本按钮，那么这边再来一下这个棋，这个不用这个呢，改成 text 就可以了，试试看。哎，纯文本按钮，它是个按钮，但是看上去像个超链接，对吧？哎， 那下面一个呢，是使用这个 group， 可以将多个元素呢合成组合元素，比如说上一页，下一页，那么在这里呢，我们往下拉啊， 这个呢加图标的我就不说了啊，因为这个没什么好说的。这个按钮组，你看按钮组有什么特点啊，就是两个合在一起的时候是紧紧连在一起的，那中间这一块呢，是没有这个圆角的啊，两边是有的。那我们来看一下。 好， ear row。 好，我们就简单简单一点吧，就不写那么多了啊，要上一页，那么，哎，它外部呢，首先要 butter， 然后呢 group， 哎，然后呢复制一份粘贴一下，然后再来一个下页，这样就可以了啊，其他我就不写了啊，意思一下，你看是不是连接在一起了吧。 啊，我，我加个颜色吧，好，复制一份，哎，是吧，哎，一个道理啊，中间是连在一起的。好了，我们继续往下看。 嗯，下面一个实现加载过程，哎，这个加载的话我们就在在后面写就行了，复制一份， 复制一份就是加载中，然后呢他，他是改变哪一个呢？我们直接看这个啊，他是冒号 loading， 哎，在这里给他来一个冒号 loading 哎，串， 哎，它颜色会淡一点，这里我空一点吧，这里我还是分开来吧，免得这边连在一起不是很好看，对吧？ e l 肉好，加载中看一下，就这样子， ok， 那这样是不能点的，对吧？我们通过 gs 控制他啊。好，那最后一个呢？最后一个我们往下拉，最后一个呢？就有这三种形式啊，不同的尺寸， 大中小，我们就用个 mini 啊，最小的这个试一试啊，最小的这个。好了，我们这边再来一个，嗯，按钮， 然后呢？这边是一个，我们看一下啊，它是什么名称的？是一个 size， 对吧？一个属性，它不需要加冒号。这边要看啊， mini 好，看一下，这个按钮就变得非常的小。 ok， 那其他的这个笔记上已经没有了，那其他我们在这边再看一下，他这里提供了大量的参数，我们前面这些都用， 用过了，对吧？还有后面两个呢啊，用的不是很多啊，自己去看一下。那最后一个呢？ but some meet 和提交和重置啊，这没什么好说的了。好了，那这节课呢，我们就讲到这么多，最后呢，感谢收看本次课程，谢谢大家，再见！
40有孚亨通
04:56查看AI文稿AI文稿各位同学大家好，欢迎大家参加十天技能课堂系列。我是朱家老师李彦辉。今天我们来看艾莉们的 ui 的第十二节 swit 开关。那这个呢是一个嗯开关的主键啊，类似于 嗯复选框的单个复选框的啊，打开关闭啊这么一个功能。我们首先来看一下。嗯看一下手册，那在这边有一个基本的用法， 他在这里呢设置个绿色和红色啊，其实是已经设置了木耳呢应该是一个灰色啊和一个蓝色。我们都是来设置一下啊他绑定的这个纸呢啊呃比较常规的是一个布尔纸，我们来看。 好在这里呢我已经打开了啊已经配置好打开了啊，这边呢会有一些问题啊。那如果这个不出现的话关闭再来啊。我这个火狐量器最近就有这个毛病啊。好，那点 鸡这个死位吃的时候他告诉你这个名称有问题，那在这里呢我把这个名称改一下啊他冲突了啊好改一下在这里我再刷新一下啊就没有问题了。 ok， 好，那么下一步呢我就开始在这里来做 好我这边呢先要做两个啊我所以说我做一行。好在这里先来一个四位置 好在这边呢我需要现在这个状态的话就是一个空的，什么都没有对吧。好，那我在这边呢给他来一个呆的哈，你看。嗯这边来一个什么呢？ v 了默认是确然后呢给他来一个绑定一下没的这个 v 了就可以了。我们看 哎默认打开的关闭打开好刷新一下哎他就打开的如果把它改成 boss 哎他就是关闭状态啊，很容易理解，那么下面的话我要设置他的颜色的话，在这里设置好 啊，第一个呢是 xtv， 看了，就是打开的时候的状态的颜色，我们就变成绿色，一三 c 一六六啊，这样就可以了，就变成绿色了。绿色和灰色，灰色是默认的吗？那你如果想改变灰色的这个颜色的话，印啊， xt 看了，比如说 f f f 六六零零，好，保存一下，哎，就变成红色了，对吧？好，如果想在两边的加字体，就像这边， 哎，是这种的，这种的，那我就打个开关啊，就是打开和关闭， 那这里有个 cast， 这边就是打开 好关闭保存一下，嗯，我们看一下，这边是个印，好看一下，哎，打开关闭，打开关闭，哎，点他也是可以的。 ok， 那如果说我们想设置一下别的值，他除了不二值呢，也可以设置值在这里呢，他做了一个扩展啊，他结合了后面我们要学的啊，其实一个很简单的，但是我们这边就不用这个实验了啊，他是一个文字提示，拉过去就是零， 拉过来就是十，对吧？好，但是我们这边呢直接就用这个字，不串和竖直型的配合，这边是个微聊啊，然后呢再结合下面 的这个事件对象啊，我们来做一下就 ok 了啊，也比较简单啊，这个内容是比较少的。好，我把这个呢复制一份，但是呢这个歪料呢，这个呢我们就先关了， 而且这个不要啊，就留一个就行了啊，这边改成二，那这里呢加个逗号就改成一百，哎，这边改成二，然后呢他这边有个什么呢？ x 是什么呢？ 是他的歪料值，哎，选中就是一百，你没有被选中的话 就是零。那这个时候呢，我们是看不出来的，刷新一下啊。 哎，是看不出来的，对吧，那我这边呢，就要结合一下。什么呢？欠这个事件啊。嗯 嗯，什么名字呢？起一个叫做思维浅。好就可以了，加个逗号。 好，这里写个歪了， 输出好就 ok 了。好了，刷新一下啊， 哎，零看到了吗？哎，一百得到了是吧？哎，关闭就是零啊，打开就是一百， 这样就得到了。那么其他的呢，他的一些属性呢？方法呀，就自己看一看啊，无非就是这些东西啊，设置他的值啊，背景颜色呀，内幕啊啊这些的。 ok， 那么这节课呢，我们就讲到这么多，最后呢，感谢收看本次课程，谢谢大家。再见。
23有孚亨通
05:48查看AI文稿AI文稿各位同学大家好，欢迎大家参加十天技能课堂系列，我是主讲老师李延辉。今天我们来看 am 的 ui 第五节， icon 图标，另刻文字。这节课呢，我们来看基础组件的两个组件啊，因为内容呢啊，特别的少，所以说把它结合在一起啊。 好，首先呢看第一个就是图标系统， ui 呢，提供一套非常丰富的图标哎，基本上可以满足我们所有正常场景下的要求啊，除非你是怪异的，非正常的啊，可能要自己补充。一般来说呢啊，具体使用呢，采用这个 i 标签呢，直接插入就可以了， 也可以通过这个按钮呢和链接进行插入。好，我们来看一下，我点一下这里的 iphone 图标，那这里就有啊，然后显示代码，下面呢就是所有的这个图标啊，提供给你的非常多非常丰富啊，比如这雨伞，对吧，这个听音乐， 这个是剪头发啊，做头发。然后呢还有这个楼顶我们看看在哪，因为他是个动态的这个太阳，呃，楼顶 你看这边还是个动态的哎，非常的非常的多和方便啊，那这里我们来看一下还有什么呢？这个是好了，那就不带大家看了。好，首先呢第一个呢，我们先写这个 icnl， 写第一个叫做 i， 他就是一个 i， 没有 el， 这边注意了，而且是个 clus， clus 写的什么呢啊？比如说 el， icun 编辑 idat， 哎，这样子，直接插入一个点一下， 那这个为什么这么小？我在这里呢，我们来看一下手册，上面这个这么大，是，而且颜色还会很淡，那我该怎么调节他呢？他是不是背景呢？还是文 字呢？他其实你可以把它理解为文字。那这边怎么写呢？点上一个啊， elic， 然后呢 a 的括号怎么写呢？哎。默认是十四吗？我们就测试下是不是十四没有任何变化。那我现在写个三十那肯定变大了。 那字体颜色呢？我们用字体颜色来，而不是背景色。那换一个颜色哦。这个看不出来换一个啊， 这个颜色看一下。哎，是不是变了啊。通过调节自己的大小和颜色呢来更改这里插入的这个小图标哎图标呢可以理解为是文字。好了，那么 这个八的可不可以插入，哎。我们来看一下 pad。 好，就是。呃，叫做搜索，我们来看一下 是不是有啊。也有的也有的。我这边的写个什么呢？哎。他也可以用克拉斯那么一，我换一个吧。 呃，这边随便找一个吧。 apple 苹果看一下啊。不是他本来就搜索吗？那就搜索啊，设置好了我们看一下是吧。哎。你可以变变大吗？我也可以把它变大。来加个逗号， 这边加个点好试试看。这个颜色就不好看了是吧。嗯 再把它换过来吧。 好，就这么个意思啊。哎，这颜色， 但这没做，这边又看不见了啊。算了吧。啊就就这样啊，就这样。好了，那么下面我们再来看啊。这边呢就做完了，下面一个是宁可文字，我们点进去啊。 啊另一个文字，另一个文字呢啊除了基础用法呢，他还有禁用下划线和带图标，我们都试一下。这里呢有几种类型啊，基本上我们都会用的啊。所以说先来看一下基础用法，点击显示代码。这里呢基础的就不说了啊， 这里有这么几个，哎，我们之前说这个主体色呢，有这么几种，我们来看一下。加两个比亚啊，比亚比亚， 好，页摇，另看。好，链接。好，这里呢，可以补写这个传统的链接的地址，你可以 专门写样式的话，我就直接写个什么呢，哎，我就写个 rap， 哎，这个 pray， 然后呢？呃，这边我可以给他来一个。这个 好，第一个呢？写上撒个 case 啊。好，那么单脚，然后王蕊警告， 然后音符没了吧，就这么几个啊，好，去掉，保存一下。哎，就这么几种，鼠标放上去有下划线，如果不想有下划线的话，他提供了一个方法啊，按的耐，然后还有 boss 来看一下，哎，说方式没有下划线，那这个呢？嗯，我把它链接到百度上去。 好， app 百度点 com 保存一下。好，我点，点一下就点到百度上去了。啊，那现在呢？我是禁用他，那怎么做呢？第四， abod， 直接一个属性禁用就可以了，鼠标放上去就禁用了是吧？好，这几个呢，我们就都讲了， 哎，这几个就都讲了，最后呢，他也有可以有图标功能，那么第三个，这个图标警告，我们就一摇，呃，这个就变成白色了， 是吧，这个 我换个颜色吧， 好了，那么这个地方呢？我就，呃，这个不需要换颜色啊，我看一下啊，这个不需要换颜色，因为这边本身链接就有颜色，所以说我们试一下啊。好，他也是 ad 的，因为白色最快会隐藏了，对吧，然后 克拉斯写错了。啊，好，再来看一下啊，确实隐藏了，他的优先级更高，所以说我把这边呢要先去掉。 好，这样就可以了，看到了吗？ ok， 好了，那这样子的话就没有问题了啊。没有问题了。好，那么这节课呢，我们就讲到这么多，最后呢，感谢收看本次课程，谢谢大家，再见。
65有孚亨通
02:01查看AI文稿AI文稿通常情况下，我们在碰到这种由于 z ex 导致某些元素被遮挡的问题，我们直接提升他的 z e x 值就可以了，就像这样，这样是可以解决的，但是今天这个 bug 不能这样解决，为什么呢？大家看，我在放一个抽屉组件， 打开这个抽屉组件还是被遮挡住了，所以我们刚才只设置了那一个样式，是没法解决所有的问题。 那这种情况相当于这个项目里用的这个文本编辑器和饿了么 ui 的这些组件的 zex 发生了这种规划的问题。所以要想彻底解决这个问题， 我们只有两种方法，第一，我们去修改这个文本编辑器的 zenx， 第二，我们去修改饿了么 ui 的基础的 zenx 值。那这个小伙伴用的是这个网 爱迪特，我翻了一下文档，这里边是可以这样配置他的自行带丝的，我们来配一下，在这里加这么一句，我们来试一下，大家看，可以了，再把刚才的样式还原，把这个注掉 看看，这就没问题了。好，那第二种方法我们怎么去修改饿了么 ui 的基础 zex 值呢？把这个再注视掉 好，然后我们去饿了么意外的文档里找到这个全局配置里，他有一个柚子的时候， 加上一个参数，这里边可以设置组件默认的大小，还可以设置基础的 zenx 值，他默认是两千，所以刚才我们设置的五百是可以用的。那我们给他改成五个九， 慢点 js， 我们在右死饿了么 ui 的时候穿一个 z ex， 我们改成 五个九。好，我们再刷新一下，大概也是可以的，我再放一个抽屉也没有问题。
654程序员小山与Bug
11:12查看AI文稿AI文稿这个做完了之后啊，接下来的话我们就还做一件事情啊，大家看现在你写出来的这个项目啊，就是这个样式啊，很丑，明白吧？基本上没有样式可言啊， 一般来说的话，那我们在做开发的时候，那这些东西这样式怎么做呢？要不要自己去写呢？不要，好吧，好，那接下来的话我们再学另外一个小的字典，就拿一个呢，就是未有见识的这个未有见识的这个什么的育儿主见啊， 对吧？好，就在这个什么在使用框架做开发的时候啊，做开发的这个时候， 一般啊，我们是不需要啊，是不需要自己再去什么再去啊？写这种什么 cs 是代码进行什么进行页面的，这种什么构建啊？一般我们都是什么都是使用 使用第三方的啊，第三方这个团队开发好的，什么开发好的这种意外组建库，明白吧？开发者只需要按照什么按照文档啊，按照文档 去组织什么组织这些什么组织这些遇外组建进行什么进行自己项目的，什么自己项目的构建啊， 明白吧？好，那这育儿组件有很多啊，常见的育儿组件，那第一个就把你们的育儿，明白吧？那这个我之前给他说过的，这个是饿了吗盘的出来，明白吧？还有一个的话就是叫问的育儿，那这两个育儿的话业的非常有名，那饿了吗， 这个这个的话还是主要是做批次端的项目，明白吧？这个的话主要是做移动端的项目啊，好吧，好，那这 这个的话是有在公司出的啊，那我们就去用一下这种育儿组建库，那这种育儿组建库他跟我们有提供什么？提供很好的这种什么布局，要把界面，那我们怎么去用呢？好，接下来的话我们就去用一下啊，那我们在这边就去找到这个什么海里面的鱼饵啊，这个东西 好，找到了之后这个是的光网啊，那大家下去了之后可以看一下。好，那接下来的话呢？他教你的啊，他说了这个东西要怎么样去用，你就点到这里，但这个指南大家最好下去了之后一直把它读一下，就从头到尾把它读一遍，好不好 啊？点到这个主键，然后他教你了，他说应该怎么去安装，怎么去使用，我们点到这里一个地方有个东西叫快速上手，明白吧？快速上手了之后，他教你了之后在这个什么，就是在这个微有什么？微有 cla 里面，然后怎么去用，明白吧？好，那在这边呢，我们就在这个地方， 大家可以看得到啊。啊，首先的话，第一步啊，就是要安装，肯定要安装啊，安装了之后，在你的项目里面，首先第一步你需要去导入这个什么导入 idmy ui， 明白，导入了之后，然后你通过这句话去使用一下，然后还导入这个 cs， 明白吧？ 导入了之后，然后就可以用了，那我们就去用一下吧。好，第一步的话安装啊，那我们就把这安装一下吧。好，那找到我们自己的这个项目。 好，就这个项目啊。好，那点开，点开了之后，那我们要安装，安装的话点交流的第一步压 app， 然后再把这个 把你们的 ui， 这是一个主线库，就别人提供。好的，你只需要安装，安装好了之后接下来的话，他说快速上手里面，他教我们来着，点到快速上手啊，然后在这个地方你就干嘛呢？在你的梦点界市里面，然后引路。什么引路？这两个看到了吗？那就在下面，我就在这个梦点界 里面。好，首先啊，好找到这个闷点结实，闷点结实的话他说了在这个下面啊，那引路，明白吧？引路了一个什么安利的 ui， 引路了一个 cs， 这个的话，就是 这个里面他就给我们定义了很多育儿组件，这个是育儿组件的样式文件，明白吗？好，定义好了之后接下来的话呢？啊，还要执行这样一句话，明白吗？执行这样一句话，就是 这句话的底层啊，就这句话的底层，我告诉大家这句话的底层啊的底层的含义啊，就是什么？就是 把上面啊，把上面这个什么安利门的 u i， 这里面的这个组件啊，就是这里面 定义的这个组件，把它注册到这个什么固有的这个全局，明白吧？就这一行代码的底层啊，他大致走了一个罗街，就这样一个罗街，就说这行代码的这个这行代码的 底层的逻辑，他的逻辑啊，底层原码大致是这样啊，好，就写了个什么，写了个微友点 compon ent， 明白吧？好，到时的话我们用一些组件，这个安利门的图案里面他有很多的组件，他尼罗还有这种巴腾这种组件，明白吧？ 这边的话他有一个名称，然后在这边就是按你们的点这个内幕，就说这个组件有一个名称，然后有一个什么一个组件对象，明白。就是按你们的 ui， 他里面就跟我们把这东西设置好了的，他底层就像这样注册，注册好了之后，等一下，在我们的什么稍后，在我们的什么稍后啊， 在我们的这个什么在我们的代码里面就可以，什么就可以使用安利门的 ui， 你们的 ui 啊？提供的什么？提供的那些什么那些主见，明白。好，那按你们的 ui 提供了 哪一些组件啊？那我们在这边就去看一下，在这边点他的文档，明白吗？好，做好了之后，然后在这边有一个组件，组件好了之后再看他分成这个组件他分成了几类？第一类的话叫基础组件，看到了吗？叫掰四口，掰四口叫基本的，然后接下来的话有提供跟表单相关的，然后还有一个跟什么跟数据展示相关的， 然后还有一个的话是跟什么？跟那个消音体是相关的，然后最后的话还有些什么跟导航相关的，最后就是其他的，明白吗？好，就是他提供了这些的组件，那大家可以看到他的组件是有很好的一个分裂啊。好，那要说我们家说想直接上手拿来用一下，一般来说我们就先用一下他的这个八筒，明白吗？ 好，大家看这边的话就是他给我们写好了这个八筒，那这八筒如果要用怎么用呢？大家点一下，这个地方有显示代码，显示代码的时候大家可以看得到他这边就有这个什么，就有个一啊八筒， 明白，就这个东西我们直接给他复制一下，掌握在我们的代码里面就可以去用了。好吧？就他给我们已经写好了的，但是在这里面为什么能用这些东西啊？大家看其实就相当于他的底层肯定会写出类似这样一句话，明白吗？就在这里面这个一二内蒙，他就会相当于把这个八藤，干嘛？ 就是把这个八筒，是不是在这边就去写注册这样一个八筒，有吗？注册好了之后，然后在这里面有一个八筒的一个组件对象，在组件对象里面他是不是要定义是个什么 t 一 t 一 m pl t 恤 他们那的，他们的定义好了之后，然后在这边他是要定义什么？定代码，其实五月份就是定义了一些什么，定义了一些这巴腾，因为他的底层肯定还是走的什么，走的我们原始的那一套吗？那这里面是放了一个巴腾在巴腾里面这个地方是不是要放一个什么？放一个插槽，明白吗？到时候调动者的话是不是根 根据这个调动者，你看调动者在这里面不是传了一些东西了吗？到时候这个东西是不是就放在这里呢？懂我意思了吧？好，那这个呢就是他底层的原理， 这个原理了之后，接下来的话我们就把这张代码，把这些代码全部复制一下，复制下来之后去我们的项目里面用，那么项目里面哪哪里都可以用呢？那我们找到我们的页面吧，那我们在这边再去找一个页面啊？好，找到这个什么，找到我们的这个主页吧，主页里面其实这里面的代码我们这些东西都用不上啊，那我就把这些东西都干掉吧， 看到了之后我们去主页里面就去引流这些东西，对吧？好，这个主页我们也用不上了啊。 啊，这样做好了之后，大家看现在在这里面我们就可以干嘛呢？就去主页里面就有这些按钮了啊，好，接下来的话，那我们在这边再去好那个项目的话，我再重新跑一下啊，都会后续的。 王八号八零八零啊，回车下啊，大家看现在我的页面上就有这些按钮了，你看你现在啥没干啊？你这按钮就出来了，别人就给你写好了，这 这个是挺方便的一些东西吧？就是你用他的这些什么育儿组间库就可以做好的。好吧？好，但育儿组间库除了这种基本的这个按钮，他还给我们提供了很多有用的东西，明白吧？假如说你要用到这一些 比较稍微比较啊好点的东西吧，那像哪一个我们用的比较多啊？像这个日日历啊，日历啊，日历的话应该是在这个里面叫这个， 这里，对，就这个啊，大家说我想用这样的一个效果，我就说在我的项目里面，我家说要放这个什么放这个日期选择就是类似这样的一个效果。那很多项目里面都有这样的东西吗？那你说你要用的话怎么办呢？大家看 你点开，点开了之后，然后别人教你的，大家是看在这边的话是不是有一个叫医药，是吗？这个你看看这样对吗？医药堆的皮革，然后这里面是不是有这样一个东西，你把这东西干嘛？把它复制一下，复制一下了之后是不是放到我们项目里面去好复制，复制的好了之后再看啊？ 他这个东西的话你要给他传点水线，第一个是蜗牛摸到明白，第二个是对的，然后这个提示服，那这个东西到底放什么呢？就是这个微摸到到底这里放什么东西？你就在这里面，你去看明白，你就点到这个蜗牛一吗？然后在这边你去看一下他的这个蜗牛一，然后在这个地方， 好，外面也是个空串，明白吧？那么你，你就在这里面，你就在这个地方，你是不是要写个对头？对头写好了之后，然后的话在这个地方，然后就蕊成一个。什么？蕊成一个对象，这个对象里面的歪柳是不是一个空字？是不是做好，然后做好了之后这里加个逗号啊？啊？来看，你就只需要写上这样一行代码，那这个功能 就出来了，你自己都不用干什么事情啊？大家看在这边点一下，你看这功能就做好了，这个歪理枝的话，应该就是我们获取到的这个日期，明白吧？就是我们的这个日期，我在这边可以通过我的调试代码，然后这边不是有一个微友吗？然后在这边你看我调试的时候， 好，大家看在这边，我点到这个地方，点了之后，这个的话不是有一个什么，我在这边就去看一下他的这个什么 他的这个信息啊，你看在这边他就会跟我们生成这很多的这些东西，你就根据你自己的调试方式，自己在这里面去找你要的数据信息吧。好吧， 好，我们来 abb 组件啊， abb 组件里面，然后在这里面当前的这个激活的啊，然后在这里面我们去找到这个地方，大家看在这里面啊，好， 这东西你看这个歪掉啊，我们找一下我们的歪六一啊，应该是有的啊，好，就那个歪六一就是我们的那个时间信息在这边 去调吧。好，那这个呢就是我们的这个 ui 组件裤啊，你就通过这种方式就可以去用了好不好？好，在这里面有一个用的比较多的啊，就这一个，大家看点到这个组件里面啊，这里面有这个 有个东西叫莱奥特布局，明白吗？这个布局的话就是我们去做开发的时候，我们要做这种什么布局的效果，你看做这种布局其实就是三个布局系统吗？你在这边就去找，找了之后啊，他好像有些常见的一些布局，他给我们写好了的。大家看 在我们项目里面啊，做后台，如果是做后台的话，像这种布局是很常见的，就是左边一个导航条，右边的话一个选择，大家看这样做好，然后的话这个来啊，那就只提供了这这几种基础版的啊，还提供了这种版，好吧，那你就可以拿来去用了，这呢就是我们所说的 育儿组件裤，大家知道怎么用就行了啊。好，用法很简单，第一步你安装，第二步的话你就使用这三行代码，然后最后的话就是找什么找里面的那些组件效果，然后再把复制粘贴放到这里就行了，好吧， 好，我们先把这个 ui 主型库啊，按你们的 ui 就给他讲这么多，后面我们做项目的时候就要用到这个，大家可以先去用一下啊。
6虎哥。
09:46查看AI文稿AI文稿各位同学大家好，这里是由 it 引点 come on 为大家提供的 v u e 基础加 v u e 无人点单无人收银系统项目实战视频教程。我是主角老师大帝 这一讲的话，我们主要给大家讲解一下这个艾力蒙特 ui 的一个使用啊，那首先在使用之前的话，我们给大家总结一下这个的用法啊，或者大家可以点击一下这个组件，点击这个 安装，或者点击快速上手，看他怎么用啊。那我们给大家先过一下，你看啊，官方的话，这里边说你首先安装安装，就这样安装，安装完之后，他这边啊这样的引入方式是没有下文了，对吧？那这边还快速上手， 快速下手的话，他意思你从这个慢一点 gs 引入，那就是这引入爱丽摩的有爱引入他，他说前提你肯定要 cnpm excel 是不是安装 cnpmestore 要安装啊，安装完成以后 入艾力蒙特 ui， 引入他的 cs 四，然后接下来，哎，唯有一点，柚子这个艾力蒙特 ui， 那这样他的意思是不是就可以用了啊？但这里边用不了啊，你看啊，他一种方式完全引入，一种是按需引入，那我们一个一个给大家看啊，我在这里给大家写一下 这个艾力目的 ui 的话，它主要是我们这个 ue 的一个 pc 端的一个意外框架，那要用它的话，首先找到官网，官网在哪呢？官网，呃，就是在我们这个艾力目的 ui 在这啊，那我就把它复制过来， 首先找到官网，然后上边是 mityy， 把它去掉，找到以后，然后接下来我们要用这个爱丽模特 ui 首先安装，所以我首先也 也是安装一下啊，把它结束，然后这里边我们用一个 c n p m excel， 这个 amty gis 啊，表示一个 grc 五，对吧？安装安装完毕以后，接下来在我们对的一个，呃 呃，慢一点 gs 啊，慢一点 gs， 引入这个爱丽摩托 ui 引入这个 cs 四，然后唯有一点柚子，对吧？然后再接下来看官方文档直接使用，那其实你看官方文档直接使用不行的，对吧？这里边还需要配置一个叫非要捞的啊，我们一会给大家用一下就知道了 啊，因为他这边犹如这个 cs 里边有字体，所以这里边还要配置第四步配置一个叫飞扬老豆啊，这个在他以前的文档里边有，但是在最新的文档里边没有了。配置完成以后，那接下来才可以使用啊，这里这一步一定要注意啊， 那接下来的话我们给大家来一下啊，首先第一步安装，那这边安装成功了，安装成功后，我先预习一下啊，预习的时候，然后我把这两句话，也就是官话文，这三句话，这几句话啊，这三句话，那就复制过来啊，复制到哪呢？复制到我们对的一个卖点 gs， 也就是稍等啊，我找到卖点 gs 在这， 阿里蒙特 el， 阿里蒙特 el e m e nt， 然后 ui 的使用啊，我们在这放到这，放在这把这个 app 去掉啊，因为上边是不是已经引入了， 那这样的话应该就 ok 了，按照我们以前的，呃， mity 是不是直接安装，安装完成以后引入是不是就可以运行了？但在这里边你看我运行以后，我再重新来一下啊，免得有些同学说，你这写错了，对吧？你看，我在这一运行，他直接给我报错了，对吧？你看，哎，没报错吗？啊？刷新一下，重新来， ok， 他是爆错的，你看啊，他告诉我什么呢？告诉我，呃，猫九什么爱丽摩托 ui 什么什么这个东西，什么字体这么个东西啊？ passfeel 的，对吧？意思就是这个 vipopic， 他解析不了我们这个字体文件。 这个字体文件是在哪里来的呢？其实就是我们安装这个艾力模特 ui 的时候，他 css 里边引入字体了，所以这里边报错了啊，报错了，那报错了，这个时候要怎么弄呢？那这时我们就要需要配置这个 vippad 电 convigs， 也就是配置这个文件啊，配这个文件， 那这个怎么配置？你看啊，这个大家如果学过 wifi 的，那就理解起来容易了，如果没学过，那我们就给大家快速拿一下啊，就是我们 wifi 的话，他是一个模块化打包管理工具啊，那这边我们可以给大家搜一下啊，你看一下，搜一下 wificow ipad， 他就是一个模块化打包管理工具啊。啊，就这么张图，就是个模块化打包管理工具。这个 wifi 可以干啥呢？可以把我们啊，可以把我们模块之间的相互依赖转化成浏览器能解析的 gs， 比如说我们这里边这个点为优异文件浏览， 默认没法解析啊，然后这个 es 六的语法浏览器没没法解析，那这时候的话，这里边借助了一个叫 vipid 这样的工具，他可以把我们这个啊，浏览器没法解析的这些模块打包成浏览器能解析的 gs， 对吧？这就是 vip， 但是这里边啊，他预习时候他执行打包，执行打包的时候他解析不了这个点 ttf 这样的文件，那这个点 ttf 是什么文件呢？他是一个字体文件，所以接下来我们就要配置这个 wifi， 然后他可以啊解析我们这个啊字体文件，那 怎么配置呢？那这里边你看啊，官方文档，官方文档以前一点差的版本啊，我们找到一点一点四的版本，里边，其实他这边有写，你看啊，这里边告诉你拍给这点 gs 是什么样的，然后这里边 vivo 派克可菲格点 gs 是是什么样的，所以接下来你要配置的话，你就把这句话拿过来， 这句话拿过来啊，放到你的 vipad 和维根这 gs， 但如果这个非要捞的这个模块没有安装，你还要安装，那我们看一下我们这里边有没有安装啊？找到这个拍 kitty gs， 看一下这里边有没有一个非要捞的。如果没有这个非要捞的，你需要 cnp m 引丝带，非要了的杠杠是有啊， 高二四五高低微或高二四五都行，高二低微就写入到这个依赖了，高二高四五就写入到他了，就这么个意思啊， 就这里边放的工具，这里边放的模块啊，都表示模块需要安装啊，当然这里边已经安装了，已经安装的时候我们就直接配置怎么配置，你就把这句话看到了吗？把它复制过来仔细看啊，仔细看， 复制到哪？复制到我们这里边啊？就是这里边你和他对应起来，你看他这边有什么以 cs 结尾的，是不是用这么个？以 scs 是结尾的， 就这么个老短，对吧？那接下来我们这啊下边有个以字，有这个图片结尾的，是不是用非要老短？然后接下来你再配置一个逗号，逗号隔开，然后这里边以这么多字体结束的，我也是非要老短，把它配置一下，那 配置完成以后要注意改变， vivo 派克可维格需要重新运行，那重新运行一下，那这时候我们看再报不错，在这时候有没有报错啊？重新运行，看一下有没有报错，也就是我们这里边给大家写的啊，要配置 flloday， 如果忘记怎么配，就把这个拿过来啊。啊，这是在 vivo 派克可菲格的配置， 如果已经配置，你就别配置了啊，要注意啊，配置非要老整。 ok， 那稍等一下，我们看看有没有报错啊。那这种没报错的吧。是没有报错，没有报错的话，那接下来我们就可以用了，用的话怎么用呢？那这就找到我们这个爱丽莫特优爱，比如说我们用的， 首首先拿一个最简单的八藤，看能不能实现，对吧？那这边有好多八藤，那之后你就点击这个箭头，然后按钮就出来了，然后这里边比如有这么多，然后点箭头，是不是这里边就出来了？出来以后复制过来， 复制过来放到我们对应的项目里边，比如说我们要在首页用，那你就发到首页，然后保存一下，发到首页。 ok， 那这时候我们预习一下，看一下效果啊，那只手我们在哪呢？在这刷新一下，你发现是不是就用起来了，对吧？用起来了啊，但这里边还有其他的一些功能也是一样的啊，比如说你接下来要用一个，呃，图片，那就图标点一下，要用谁呢？比如说要用这个，这个这个图片，对吧？这个这个 这个图片，对吧？那就啊他没法点吗？正常情况应该一点复制一下，是不是更好一些？那没法用，我们看怎么用啊？那这里边他的意思是这里边 icon， 对吧？ xlax 等于一个东西，那我们接下来就用，你看啊，就在这来个表 啊。第二，然后这时候这样用一下，对吧？这样用一下，然，然后这里边稍等一下。呃这里边呢？呃，那我们看一下。呃，把它改成水，那改成这个图片，那我就稍等，把这个复制一下，把这个 克拉斯复制一下。那这时我们看一下有没有出来啊？来运行一下。在这看到了吗？这边这个图是不是出来了？出来以后你想改变他大小，那就是这写个对，要等于一个，呃，等于一个 波特杠 s ig， 待会我们看能不能写啊？如果不能写我们一会再看，比如等于四十 px 这 vo e 里边这样写啊，我们看行不行啊？可以的，没问题啊，就改变他大小就行，或者给他加克拉斯，然后下边改，对吧？这就是我们这个阿里姆斯 ui 的使用啊，包括这里边还有一些什么呢？啊？日期的，对吧？日期 对吧？啊？还有这样的一个啊？这叫时间，对吧？时间，包括还有一些，呃，日期选项，对吧？日期那，那这样一个日期，对吧？这样一个日期，对吧？那用的话也是一样的，直接拿过来啊，然后 这里边有完整的戴帽，你可以把这个戴帽直接复制过来，封装这个组件，然后直接用，对吧？啊？看不懂的时候也是慢慢去琢磨，有些东西还是比较复杂，对吧？慢慢琢磨，包括还有什么，呃， 平分组件了，对吧？平分组件，对吧？这些东西啊，你要用的话直接把它拿过来，拿过来以后，比如说你看直接把这个啊，把这个拿过来往这一放，对吧？ 然后这里边你要看怎么弄数据，对吧？等于歪六一，那歪六一等于谁呢？歪六一等于空，那我们这边等于空，这里边是不是双向数据绑定啊？然后接下来把这个歪六一往这一放，这就是个平分组结，就用，用起来了，对吧？就这样用啊，然后用到哪个用哪个，对吧？对对，是不是就实现了 啊？这就是我们这个艾力蒙特 ui 的一个使用啊。到这里边使用完成以后呢，下一节的话我们再给大家看一下啊，这里边就照文档慢慢去用啊，再看一下就是单独啊，单独引入，怎么单独引入我们这里边的组件啊？啊？这里边是因为他给我们写了稍等，我们再还原到。呃，这个稍等啊，这边是一点差的版本，我们再还原到 这个二点叉的一个啊，这组件二点叉里边，这里边快速上手，快速上手，我们刚才给大家是完整引入，然后这边还有个按需引入啊，那接下来的话我们看一下按需引入如何引入？那这一讲我们就先讲到这啊。
27IT营
00:14查看AI文稿AI文稿怎样添加一个对话框？点击 lm 退框架，点击对话框模板即可插入对话框，这样我们的对话框自动就插入进来了。关注我，学习更多前端知识！
4编程讲堂
04:00查看AI文稿AI文稿大家好，今天我们来分装一个组件，就是这个职工详情的组件，那么其实很多地方用到这个职工详情，比如说我们在职工的调转记录里边 先看职工详情，再或者我们在首页里边下个月计划成也也想看用户详情，那我们不可能在每一个用到的地方都写一遍这个弹框的组架， 所以呢我们完全可以把它封装成一个组件，然后在其他用到的地方去吊用就好了。我们今天就来看看到底如何把已经做好的功能封装成一个组件。那首先呢，我们需要把需要提取的组件的代码提取成一个单独的微有异文件。好，我们来看一下， 我们找到这个页面，页面叫对付的没有意义。好，就是这部分，这部分呢是他的 brt 报的抽屉组件来实现的，我们先把这部分代码拷贝出来，单独新建文件， 那我们放在专门有个 compendence 放在这里面，我们再给他单独建一个目录，专门存放职工的相关组件。然后呢我们再来新建个文件，专门存放这个组件，你叫 stayf 抵抗，然后把刚才复制的这个代码放到 tampay 的里面， 然后呢我们再写一个 squeep 的标签，里边存放一些脚本，再写一个 style 备用。好， squeep 里边我们来写下物价，比如说 sport default， 然后里边写上基本的主驾的名字，比如这个主驾就叫 stayf， 然后呢我们来写上 data， 这里边直接 race， 待会备用就可以了，然后再写慢色， 好，慢色子也放点先备用，然后我们再来检查一下这里边 这个抽屉组件用到的一些属性，比如说这个是否显示这个抽屉组件，然后我们把它拿到下边来，我把它分成两块屏幕 离开，要瘦，我们拿过来，不需要这么这么一个属相，默认是不显示的。然后我们再往下还需要一个这个，这是职工的一个对象， 然后再往下用到的这些方法，我们需要一会处理一下。嗯，那这里面还有一个，这个 还是在这地摊里边，像这种房卖的，他也是从字典表里把竖直转换成文字，所以这些呢，如果我们想让这个组件 足够的模块化，我们有两种做法，可以把这些字典数据查询到这个组件上，然后呢在这个组件展示的时候做一个转移。但是呢这种方法不是特别好，因为有可能这一个页面会频繁的打开职工详情，频繁的关上职工详情，这时候我们需要频繁的去加载这些字典数据，所以不是很理想。所以呢我打算后面我们 把这个数据库查询的地方改一下，直接查出来这些字典数据关联到这些字典表。那这样的话呢，我们就避免了在详情弹框组线里面去频繁去加载所有的字典数据。好，我们先把这些字典数据去掉，先让他能正常跑起来。 好了，一会我们在后台查询的时候， 直接把这些文字的数据查出来，就不用在前台做字典对照了。那接下来的剩下的这些方法我们需要迁移过来，我再来迁移一遍。 好嘞，我把这些方法都已经牵引过来了，接下来呢我们来写一个显示方法， 方法名叫瘦，传一个 id， 然后呢？这里边我们后边要去调接口来去请求这个职工的信息，暂时我们先不掉，我们先把这个弹框显示出来， nice 点比他要瘦，等于出。
478程序员小山与Bug
03:17查看AI文稿AI文稿我们来看这样一个问题啊，我们这个列左右有空白，我希望这个宽度呢根据按钮数量来自动进行适应， 我们这个表格呢是通过这一行主件进行渲染的，这个主件是咱们自己写的，包括这个项目现在正在更新，每天晚上八点，欢迎大家来到直播间，这个按钮呢是通过这个 propos 来传递的， 那当我们把这按钮增加的时候，这个按钮的话呢数量就会跟着增加。现在呢我们来修复这个问题，就是当我按钮数量少的时候，我希望它的宽度呢也是不要左右留白。好，现在呢我们回到这个表格主间的内部，在这个裂的话呢就是控制我们这个按钮的， 我们可以给他加那个 raff 来突破他。好，然后呢我们在这块来声明一下，获取到这个 raff， 我们来查得到一下这个按钮的原， 我们这时候呢刷浏览器我们这块我们看可以得到他，是吧？然后呢我们接着想查找里边的这个按钮， 好，现在我们通过这段质量的查找按钮，这时候呢我们来刷新，我们会发现我们这个按钮列表是没有的，那么现在我把尝试把这个 rap 呢加到这个按钮主上，好，这时候呢会报其他的错误， 我们看到他连这个元素都得不到，是吧？这个是为什么呢？因为这个数据啊，这个表格的渲染他是个一步请求，我们在上面呢发了一一个一步的请求， 所以此时的话呢这个按钮主并没有被渲染出来，那么我们把这生命周期函数给他改掉，改成更新的时候，我获取完数据，更新这个主驾的时候来获取，这个时候呢我们刷新我们就得到这个按钮主看到了 吗？那现在就简单了，我们就可以获取到每个按钮的呃样式的宽度就行了。好，现在呢，我们把这里边的按钮都给循环一下，然后使用这丢车来把它进行一个计算，这些函数你不知道可以看一下我录制的 gs 的视频， 我们再来打一下这个宽度，我们就得到了这个一百二，看到了吧，那实际上我们希望他左右有留空白，所以呢，我们希望这个宽度呢再增加个三十或者怎么样？那我们要定一个小按数据，就是我们这个按钮主的宽度， 然后呢我们把这数值呢复制给他之后的话呢，我们把这个宽度再定义给我们这个单元格啊，定义给我们这列，别忘了用计算好，这时候的话呢，我们刷新我们会发现他 就会自动适应了，那当我们这个按钮增加的时候呢，他也会自动适应。看到了吧，不过最简单的方式呢，我们可以这块定一个什么按钮的宽度， 我们在这块呢定一个 pro 的按钮的宽度啊，然后呢我们这块呢也不用这么计算，我这块的话呢就可以传递按钮的宽度，当然是 props 的按钮的宽度啊，那如果你设置宽度我就用宽度，否则的话呢，我就用这个计算之后的这个宽度。好，现在我们回到这个主角当中，那在这一块的话呢，比如说我现在定一个按钮宽度，让他是一百或者说呃五百， 那这时候他的宽度就是增加了，是吧？那如果我不定义的时候呢？这个呢？就是适应，所以现在有两种选项都可以来控制他。
291后盾人
13:30查看AI文稿AI文稿ok， 下一步的话我们来实现一下这个表格的一个分页器的效果啊，我们找到这个样式啊， 样式里边呢有一个叫 pj a nation 的分页啊，我们就找一个这个功能最全的这个一个完整功能的， 然后我们复制一下这块的代码 啊，放到这个表格的下边。 ok， 这块 spa 不要，然后我们给他改一个类名，就叫这个推爆 的 pj nation 啊，然后我们也去给他定一下这个样式，我们先看一下这个样式啊，是在这个下方的位置，那我们把它调到这个右下方吧，右下方的一个位置啊， 这样呢，我们就找到我们的这个共同的样式，然后给他加一下，还是 let table 香的，然后我们可以给他来一个 u 浮动 距顶部的高度呢， 给个十二 px。 好，我们看一下效果。 ok， 然后这个分页呢就到了这个右下方的位置 啊，现在的话我们就针对这个配置，配置微审上啊这几个属性给他添加一下啊，其中有两个这个方法， 然后我们先给他拷贝进来，然后大家这里有两个方法，然后我们也放到这个 message 中， 一个是在这个叶这个塞子发生变化的时候，一个是当前叶发生变化的时候，然后我们可以看一下他这个打印的结果， 那我们打开这个控制台看一下 ctrl 啊，这里有一些报错，我们先 给他加一下，因为这里有几个属性的没有被定义啊，这个看人的配置呢，我们就叫看人的配置，然后我们定一下这个 这个属性啊，想默认给一个空置啊，当天下的话，我们可以默认给个一， 然后呢有个配置赛的属性，这个配置赛的呢，我们可以看一下啊，就是一个这个下拉的选选项啊，可以是一百、二、两百、三百、四百，这个是可以自定义的啊，那我们不需要这么大，那我们可以从十 二十、三十四十啊，三十吧，就三个就可以了，然后默认的陪着下一个呢，我们给个二十啊，总 数呢？总数这个地方我们也要给一个啊，这个地方我们需要通过这个接口，我们需要把接口返回那个头套呢给复制过来啊，现在我们先一会，一会我们把这个纸给复进去啊，我们看一下这个效果， ok， 然后这个下拉呢，就是我们刚才改，改成了这个十二十三十啊，这个总条数呢，就是由这个头条来控制的啊，我们一会把这个接口返回的总数给复复制过来。 ok， 然后呢这个每一块的这个属性呢啊，一共这个总数，然后一个切换这个每页的数数量，然后这个跳页啊，包括这个输入跳页啊，都是有 从这里边的这个雷奥特来决定的。比如说我们把这个头套给删掉啊，保存一下啊，前面这个头套呢就没有了啊，同样的我们把这个塞子去掉呢， 然后这个塞子就这个钥匙就没有了啊，这个根据需要可以进行的适当的增加或者删除啊，然后这个呢是个 翻页啊，是向前一页啊，向后一页，这是个跳页，然后这个是呢这个中间点的这个啊，点击跳页这个啊， 然后我们可以看一下这个跳页的时候呢，他一个输出，我们选第二页，他会输出当前页为二啊，点第四页当前页为 于四，然后我们可以也可以在这输入，比如说输入六啊，当我们点到这个输入框外边的时候，就失去交警的时候呢，他会触发这个跳转时间，然后现在失去交警之后呢，他会跳到这个第六页啊， 然后另外一个呢，是这切换这个每页的这个展示条数，比如说我们切换十啊，他会显示每页十条啊，三十，每页三十条啊，然后我们就可以通过这个呢， 通过这个分页器啊，现在给我们返回的这个当前所处的页和当前所处的所选择这个条数啊，可以去 对应的请求这个后台的指定的数据啊， ok， 我们先把这个头套给他加一下，给一个变量，比如叫头套 cons 啊，然后我们也要给他定一下 头条看看呢，我默认呢给个零啊，一个 car 的配置，然后另外呢还有一个配置 size 啊，这个配置 size 呢，其实也可以，就是也需要得定义出来啊， 因为他也是需要变化的，我们默认是给个二十啊，完了，配置 size 呢，给他复制给过来之后呢，我们再 跳跃的时候啊，就是我们在这每页三十条啊，这就是我们的那个配置撒一次，就是发生变化的时候呢，我们需要把这个这个值呢对应的复制给这个配置撒一次。那也就说呢，我们在这个 size 发生变化的时候呢， 给这个配置 size 收一下值， ok， 另外呢就是这个当前页当前页的这个跳转呢，我们需要给这个卡润特配置啊，这个属性给他做一个复制， 就是当前页发生变化的时候呢，我们给他重新复一下制啊，这样呢就会保持跟这个数据 表格呢啊处于一个同步的状态啊。 然后呢我们再我们看一下这个，先看一下这个效果啊，然后这个头套是零啊，因为是我们这个取取得来的数据，我们看一下， 对，我们这里呢这个 dat 中呢返回了这个吐槽 count， 我要把这个吐槽 count 呢复制给我们这里定义的这个吐槽 count 等于， ok， 我们刷新看一下啊，现在就是总共有七条数据啊，就可以展示出来了。 然后呢另外呢我们把这个切换的时候呢，让他去重新去请求一下我们的数据啊， 我们先看一下这个网络请求啊，比如说我切换二十啊，这现在是没有请求数据的，我们就说正常的话，在这个切换这个条数的时候，或者是切换分页的时候呢，要进行重新的这个数据查询。 ok， 那我们在这个 size 发生变化的时候呢，我们可以钓鱼下这个楼的，对的啊，同样的我们在这个当前线发生变化的时候呢，也可以钓鱼下楼的，对的， 然后我们再看一下这个请求，比如说我们选十， ok， 我们看一下这个参数 offset 零，雷美特二十，那这个地方呢就会有问题，因为我们这个地方呢只是需要去请求十巧，但是我们这里呢雷美特是二十啊，然后我们就可以需要改一下， 改一下什么呢？就是在这个我们 low the data 的时候，调用这个 low the data 方法的时候呢，把这个固定的，把这个直呢给他重新计算一下啊，我们雷米特呢啊，就使用我们这个配置 size 啊， 我们指定每页有多少条，我们就让里面它等于多少。那这个 offsat 呢？就是我们要从第几条开始查呢？这个呢我们需要计算一下，那就是当前页 减一，然后乘上一个，这是 size， 然后这样呢，我们再看一下这个， 这样呢，我们再看一下这个请求参数，比如说我们选十啊，请求的是零到十啊，我们如果选二十是零到二十，然后呢这个这个总页数呢？我修给一个 小的，然后我们可以看一下这个有多个分，多个多条分页的情况啊，比如说我们给一个， 给个两条啊，一样的数据是两条，然后我们的配 塞子呢也给成改成这个两条，那也就说是一页呢，我们只显示两条数据，那这样呢，他这个分页上就会自动的去计算啊，根据这个总条数和每页的这个条数啊，自动会计算去除他会有几个分页， 然后我们可以点一下第二页。 ok， 我们看一下这个参数啊，是从第二，相当是第三条数据， 请求两条，也就说请求了第三条和第四条数据，那我们点第四啊，因为只有七条吗？然后第四页的话就只有一条数据啊， 那我们可以看一下 off 赛特六，雷梅特是二，比如说呢，他是从第七条数据啊，去搜两条，但是数据库呢，只有一条，所以说他只返回这个一条数据啊， 同样的我们可以看一下这个，我们输入二，我们失去焦点。 ok， 看一下，依然是这个当前这个第二页的数据啊， 然后我们可以点击切换一下这个十条啊，十条的时候呢，他会这个重新去计算这个分页啊，然后同样的这个参数呢也会发生变化啊，从第零条到第十条啊， 然后呢我们这里呢需要做一个判断，就是呢在切换配置赛的时候呢，我们可以让他从 第一条数据开叉，也就是让他重新定位到这个第一页表根第一页。 ok， 我们可以给他在这个落地塔中呢长一个直， 正常了，我们可以默认不传，那配置 size 的时候呢，我们可以给他传一个一，那我们在 low the det 的时候呢，就需要判断一下， 用太炮来接受一下，如果太炮等于一，那我们就让这个当前这个页呢等于一，也就相当于让他来从第一页开始重新查询数据啊。 ok， 后边的话，嗯，后边的话呢，我们再说这个啊，一种删除的情况啊，删除之后呢，这个分页会啊该如何去处理啊？一个小的一个 注意事项啊，然后现在的话，这个表格的这个分页功能呢就已经完成了。好了，这节课就到这到这里。
84前端杨wh
