099-尚硅谷-尚品汇-支付页面中使用ElementUI以及按需引入

好，各位同学，咱接着去，咱接下来要做的一件是什么？是不是一点击它弹出一个遮照。那当然，你自己能不能写一个是完全可以。因为你就写个组件嘛。而且你这张图在最上方，它的Z是不是应该是很大。对不对。老师提到一个东西叫Z杠，In，有点感觉。对不啊完它就显示于隐藏，那就不用围缸，受围缸衣服进行控制。啊，这个当然咱们这里面要用到了，因为咱们后台项目要了，就是咱今年先涨。用。还记不记得这玩意儿？他有没有点感觉呀。还有呢，好，那咱看看啊。来老师呢，去一下饿了么UI的一个官网啊，看能不能跳过去，来搜一下element UI。是第一个。

走啊，先让他转圈。那首先说在咱们的项目当中有饿了么UI。有没有？就是我想3.2 3.2这是在干啥，是获取啥呀，获取支付啥信息。接下来咱们要说一下咱已经学过的us归谁？就是已经学习过的组件库。咱先说，谁先说？所的时候，咱学谁and d？对不，那你要注意它在和view当中都可以。OK吗？而且安地是属于哪端的UI组件？PC端？什么叫PC端非移动端？是，是安B。还有印象吗？你得有啊，你搜and d，但你要注意and d它是有react版本和view版本。

咱们先看你看这安。看这。这是伺候谁的。react。你再搜and第。有没有？有，但你要注意都是哪端的PC端，所以这要它是PC端，当然也有端的。这有有。OK吗？但你要说是PC，还学了一个东西叫杠。And andd-antd-Mo，这是哪端呢？移动端。当然移动端你都可以。那你知道咱接下来是不是又学了一个叫element的UI？你说这玩意儿谁常用？VE。耐端的。嗯。

谁教你的？举哥过来，他诈尸。是PC端的，当然啊，在当然我不知道你们这个有没有学过。它也是一个小组监控。它也是VE的移动端。你你就记住一件事啊，是安的。工业。有点多呀，V应该是V。对不？哪段？移动端啊，这真的是，你放心，你只要会一个。全图。大家要知道UE当中移动端有没有组件库标叫VT。OK吧，那你也知道咱现在用的了，是不是PC端。对不，那咱有效光荣。有啊，没有没有可以打电。你得按啊，不是你得按。

对，不找谁，是找组建，组建当中找谁呢？还有没点印象？是不是快速上手，你最基本上是不是得先N。对吧，所以咱们先按一下啊走。来CD。吹牛拍马杠杠了么？杠UI对不对。对不对。嗯。你看答案都忘了。我还特地给文涛打听了，还特意让你们大概瞄了一眼。哎，对。你们别吓唬老师好不？好吧，啊好嘞，上。安完之后，咱们应该知道饿了么UI引入是不是有全部引入和。按需加载。老实说，你说咱现在是全部引入，还是爱居家的？

为啥？因为咱只需要一个。只需要一个知道，你需要把所有的组件，所有的钥匙引进，不需要，所以咱们还得做一件事，啥按需加载。对不？还记不记得砸到？你就算忘有没有文档。找哪？背，你非要气死老师说，快速上手而立。对不对。对不？来，再往底下看看来看这。引入饿了湾，你可以引入整个饿了BI，或者根据需要仅引入部分组件。在看啥呢，在咱们。完整，那当然咱要这种。不要，你看是不是引入饿了么UI，引入钥匙，是不是全局注册。不用对不对，对吧，那大家不要这种，要按区区需不需要这个背部。

需要就是咱得需要按一下。按照人家的步骤来是不就完事了，说老师我今天晚上给他背下来，你得多写。走，那这个这个这个这个诶走。CD。来交了，咱给他复制一下，先把这个小插件给它安上，当然咱这又是。给他上，只要你再往前让你干。然后角点背部RC文件进行修改，咱这个脚当中有背RC文件没有，但哪个文件就是它。打不动。嗯。哪有呢？con.js。对不对，而且它的这个里面是不是已经有一个预设的这样的一个一个一个一个字段，那咱们再看啊。这是不是叫浴室？有没有？已经有了吧，咱只需要把谁带走。Plugin是插件。

