00:00
好嘞,各位,那在这一小节呢,给大家讲一个VIEW3里面新的内置组件叫做tele part,这个词什么意思呢?来给它复制一下啊,打开有道我们查询一下这个词直接翻译过来啊,有瞬间移动啊,有传送是吧?哎,这个含义大家玩过那个什么英雄联盟哎,想想是吧?哎,你正在战斗呢,咔,来个传送是吧?哎,传送回家了是不?哎,在这呢,同学,可以说是传送啊,也可以说是瞬间移动,哎说老师听起来这玩意儿挺有意思的哈,听你这么说,一会儿传送一会儿闪现呢,这东西能干嘛呢?来各位先不读这些定义什么的啊,用一个场景给大家演示出来,来走着非常有用啊,在开发的过程当中,来,那这样啊,各位,我把我这里边所有的就这些东西啊,我都不要了。哎呀,说老师你知道干嘛呀,还记得这个吗?我们在讲这个provide和这个inject的时候,我是不是写了那个什么子组件孙组件呀,哎,接下来我就得用这些东西,说老师不能写一个组件给我演示吗?同学可以这样讲啊,我写一个组件,两个组件都能给你演示出来,但是你要想看到一个最好的效果,各位我得给你写三个组件,哎,我把这东西啊套的深一点,然后你自己就会跟我说了,老师这玩意儿有问题,诶,一个组件它演示不出来,问题是不就也能写代码,你也能看见我把这东西给他传送走了,给他瞬间移动走了,但是你可能会问我老师他有啥作用,但是我要包三层,各位不用我解释,你自己就知道它有什么作用,是吧?来,把这些东西都给它复制一份,然后呢给它粘过来,当然我得改改里边的东西啊各位,就比如说APP里面我不想写这么多的东西啊各位,现在我改给它改到什么程度呢?贼精简啊各位就以H3我是APP组件里边用到child。
01:46
慢慢来啊,各位,每个人都让你懂啊,在这儿呢,把这个child呢,点view给它删掉,精简一点啊,这些东西都不要了啊,但是样式我得留着啊,各位你听我说这一小节咱玩的就是样式,哎,样式对我们很重要,走APP整体是一个容器是不是?哎,Class APP有背景有判定,引入了子组件,注册了,在这一用,OK,这文件能过不好关掉再走,找哪呢?找这个child里边也得调啊各位在这呢,你说不说是子都无所谓了,就是我是child的组件,大家一看那个层级父子孙自己就明白了是不?哎,在这儿不墨迹了,这个呢,删掉引入他的子组件,叫做桑啊,把这儿呢也删掉,其实你写不写都行啊,各位来,在这儿呢,这些东西也删掉,样式说了不删对于我们来说很重要诶,这叫child,再打开这个桑啊,这个孙子组件,这些东西不要了,走就是丧组件啊,那在这儿呢,这个删掉,那这些东西呢,也不要,它就是最里边的啊各位我就不再套了啊,套娃套三层差不。
02:47
多够用了啊,来把这些呢都关掉,各位啊呃,看下效果啊,刷新一波,走着干净吧,APP child song是不是?哎,套了很多层,来回到控制台啊,接下来呢,我想实现这么一个功能啊,就是在这个孙组件里面,哎,这个丧组件里面,他想用一个对话框组件,哎,然后这个时候呢,同学你可以选择自己在这里面写对不对?哎,这个时候啊,你同事老王告诉你,哎,说小刘啊,你不用去写那个对话框组件了,我都已经给你写完了,可好看了,你直接用就得了是吧?那回来来,咱准备一个老王所写的那个对话框组件啊,名字呢,叫做dialog,对吧,本身就有对话框的意思啊,写一个它也是一个组件啊,名字给它写上name dialog,然后写点结构呗,简单写点啊,对话框里边都得有什么呀,有对话框的内容,有关闭按钮对不对?各位啊,先写一个按钮,让这对话框啊能出来,哎,叫做点。
03:47
我弹个窗,嗯,哎是这个啊,弹出的弹弹个窗,哎在那接下来呢,你是不是得写那个弹窗啊,你比如说div来一个,那弹窗就得有点弹窗的样式,你说对吧,那我写一个,比如说呢,叫做dialog,写完了吧,那在这呢,给他写点样式呗,来到这儿走点dialog,嗯,给他一个什么呢?来同学给个宽啊300,给个高呢,也是300,我就不写太大了啊,保证大家的电脑上都不能给弹到那个包点以外啊,我就直接写这300乘300了,这大小就行,再给他来个背景啊,背景什么颜色呢,我看看啊,我这边用了这些来吧,让它是绿色是吧,哎,绿色走OK,那这里面呢,写点文字啊,简单写一个H3啊,叫做我是一个弹窗啊,然后在这儿呢,再写一个H4呗,啊,一些一些内容吧,别说数据了,一些内容走,诶,然后在最后最后是不是得来一个按钮关闭弹窗啊关闭弹窗大家想想那。
04:47
弹窗弹出来了,弹窗里边肯定得有个关闭按钮啊是不?各位OK,那这个对话框组件啊,我就写完了,然后谁想用来着啊,这个孙组件享用那怎么办呀,那就引入呗,Import,哎,引入这个dialoggue走一点也不难啊,各位来走着是当前目录下的这个dialog,然后在这儿呢,那我就得用对不对?嗯,那用之前当然你别忘了得注册呀,在这写一个components走,你dialog来看一下效果啊,各位回来刷新,但是这个弹窗啊,它之所以叫弹窗,你得点它才能出来是不?所以说我们完善一下找到这个dialog,那我是不是得配置点数据啊对吧?数据驱动着页面的显示嘛,在这儿来一个叫做A字受,我就不写那么复杂了啊,就是展不展示来一个ref,一上来你说展示吗?当然不展示,你点再展示呗,但是我没有引入ref对吧?来,走着在这儿来一个from,从这个view身上啊,去引入这个re OK,那最后别忘了一件事啊。
05:47
Return,把这个数据呢,给它交出去走,那既然说是弹窗是吧,那你点我的时候,我就得做一件事儿,把这东西调成t rue对不?那既然是关闭弹窗,那你点我的时候,我就得来一个走着叫做它呀,等于false是不OK嗯,那这块呢,诶写的标准一点啊,走OK,这就写完了,但你这块没控制是吧?各位啊,用什么控制呢?V-show v-if是不是都行啊,那我在这儿呢,来一个V杠受我用V-if吧,行吧,各位,让大家一会儿能看的更明显一点啊,我用V-if,然后读取谁呢?读取这个is show OK,来各位啊,V-if的特点就是如果这个东西不显示,那是直接从这个倒结构中移除的是不是?各位刷新一波啊,没有弹窗,然后呢,我看看啊,老王写这弹窗来一点走是不是弹窗了啊,然后点这个是不是关闭啊,嗯,同学来,你告诉我,咱不看这个结构,不看倒结构,就看这效果,你说有啥问。
06:47
题啊弹了啊关了诶弹了诶关了啥问题呢?各位你觉不觉得你那个弹窗的结构啊,是在这个组件里的。然后你这弹窗一弹吧,把这些结构都顶的老高老高是不?那高度给顶开了是不?同学你不觉得这比较丑吗?你说那个项目要真是这样,各位你说多恶心呀,那你说如果我这个组建咱不往多了说,各位你套了四层,那你觉不觉得外边那三层全得被你这弹窗给撑开是不?各位哎,这就是一个问题,那从这个结构上来说呀,我们也能看到各位你看APP吧,Child吧,这是sun吧,来再打开同学这div谁哎,这div同学哎,你可看好啊,说明白这div是按钮,这按钮在哪呢?按钮是不是在这按钮哪写的dialogue里写的按钮吗?但是我想问的是这个呢,这div呢?
07:46
咱们出现在结构当中呢,因为它不展示,它用的是V-if,所以说移除了,你说对吧,各位啊,打开这个走,你看里边只有一个按钮吗?接下来你瞧好了啊各位,我想看这个弹窗走你。
08:00
啊,我再点关闭,我再点弹窗,你观察右侧结构去各位走。来走来走,怎么回事儿,各位,那个弹窗的结构其实是在这个区域的,你说对吗?那这个区域是哪儿呢?你往外找是整个那个diallo的div,再往外找是这个孙子的,再往外找是儿子的,再往外找是那个APP父亲的,你说对吗?各位就有一种感觉啊,你弹窗弹出来那窗吧,你那结构啊,在人家这个组件里头,但一般来说我问各位啊,你说咱们做那个弹窗的时候,是不是都喜欢让那个弹窗啊,在整个屏幕的正中央对不?然后四外圈儿呢,再来点什么遮罩的效果对不对?各位来给它遮起来是这意思不?现在我跟你讲,各位你想控制这个弹窗的位置就相当恶心。我问你弹窗在哪儿呢?在这儿呢,你可能会跟我说,老师,那就开启定位呗,但你往上看看,你不觉得这事儿挺吓人的吗?定位都是参考自己的复元,复元素是不是往往上找,那你看这儿这儿这儿这儿找去吧,各位我跟你说啊,就APP child3就这么多组件里面任何一次定位都可能把你这弹窗弹窗给你搞跑偏了,对不?你的想法是,哎呀,我参考谁谁谁定位,中间但凡出来一个也定位了,就把你这个事儿给干扰了,对不对?也就是说各位你特别不好控制这个弹窗的样式啊,咱就比如说我想让这弹窗啊,参考整个body区去定位,就想把它摆在中间这位置,那同学你在这儿觉不觉得写起来就挺恶心的,毕竟你结构在人家呢,是不?各位,那么接下来用我们学的这个东西teleport就可以实现把你对话框,诶,就这个div给他传送走你。
09:54
想让他去哪儿他就去哪儿,好各位啊,最后记住这种感觉关了弹了啊,首先从结构上来说,这个东西藏在了sun的里面,然后从这个样式上的角度来看啊,就把你这些容器全都给顶的老高老高对不对,你看看同学啊,这些什么橙色的,蓝色的,灰色的,是不是高度都发生变化呀,好,接下来瞧着啊各位回到在哪里,我就把这个对话框啊,这个弹窗同学按钮你不用动按钮挺好的,没招谁没惹谁的对不对,按钮也不弹出来,就往页面上一放来,就把这弹出来的结构,哎,你用这个东西写一下,叫做teleport啊,当然呢,我们不能让它自闭合啊,它这提示的有点小问题在这儿,这么啊由开始有结束,然后呢,把你要传送走的结构给它放在这儿。
10:47
哎,这么一写就能传送了,然后呢,用这个兔属性,你告诉他想把这个结构传送到哪里去,同学可以直接写HTML元素,你比如说我写atml,那就放在整个atml那个标签里面,哎,我写body,那就放在body里面,来咱测试一番啊各位回到这儿刷新一波,看好这结构啊同学,页面上这是都得去啊,都得区里面有一个div,哎,我们所有的组件啊,乱七八糟的是不是都在这里呢?这里边我问一下啊,就这个区域还有div了吗?没有,那接下来你紧紧的瞄着这儿啊各位,我弹窗走。
11:29
咋样?各位是不是传送了,是不是闪现了,对不?各位啊,是不是瞬间移动了呀,同学你的弹窗,哎呀是不是在这儿呢?你看我自己写的嘛,Class dialog,你看打开这里面嘛,什么内容啥的,诶瞬间就把这东西啊放在body里了,而且同学你看整体这个交互啊,我弹窗的时候,你看这些结构咋的不受影响,不会把它撑开是不?而且我跟你讲,同学你这么写还有优势呢,就是你可以直接参考body去写它的定位了,也就是说哪怕你套了八层组件,你用我这弹窗也不会影响你的组件啊,我这弹窗也会精准的找到body,哎,去识别,然后去定位,那比如说我们就写写呗,各位来简单写写啊,写一个什么效果呢?大家应该在网页里面用过那个效果啊,就是这么一个效果啊,点一下弹窗完这东西吧,摆在屏幕的正中央,然后整个来一个遮罩层,让后边的东西都不能点,哎,你只能在我这个对话框里面操作来。
12:29
简单写写啊各位,呃,那得回到这个dialo里面,那回到这儿呢,各位首先啊,我得解决一个问题,什么问题呢?就是说呀,后边得有一个遮罩层,哎,把这些东西遮住,就是说弹窗显示的时候,这按钮你甭想点,这里边所有的东西你都甭想点,遮住嘛,遮住一下,哎,其实不就是模态框嘛,是不是?各位,那怎么写呢?那这样啊,各位,我得给它的外侧呀,我再得包一个div,因为是两个嘛,对吧,这个弹窗是在这个遮罩层里面的,哎,当然你也有别的这个处理方式啊,我就选择在外边再包一个遮罩层啊class给它起一个名字,名字叫做mask,哎,就是遮罩好了,在这呢,咱简单写写啊,在这来一个遮罩,嗯,这遮罩呢,同学是不是得把整个屏幕都遮掉啊,啊,那得怎么写呢?就是得给它一个宽高啊,都是100%的,是不是都撑开的呀?嗯,可以用这种方式啊,Position来一个absolute,然后接下来怎么写呢?这么写啊各位TOP0。
13:29
哎,BOTTOM0 left0 R0,哎就完全都撑开,然后再给它一个背景色啊,Background color既然是一个半透明的遮罩啊,各位不能完全遮死,那我就来一个rgba啊,然后半透明大家应该会写吧,这是零零,然后零完这儿呢,来一个那个透明度是0.5 OK啊,看一下效果啊回到这边刷新一波,诶同学你看遮罩层,你看是不是点不了,你看这不都遮住了吗?但是你不能让这遮罩层一上来就遮呀,什么时候遮呀,弹窗弹的时候遮,所以说各位怎么着,你这微缸if吧,你别给那弹窗,你给谁,你给遮罩层,遮罩层一出来,顺带着弹窗是不是就出来了?哎,其实同学很多UI组件库也是这么玩的,遮罩层和里边的东西是一体的,完了给遮罩层呢,上那个控制,OK,来看一下效果啊走哎,你看是不是弹窗了,你想点别的,你点不了,你只能点这儿来给它关闭是不,然后这个定位呢,咱再调一调啊这个。
14:29
绿色的东西这个定位,首先我看看这个文字同学,咱大概写写吧,行吧,哎,我写一个text AI center,让文字居中一下就好看一点,然后让这个绿色框呢,得定位一下啊,Position来一个absolute,嗯,因为这边不有定位了嘛,它就能参考它了呀,啊参考那个遮罩了,呃,怎么定位呢?比如说top是50%啊,距离顶端50%,然后距离这个left呢,也是50%,看一下效果啊,应该是,呃,来走,哎,是这么一个效果,但是他说的是这个点啊,这个点你看这不50%,这不50%吗?但是我们得推回自身的一半,是不是各位,当然你有别的解决方案啊,你可以用那个2D变换什么的也行,那在这我写一下吧,来一个trans,再来一个translate,完了写一个负的50%,然后这儿呢,是负的50%,各位还记得吧,这个50%是参考自身是不?各位啊,这个呢,是参考它定位的那个元素啊,回来刷新一波,同学,你看这弹窗来走是不是弹窗了。
15:29
你看我特别好处理它的这个定位问题,因为咋的这东西跟这APP啊是平级的,都是直接对这个body说话的,是不可同学你看这个传送门啊,或者什么瞬间移动是不是还挺有用的对不?各位哎,很多UI组件库呢,也用到了这个东西,OK,那在这儿呢,同学说说啊,除了写这个啊,写这个什么呢?来找到传送门在这儿呢,除了能写这body呀,还能写一个别的个位,就是你可以写一些CSS的选择器,你就比如说啊public这里边我再来一个div,这div叫什么呢?叫艾特硅谷对不?那你在这儿啊,就可以这么写,各位啊,别写body了,井号艾特硅谷这就得了,嗯,来咱看一下效果啊,刷新一波,打开艾特硅谷,这div是不是在这儿呢?里边有东西吗?没有,哎,那一弹窗呢,B就传送到这儿来了,是不?各位哎,也能实现这个效果,但一般来说呢,我们在这啊,就直接写body就得了,有一种感觉把这个弹窗从藏的。
16:29
深很深的组件里面给它拎出来是不走好处理一些问题啊来这小节呢,我们停。
我来说两句