00:01
哈喽,各位小伙伴们大家好,那么接下来啊,咱们呢,去完成添加品牌与修改品牌的静态组件部分的搭建。那咱们呢,去看一下的已经完成的这个项目。那对于我们目前而言啊,像table表格的展示,以及底下分页的功能,咱们都已经实现。但是呢,还有一些其他小的功能点。比如说当你点击添加按钮的时候,那你会发现在整个项目的中心位置会弹出一个类似于曾经咱们做过那种遮罩层的感觉。其实上它用的是什么呢?用的是饿了么UI当中的一个小小的UI组件,叫dialog对话框。在对话框当中啊,它呢,有一个相应的表单元素,以及上传图片的这样的一个效果。那当然用户输入新的名称,以及选中新的啊图片,比如说你这个新的品牌的图片是可以上传于服务器的。
01:11
那当然目前我们而言是不需要考虑这些动态的东西,咱们只要把相应的静态的东西先给它完成。对吧,那对于这里呢,其实就是在收集一个新的品牌,对吧,对于一个品牌而言,它是有相应的哎,名字和logo。那除了添加,其实修改它所用的静态和添加几乎是一模一样。对吧,不应该说是一模一样啊,应该就是100%是一模一样。对吧,所以说你会发现对于添加和修改这两个,如果添加完成了,那其实修改的事情也就做好。OK吧,那所以说啊,咱们先把相应的静态先给它完成。
02:01
那首先说当你一点击添加按钮的时候,你应该显示一个对话框,第。那这个UI组件呢,咱们是需要找一下饿了么UI,那咱们搜一下叫做dialog对话框。那首先说啊,Dilo对话框它有基本的用法,哎,一点发出了一个这样一个效果,但是你会发现这个效果和咱们想要做的效果呢,是不是很一样,对吧,所以咱们用的不是它,咱们用的是自定义内容,因为咱们的对话框当中是要显示表单元素。对不?那看下这里,打开嵌套表格的dialogue。那这种效果呢,也不是咱们想要的,这是一个对话框,里面放的是table表格,而咱们想要的是什么?要的是这种dialogue里面带表单元素。对吧,所以说这个和咱们。
03:00
将来所要用到的效果呢?几乎差不多。对吧,那所以说咱们把它代码呢,给它展开,那当然顶上这个是嵌到的是table,那咱们不想要table。咱想要的是表单元素,所以说咱们呢,把它底下这块的结构呢,给它带走。那当然这个按钮就不需要了,咱们的按钮是点击添加和修改,只需要把底下的这一部分结构给它拿走就可以了。那所以说啊,在咱们的项目当中,这里咱们的需要再添加一个结构,就是对话框啊对话框。那咱们呢,把它相的结构呢,给他拿过来,那咱们呢,还是得稍微看看。那首先说dialogue是对话框啊,UI组件,那首先说它这里有个title title是干什么的,咱们可以看一下,你看它这块抬头叫收货地址,你看一下。他是不是左上角的这个标题呀。对不,那咱们现在这个标题呢,你可以先给他写,比如说哎,添加品牌。
04:06
哎,品牌,但是你要注意啊,将来这块你可不能写死,因为这个对话框除了添加修改也在用,但是咱们现在要执行静态先给他写死,对吧,添加品牌。那以及啊,你看dialogue还有一个属性叫做visible啊,加什么think think咱们也说过对吧,父子组件数据同步嘛,对吧,那这个属性是干什么,是控制,哎,控制咱们的对话框。显示与隐藏用的啊,隐藏用的。它呢是需要通过布尔之处和false啊进行控制。那咱们的你得有,那你想想它是不是用了一个属性,那咱们有吗?没有没有,那需要回到咱们的贝塔显示数据当中去声明一个。那这里面呢,咱们又添加了一个属性,这个是什么?这个是对话框。
05:02
显示与哎,隐藏控制的呃属性。那默认的咱们的让dialogue不显示,那就是force,因为你一点击按钮才显示。对吧,哎,就是他。那以及咱们再往底下看看,这那底下这啊就用到了谁,是不是放啊,咱们也做一下子小笔记,那这块是不是用到了放,也就是说要展示啥,是不是展示表单元素。对吧,I form表单。表单那你要注意啊,它这里面写了一个model为for,这是一个动态的一个数据,他在干什么呢?他在它其实啊是在收集,把你表单元素的内容收集到哪。对吧,那当然咱们现在只考虑静态,动态的东西,活的东西咱们先不考虑。对吧,那以及咱们再看一下子,那在这。Label等于活动名称,那你看一下。
06:00
对于他的这个label,你看他是干什么的,你看label活动名称,你看一下是不是就是这块的一个啊名字,那当然咱们要的可不是什么活动名称,咱要的是品牌名称。那所以说把这里给他进行替换,叫做品牌。哎,名称。对吧,那以及label wide是什么,Label wide呢?其实就是设置你这个label标题的宽度的。当然它这里面用到的是什么,用到的是一个属性,咱们没有,咱们可以先给他写死,比如说100劈叉。对吧,以及它这里面也帮咱们实现了什么表单收集数据,收集表单数据咱们先不用只完成静态就可。对吧,那以及底下这里你看它就已经写好了啊,底下这里它用的是一个select select咱们不需要,那所以说把第二个form item给它干掉,因为咱们不需要,哎,不需要这部对吧,Flag咱们是不需要的,那所以说咱们呢给它干掉。
07:04
那以及dialogue底下呢,是有两个按钮的,一个是取消,哎,一个是确定。对不对,对吧,哎,一个是取消,一个是确定,那咱们呢,先给咱们的这个项目啊,先给他跑一下子,先看一下子。对吧?啊,那咱们看一下呢,它这里面提示了label-Y的等于100P叉有语法的错误是吧?那咱们来看一下吧,那这块呢,咱们先不给它写动态的对吧?哎,Label先把静态先给它搞定就行了,对吧?好了,那咱们先看,现在你一点是看不见,为什么呢?因为dialogue现在是隐藏的。这是false,那什么时候显示dialogue,第一个点击添加或者是修改的时候,把相应的什么呀,是不是把相的dialogue给它显示出来。那所以说咱们找到咱们添加的这个按钮不就在这儿了。对吧,那当你一点击添加按钮的时候,你应该显示那个对话框,那所以说咱们给他绑定一个单击事件。
08:06
那事件的名字啊,比如咱们起个名字叫做show Di love Di,对不?那当然咱们目前是没有这个方法。对吧,那所以说可以回到咱们的method当中,哎,给他搞一个。对吧,那回到这老师呢,把这块呢,给你搞一下子。那这块是什么,是点击添加,哎,点击添加品牌的按钮。品牌的按钮,那你要干什么呀?是不是应该显示对话框?那就很简单,Face点,那是不是就是顶上咱们的这个属性的属性值是不是给它变成处就可以。对不哎,让它为处即可。那咱们呢,要尝试一下是否OK,能不能显示出咱们的对话框,对吧,那咱们运行一下,看一下,当你1.1添加走有没有,是不是有了。
09:08
对吧?啊,那以及修改应该也显示那修改这里啊,那咱们也给他添加一个,那在哪呢?应该是在咱们的这个表格的第三第四列当中找一下,是不是就这修改。那咱们呢,也给他绑一个事件。对吧,那咱也给他来一个,那就是I click。那修改呢,比如说咱们叫up trademark对吧?哎,更新咱们的某一个品牌,那将来一定是要传东西的,因为你得知道你要改的是谁,那咱们先不用管,先把静态先给它完成。对吧,那这块是什么?是修改某一个品牌,修改某一个品牌。对吧,那咱们的还是一样,也需要咱们对话框给他展示出来。this.their log with么?其实是不是就是这行代码?
10:02
对吧,连注释咱们都不用写,直接带过。对吧,那老师呢,稍微格式化一下,那咱们呢,去看一下咱们对话框有没有添加是有了,以及咱们的修改是不是也有。对吧,但是你会发现一件事什么事啊,你会发现人家已经写好了这个它的这个宽度啊,哎,不是很大,特别是这个表带元素没那么大,你看咱这个,咱这个几乎是快占一排排了。对吧,那这个可以怎么办,你可以这么办,你可以给咱们的这个放,你给它添加一个宽度。任何的宽度啊,别那么宽,你就让他是80%就行了。OK吧,那这回咱们看一下咱们的对话框有没有小一点儿,明显看到是不是小了一些。对吧,啊,你这明显小了一些,那除了有品牌的名称,底下这里呢,还有个叫做品牌的logo,那咱们呢,还需要再来一个。再来一个什么,再来一个艾特。
11:02
那所以说咱们这里面呢,再给他来一个,再来一项,再来个item,但是这里啊,要注意他这块呢,要的不是品牌名称,是品牌logo。对不?那以及他要展示的并不是表达元素和锰框啊。对吧,不是表达元素,问模块它是一个什么,上传图片的这样的一个小效果。对吧,那上传图片其实用到的也是一个小插件,叫什么叫upload啊,Upload upload。对吧,那咱们可以看一下的,其实有一个东西你已经看见了,对吧,那看一下这个点击上传。对吧,那当然这个效果不是咱们想要的,这是用户头像上传。其实咱要的就是它。对吧,那以及还有什么照片墙,什么叫照片墙,可以同时上传多张图片,而咱们呢,只需要上传一张就可以了。所以说咱们用的是谁,用的是这个。哎,这个的小小UI组件用的是谁,是upload。
12:04
那咱们呢,把它的要注意啊,它复制的时候,你不仅仅要把它的结构拿过来,样式要带你举个例子,它这里面是不是有类名叫阿瓦uploader,那顶上是不是有箱的样式。所以说这块要注意,那咱们呢,把它的这个结构先给他带走啊,这个结构那找到咱们这儿,那这里呢,你不应该再放表单元素。对吧,你放的应该是up。对吧,但是这里面的一些东西啊,咱们的需要稍微的去呃看一下子,因为你不看吧,你不知道它里面在干什么。对吧,那老师呢,给它切换一下啊,我重新用Vs code给他打开一下。啊,他这个有点恶心啊,这个咱们需要格式化一下。好,这个老师呢,给他格式化一下。咱们呢,要注意一下子,咱们得看一下它里边的属性这些东西。
13:01
那首先说这是类名,那这就不用说了。那以及这是你把图片上传到哪,那咱们先写这个地址,当然这个地址一定是不对的。对不以及是否显示啊,什么什么文件列表false,因为咱们显示的不是照片墙,对不以及还有什么成功和上传之前的这些回调,但是咱们现在只考虑静态,那静态这里呢,这块呢,咱就先给他带走这两个啊这两个东西。对吧,那这个老师呢,先给他带走,咱做一下笔记,有这块先给他带走,咱不知道他在干什么。对吧,其实啊,很简单,看他的文档就知道了,这个是图片上传成功之后的回调,这个是图片上传之前的回调。OK吧,这是它,但是你会发现它这里面用到了一个啊,当然你看这儿它是不是用到了一个属性叫位URL。对不?那咱们回首去看一下,那当然箱的钥匙咱们得带走。因为咱们需要人家的钥匙。那钥匙呢,咱给他带走,要注意啊,它是不带scar。
14:02
那所以说咱们把咱们的这个样式给它进行替换。对吧,样式拿回来了,那以及看一下子你会发现它在这当中是不是有个image URL,为什么?因为你看它的结构当中是不是在用。对不对,对吧,那所以说咱们把咱们这个image ul咱也给他带走。先让他们跑起来。对吧,那所以说回到这里,咱们再添加一个属性,那这个是什么。那这个呢,应该是上传图片。上传图片使用的属相。对吧,那以及还要注意一件事什么事,其实啊,咱们可以把这两个呢,给它拿回啊,这两这俩就给它放在这了。这个呢,咱们就先给它跑起来,到时候咱们再用到的时候啊,就先全都给他抄过来,到用的时候咱们再去解释每个干什么,你看它这里面呢,有两个,有两个东西,一个叫上传成功,一个叫做呃,上传之前你看它是不是有两个回调,一个叫做handle了size。
15:05
一个叫before,阿lo,那你看它底下这两个回调,人家也帮你写了。那咱们呢,先别管他在干什么,先把它性能捞过来。对不对,你先给他拿过来。等咱咱们写动态的时候,那咱们再一个一个去解释。OK吧,所以说咱们把它给它拿过来,那这块是什么,这块呢,应该是上传图片相关的啊回调。那咱们的格式化一下,那咱们先看一下有没有把静态给它完成添加。对吧,添加你看嘛。对吧,那以及还有什么还有修改。那相的静态是不是就完成了,但是要注意啊,有个小细活,你看它底下这是不是还有一段文字什么只能上传勾PGPG文件,且不能超过500500KB,其实啊,在它的结构当中是有的,应该是有这句话的啊,你看在这是不是有。
16:03
对吧,那以及在哪在底下这里其实其实都有这这这段话,那咱们把它的结构拿走就行了,在哪呢,是不是在这。但是你要注意啊,这个div是放在谁的里面放的是吧,Upload里面。对吧,那所以说咱们的也把这个结构啊,你也给他带过对吧,放的是upload里面,那咱给他拿过来。对吧,其实写了半天啊,他什么都没写,只是把饿了么UI当中的人家这个结构样式行为这些东西给他粘吧过。对吧,对吧,是不是就是这样的一个静态的效果。那所以说对于添加品牌或者是修改品牌,他们的静态是一样的。对吧,当然有的同学说老师他前面还得星星啊,星星这里面呢,咱们呢,最后再说,因为它需要涉及到表单验证。OK吧,那所以说咱们现在目前而言,目前而言它的静态已经完成了。
我来说两句