是不是到这儿？点看一下对不对，对吧，看中C。Control v老师问你配置文件有没有发？有你将来需要的。重启啊，等你玩玩重什么启重启对不。我看饿了么就不出来。对，那就这那就对了啊，这块一定要注意啊，这块咱做了也是4.1，咱做了啥饿了么UI的啥。按需。引入，但一定要注意配置文件。文件发生变化。项目。需要打的。重启的，那当然咱配完了嘛。没有，大家再往里看。你看他说，接下来如果你只希望引入部分组件，比如button。和下拉框，那么在命点GS当中是不是可以这么引？这种法见过。

但是老师得说一下V这饿了么UI引入组件是有两种引入方式。第一种你们用就这种。这种用过吧。老师问你这是不是引入一个组件，这是不是注册为什么组件。全局主页，你看咱以前注册那些主页是不是全这么写。对不？那咱们先来一个测试一下，先来个谁。对不，那回到哪。回到咱们的命表。GS当中咱们先注册一个啊来全局呢，咱就坐在这儿吧，行吧。来，那这老师是不是了一个。来看这样，那老师想给他注册，那得咋整VE。点complement，那这块啥是button.name那这块谁button？咱们先测试一下子这个组件O不OK，当然你需要咋的。重启。咋用的？就比如说现在老师要用怎么用呢。

我回到咱的哪个页面看到的应该是。诶，彤彤录了是吧。这万一啊，这就这刷新是不还是这是吧啊看着像老师问你举例，我现在想在这放一个八。能不能搞？老板，那来找到咱的这个下的这个支付。我想在这里上放一个按钮是不是。八八。对不对，比如这叫测试。你看吧，刷新你自己看出来了。对不对。对不对，对吧，啊。所以这是咱曾经学过的，你这你可别忘了，那么说，你说咱现在配置有问题吗。有问题吗？没问题吧？对不对，对吧，而且老师告诉你，你们到时候安个插件。叫V-L。

就这个产品。你会发现老师输EL，你会发现他所有的插件，所有的组件在提示吗。看不看见？所以说一会腰的一个插杠。他对于饿了么UI人数提示。这边你放心，以前没安过。OK吧，好嘞，那老师说你你说这个按钮上能不能加一个icon。咋加？什么叫icon？比如说来个家教。好像是是不是他。不是看怎么写。找下啊，当然这些东西来找一下，找一下谁来的。找一下but。诶把把他改在最上面。这的吧，举个例子，老师想加一个啥，加一个这个这个这个叫啥呀。

I考能不能讲？能吧，来咱找一下子看见没有，是不是叫icon啊，都是以E开头。对不？那这块老师问你，咱想要个家叫啥EL？杠I杠。Plus之家。你看嘛。对不说老师这玩意用一个G吗。也不想。但是一些长文的记住加号什么的，记住叫plus。刘编辑叫E。对吧，但是这些不用死记硬背啊，但是这玩意以前是不是搞的。搞过没？还靠。哎，行忘了是吧。没事，你就算忘了，你看这是不是有提示icon图标，用的时候是不是全全加上就行了，举个例子，现在老师想来个电话。是不是叫EL啥for你看嘛，这就直接换成啥。

缝啥缝，缝错了，缝了你看嘛。对不啊，当然咱咱注意不是他。那这块一定要注意一件事是什么事，就是咱们在引入饿了么UI组件的时候，你自己看一下看这啊，它有几种形式两种。第一种，这种引入。是不是就这么演呢，这么长。你要去去丢求哪层是不求多了？是不是就比如说引入八的，咱现在是不是就这么玩啊。你注册的时候，你看怎么注册，有两种，第一种。点柚子你看嘛。啊，当然这这咱先不，你看这是不是以前是有这种玩法。有没有，有没有用过。一点又什么什么。是用价，这你得会啊，是用什么什么。对不，那当然咱的八层是不是用的是不是VI一点这种注册，但你要是它底下还有一种注册方式。

Fun。是不是有一些有一些有一些组件是挂在的圆形上。我说你挂在这儿的原体上好处是啥？所有的组件是不能用。对不，这能懂不？能懂吧，老师问你这种注册以前有没有。游泳馆，你要没说用，我告诉你，这宇哥直接拿枪突动你。对不，那当然咱用的主页老，咱今天说老师这里面主页到底都要用。我告诉你啊。工作当中一般表单放用的很多，用的很。就这两个用的比较频繁。一个是for，一个是table，但是咱今天用的。不用。咱先用谁，咱找的那个叫啥一点，是不是有个症状层，它叫啥老师不带你一个找叫message box。

三块。你看这次咱稍微看看吧，这是叫同框。消息他读懂，咱先补录，补录你看一下。老师问，这是咱想要的？是。是吧？其实倒饬倒饬也是。老师老师也是啊，哎。咱们今天先用谁呢？先用的是它。这儿。使用HTML片段，这能记住不？咱今天就先用这一个叫使用HTML片段。一点就他他是在小，它其实说白跟点类似差不多，但是这里边看它它的标题。HTMLP的，你就说它这里面可以插插标器方。懂不，因为咱要显示个二维码，二维码是用什么做的位置。这啊，所以咱要用它，那你看叫啥叫叫叫叫你看他的代码写的。

是不是有个按钮。一点是不是它是不就完事了。所以咱要注册，那咱找一下咱注册，咱回到这个这块。来看一下子快速上手，你看注册怎么注册，你自己看，那首先说第一个你得引入Bo，这是没问题，你看。人家注册得怎么注册就注册在原型上。Du。看这咱用的是message box，你是不是得注册原形上，而且咱们用的是box下的谁，我不知道你刚有没有看。你看吧，咱刚刚看到的这块啊，你看一下子啊。哪去了？找一下。是，你看咱要的是不是这个，你看这个是出现了at。对不，你老说你这是实上是。

就咱们注册的时候，你要注册注册的什么。找一下。就是谁呢？就是他。就是他。OK，不，那所以说咱回首这个老师，Button这个就给你放在这儿了。好不好？这给你放这行不行吧，所以说这是第一种注册方式，这是注册老师们，这是注册什么全局。对不，那当然它还有另外一种注册方式。咱要出的谁？Box单词别读错了就凉了。对不，那当然他你得怎么注册。说，老师，我哪能记住谁是谁，你是不是看文档就能看出？他是不是在圆形上。这块老师直接把他俩走了。因为你注册的时候，咱用的不是用的是底下这玩意什么什么，所以他俩都注册一下。所以咱就直接把它给他打。老总。

这种形式。所以今天开始你得知道一件事，什么事就是饿了么，饿了么UI注册啥。组建的时候还有一种写法。什么写法？挂在上，挂在。呃，挂在圆形上。那当然你得先引入，引入是不是才能。挂挂名。但是咱用的是他下的这个。对不？这能看到我干。啊，好嘞。那也就是说咱们的组件。实力身上是不是有这俩属性？是不是就不是，是不是可以借用。一个叫A，一个叫这没问题，好了，那这不是咱想要，咱想要的是一点。我手怎么这么欠？给关了是吧。来，那这个咱再访问一下。是不是得先的先登录是吧，幺三。七三四五六七八九十十一走，123456走。

哎呀，看这回能不能成功。好不容易来了个订单号是吧。来往三走，我一想起我的勾车，又又又一堆。你看我猜都猜到。完了我先把它先不勾，其余的这个先把勾上，完了我给他干掉，他再勾上走。给谁买张三？信息123。走。哎，过来是吧，啊，那都要注意，咱是不是要点这个按钮。是不是弹出来。是不是都准备好了？那你就需要怎么办，回到是回到这个组件当中。组件当中，老师问你点谁，是不是点咱的这个。我介绍说支付这你是不是得来一个红票。艾特。另一个咱就叫啥，就叫欧。Op也，你看人家这玩意是比较open。甚至我名字都给你起的是一样的，你看咱长相message box。

找一下。住这儿呢？就这。看吧，是不是它，你看它是不是叫open。啊一点是不是弹出一个这个知道图这块老师你还用一个一个写吗。不要吧，就直接打了。扎过来就行，因为你一点触发open，那这边老师写这玩意或区域。获取支付的啥信息，那这块是啥。是不是他，呃，这兆头。层或者要弹出。弹出框。黄大姐。对，不看这是啥open，直接把代码往里一打一扔。对吧，那咱们先看一下子来。队伍。对吧，那你要注意这玩意儿是咱最终想要不是啊，咱得调。首先说第一个，这个文字是居中，而且文字应该叫什么？

是不是请微信支付，而且是不是这个文字是不是得居中，那你得看啥了。你是得看文档。我告诉你所有的么UI写的这个组件都写的非常非常棒，你只要找到相的A直接不改就出理。而且A1是。最底下这知道吗。咱们看，咱们现在是想要文字居中，咱找找。这老师先不带你们一个找行吧。你看他有个叫。是否什么布局居中布局？老师问你是不是要居中布局？是是加。加center。C。我想回出。中间布局咱再稍微调调。这么一点。

对不就是老师你在这是啥，是不是中间布局。对不，那当然这块还有什么叫丁卓什么什么优子儿，呃什么什么，来看下有没有这个字段。找danger。有没有？是否将message属性作为HTML片段处理，啥意思？就这，你将来可不可以展示标签？OK吧，啊，这个老师给你发这来，咱们在场还得调整，怕啥？还记不记得咱这中间是不是有二维码，这个咱最后再说他左右是不是有2万呢。它除了有确定，其实还有一个取消。取消是谁？你要取消他是不是没展示。他有一个有一个可以设置的。Cancel。知道这。数看守bug是否显示取消按钮，你说显不显示？

显示就是咱把它logo，所以你看人家这个U是还是可以。对不，那这块咱给他完成。处这些是否显示的。显示取消按钮，那咱们看看有没有。有。你点一下它是不是有了。但你这个字是的确定。不是，你是不是修改这两个按钮里面的文本，这都有属性，你都可以改。这是啥？取消按钮的文本内容。确定按钮的分分，所以你看这玩意人家复多人不人性了。超级人性化。再来这啥。这个呢，是咱取消按钮的文本内容的设置。现象。这是取消。按钮的文本的内容，那咱应该叫啥。是不是支付。

遇见问题，那咱们看一下是不是这样。对不？对吧，那当然这边是。已支付成功，那所以确定了这个本你是不是也得。对不，所以你看这玩意儿。你你是不是就直接搞就行了。这玩意非常非常非常爽。这是是不是乙。经已支付达的成功，你看是不是有那点意思？了么？U这些组你。当然左上角这个叉子咱要。不要不咱找。这叫什么？找一下看有没有啊啊这呢。Message box是否显示右上角的关闭按钮？的要素不。

你要不要？而且还要注意这块得会看啊，这是不是参数值，是不是也有什么类型的，是不是人家也说了。对，那这块你要。不要。给他打的。改为啥改为false。那这老师想这啥false。那这边老师讲这是不是应该是确定。按钮的啥是版本，这是啥？这是不是应该是右上角的那个。右上角的叉子。说没了。对吧，那你自己看吧。大概的效果是不是有那么点意思？当然中间用。二维码二维码三个。二尔法等等。对，老师把我的个截个图发给你来是吧，啊一会再说用一些插件就可以搞定写这二维码。

OK吧，好了，先把说你饿了么UI基本的布局。就基本这个操作有没有问题。没问题吧，说老师啊，这个不，我现在玩的还不溜，但你相信老师这句话，等老师带完你们后台讲我时，你会发现这玩意儿。几乎。也不是说天天有机会就背下来。就是大概你说谁直接对手位置。但是你说现在咱是不是还没搞，没办法，所以老师这我只能说咱用啥，我说告诉你在哪。这个看懂了啊好嘞。