• Vue过渡效果组件、组件分发、组件ref使用

    过渡效果组件

    • 组件名：transition
    • 组件名：transition-group
    • 作用：用于为vue项目中 组件、路由、页面提供通过vue语法控制切换过程中的css 动画

    vue 提供动画组件通过包裹元素方式，实现主动监控根元素vue语法执行的同时增加合理的延迟实现自定义动画操作

                    + 动画组件可以配合 v-if v-show 动态组件 路由组件 ……

                    + CSS 动画从方向上分为两种，每种三过程

                        1. 从不显示到显示（进入）enter

                            a.不显示时的样式 from

                            b.css动画的执行过程 active

                            c.显示时的样式 to

                        2. 从显示到不显示（离开）leave

                            a.显示时的样式 from

                            b.css动画的执行过程 active

                            c.不显示时的样式 to

                 只用于一个根元素的动画监控

                用于多个根元素的动画分别监控 (必须为所有内部的元素提供key)

                特殊属性

                    :appear="true"  // 开启默认的进入动画执行

                    appear-from-class="hide2"

                    appear-active-class="active"

                    appear-to-class="show2"

    1. <style>
    2.         body{
    3.             padding-bottom: 800px;
    4.         }
    5.         .box{
    6.             width: 400px;
    7.             height: 200px;
    8.             background-color: brown;
    9.             color: white;
    10.         }
    11.         .show{
    12.             opacity: 1;
    13.         }
    14.         .show1{
    15.             width: 400px;
    16.         }
    17.         .active{
    18.             transition: all ease 2s;
    19.         }
    20.         .hide{
    21.             opacity: 0;
    22.         }
    23.         .hide1{
    24.             width: 0px;
    25.         }
    26.         ul{
    27.             overflow: hidden;
    28.         }
    29.         li{
    30.             margin: 10px;
    31.             background-color: paleturquoise;
    32.             width: 300px;
    33.         }
    34.         .show2{
    35.             transform: translate(0%,0px);
    36.         }
    37.         .hide2{
    38.             transform: translate(100%,0px);
    39.         }
    40.     style>
    41. head>
    42. <body>
    43.     <div id="app">
    44.         <input type="button" value="flag=!flag" @click="flag=!flag">
    45.         <br><br>
    46.        
    47.         <transition
    48.             :appear="true"
    49.             appear-from-class="hide2"
    50.             appear-active-class="active"
    51.             appear-to-class="show2"
    52.             leave-from-class="show"
    53.             leave-active-class="active"
    54.             leave-to-class="hide"
    55.             enter-from-class="hide1"
    56.             enter-active-class="active"
    57.             enter-to-class="show1"
    58.         >
    59.             <div v-if="flag" class="box">页面div>
    60.         transition>
    61.         <hr>
    62.         <input type="button" value="addItem" @click="arr.push( Math.random() )">
    63.         <ul>
    64.             <transition-group
    65.                 enter-from-class="hide2"
    66.                 enter-active-class="active"
    67.                 enter-to-class="show2"
    68.                 @after-enter="showTip()"
    69.             >
    70.                 <li v-for="(item, index) in arr" :key="item">{{ item }}li>
    71.             transition-group>
    72.         ul>
    73.     div>
    74.  
    75.     <script type="module">
    76.        
    77.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    78.         createApp({
    79.             data(){
    80.                 return {
    81.                     flag:true,
    82.                     arr:[1,2,3,4,5]
    83.                 }
    84.             },
    85.             methods: {
    86.                 showTip(){
    87.                     alert("添加完成")
    88.                 }
    89.             },
    90.         }).mount("#app")
    91.     script>

    外部动画的应用：Animate的应用

     

    1.  <link rel="stylesheet" href="../../assets/animate/animate.css">
    2.     <style>
    3.         body{
    4.             padding-bottom: 800px;
    5.         }
    6.         .box{
    7.             width: 400px;
    8.             height: 300px;
    9.             background-color: brown;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div id="app">
    15.         <input type="button" value="flag=!flag" @click="flag=!flag">
    16.         <br><br>
    17.         <transition
    18.             enter-active-class="animate__animated animate__fadeInRight"
    19.             leave-active-class="animate__animated animate__fadeOutLeft"
    20.         >
    21.             <div v-if="flag" class="box">div>
    22.         transition>
    23.     div>
    24.  
    25.     <script type="module">
    26.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    27.         createApp({
    28.             data(){
    29.                 return {
    30.                     flag:true
    31.                 }
    32.             }
    33.         }).mount("#app")
    34.     script>

     红色标记部分为该css引用文件自带，后面为Animate动画名称

    组件分发

    • 组件名：slot :
    • 作用：针对于组件定义时的内部模板结构的操作，==主要在组件开发时，如果模板存在一部分页面代码无法确定，可以通过slot 定义页面占位，当组件调用时，可以通过标签中定义 新的内容，完成 slot 的内容补充==
    • 涉及属性： v-slot 指令

    1.     .btn{
    2.             display: inline-block;
    3.             padding: 10px 20px;
    4.             border: 1px solid #dedede;
    5.             cursor: pointer;
    6.             border-radius: 6px;
    7.             background-color: #409eff;
    8.             color: white;
    9.         }
    10.         .btn img{
    11.             height: 16px;
    12.         }
    13.         .btn:hover{
    14.             filter: opacity(0.8);
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div id="app">
    20.         <h4>按钮组件h4>
    21.         <br>
    22.         
    23.         <itany-btn>注册itany-btn>
    24.         <itany-btn>登录itany-btn>
    25.         <itany-btn>退出itany-btn>
    26.         <itany-btn>
    27.             <i class="iconfont icon-edit">i>
    28.             退出
    29.         itany-btn>
    30.         <br><br> 
    31.         <itany-btn>
    32.             <span>默认分发内容span>
    33.             
    34.             <template v-slot:loading>
    35.                 <img src="../../assets/img/loading.gif" alt="" srcset="">
    36.             template>
    37.         itany-btn>
    38.         <br><br> 
    39.         <itany-btn>
    40.             <span>默认分发内容span>
    41.             <template #loading>
    42.                 <img src="../../assets/img/loading.gif" alt="" srcset="">
    43.             template>
    44.         itany-btn>
    45.         <br><br> 
    46.         <itany-btn>
    47.             <template #default>
    48.                 <span>默认分发内容span>
    49.             template>
    50.             <template #loading>
    51.                 <img src="../../assets/img/loading.gif" alt="" srcset="">
    52.             template>
    53.         itany-btn>
    54.         <br><br> 
    55.         <itany-btn>itany-btn>
    56.         <br><br> 
    57.         <itany-btn name="name属性">itany-btn>
    58.         <br><br> 
    59.         <itany-btn name="name属性">
    60.             <span>默认插槽span>
    61.         itany-btn>
    62.     div>
    63.  
    64.     <script type="text/x-template" id="itanyBtn">
    65.         
    66.         <div class="btn">
    67.             <slot name="loading">loadingslot>
    68.             |
    69.             
    70.             <slot>{{ name }}slot>
    71.         div>
    72.     script>
    73.  
    74.     <script type="module">
    75.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    76.         createApp({
    77.             data(){
    78.                 return {
    79.                 
    80.                 }
    81.             }
    82.         })
    83.         .component("ItanyBtn",{
    84.             template:"#itanyBtn",
    85.             props:{
    86.                 name:{
    87.                     type:String,
    88.                     default:"默认数据"
    89.                 }
    90.             }
    91.         })
    92.         .mount("#app")
    93.     script>

    插槽的作用域分发

     vue中所谓的作用域插槽，实际上就是实现子组件渲染时将一些特殊数据变量，

                                  通过插槽关系回传到调用位置（父组件位置）进行使用

           

            子组件调用时的内容区域可以通过vue的语法关系构建出两个 取值作用域

                1、父组件作用域 : 子组件调用时内容区域的默认作用域  【 标签定义在那个容器，作用域就是那个容器 】

                2、子组件回传数据作用域 : (实现规则就是属性绑定+数据拦截)

                                         + 属性绑定 在 slot 标签上以 v-bind 完成子组件数据绑定

                                         + 在子组件标签的内容区域，通过 v-slot="自定义变量" 进行拦截

                                                自定义变量 以取值 {} 等方式记录所有对应 slot 上绑定的属性

    1. <body>
    2.        <div id="app">
    3.         <h3>列表组件h3>
    4.         <itany-list :list="users">
    5.             <template v-slot:default="obj">
    6.                 <div>{{ msg }}div>
    7.                 <div>{{ obj }}div>
    8.                 <div>{{ obj.info }}div>
    9.                 <div>{{ obj.row.name }}div>
    10.             template>
    11.         itany-list>
    12.         <hr>
    13.         
    14.         <itany-list :list="users2" v-slot="obj">
    15.             {{ obj.row.username }}
    16.         itany-list>
    17.         <hr>
    18.         
    19.         <itany-list :list="users2" v-slot="{ row,$index }">
    20.             {{ $index }}:{{ row.username }}
    21.             
    22.             <input type="text" v-model="users2[$index].username">
    23.             <input type="text" v-model="row.username">
    24.         itany-list>
    25.     div>
    26.  
    27.     <script type="text/x-template" id="list">
    28.         <slot name="empty" v-if="list.length==0">{{ emptyText }}slot>
    29.         <ul>
    30.             <li v-for="(item,i) in list">
    31.                 <slot v-bind:info="info" :row="item" :$index="i">slot>
    32.             li>
    33.         ul>
    34.     script>
    35.  
    36.     <script src="../../assets/mock/mock.js">script>
    37.     <script type="module">
    38.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    39.         createApp({
    40.             data(){
    41.                 return {
    42.                     msg:"父组件测试数据",
    43.                     users:Mock.mock({
    44.                         "list|10-10":[
    45.                             {
    46.                                 id:"@id",
    47.                                 name:"@cname"
    48.                             }
    49.                         ]
    50.                     }).list,
    51.                     users2:Mock.mock({
    52.                         "list|10-10":[
    53.                             {
    54.                                 id:"@id",
    55.                                 username:"@cname"
    56.                             }
    57.                         ]
    58.                     }).list
    59.                 }
    60.             }
    61.         })
    62.         .component("ItanyList",{
    63.             template:"#list",
    64.             data() {
    65.                 return {
    66.                     info:"子组件数据"
    67.                 }
    68.             },
    69.             props:{
    70.                 list:{
    71.                     type:Array,
    72.                     default(){
    73.                         return []
    74.                     }
    75.                 },
    76.                 emptyText:{
    77.                     type:String,
    78.                     default:"暂无数据"
    79.                 }
    80.             }
    81.         })
    82.         .mount("#app")
    83.     script>

    组件ref用法

     

    // 通过$refs可以直接访问组件对象，通过组件对象可以直接调用组件方法

    例：模态窗组件创建

    1.  <style>
    2.         body{
    3.             padding-bottom: 800px;
    4.         }
    5.         .dialog{
    6.             position: fixed;
    7.             top:0px;
    8.             bottom: 0px;
    9.             left: 0px;
    10.             right: 0px;
    11.             /* width: 100%;
    12.             height: 100%; */
    13.             background-color: rgba(51, 51, 51, 0.6);
    14.         }
    15.         .dialog-box{
    16.             position: absolute;
    17.             top: 10%;
    18.             left: 50%;
    19.             transform: translate(-50%,0px);
    20.             background-color: white;
    21.             width: 400px;
    22.             min-height: 400px;
    23.             box-shadow: 0px 0px 8px #dedede;
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <div id="app">
    29.         <h4>模态窗组件h4>
    30.         <ul>
    31.             <li v-for="(u, i) in users" :key="u.id">
    32.                 {{ u.name }}
    33.                 <input type="button" value="修改" @click="showEditDialog(u)">
    34.             li>
    35.         ul>
    36.         
    37.         <itany-dialog v-model:flag="dialogFlag" ref="editUser">
    38.             <div>
    39.                 <label>ID:label>
    40.                 <input type="text" readonly :value="tempUser.id">
    41.             div>
    42.             <div>
    43.                 <label>name:label>
    44.                 <input type="text" v-model="tempUser.name">
    45.             div>
    46.             <input type="button" value="关闭" @click="dialogFlag=false">
    47.             <input type="button" value="修改" @click="editUser()">
    48.         itany-dialog>
    49.     div>
    50.  
    51.     <script type="text/x-template" id="dialog">
    52.         <teleport to="body" >
    53.             <div class="dialog" v-if="flag" @click="$emit('update:flag',false)">
    54.                 <div class="dialog-box" @click.stop>
    55.                     <slot>slot>
    56.                 div>
    57.             div>
    58.         teleport>
    59.     script>
    60.  
    61.     <script src="../../assets/mock/mock.js">script>
    62.     <script type="module">
    63.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    64.         createApp({
    65.             data(){
    66.                 return {
    67.                     dialogFlag:false,
    68.                     users:Mock.mock({
    69.                         "list|10-10":[
    70.                             {
    71.                                 id:"@id",
    72.                                 name:"@cname"
    73.                             }
    74.                         ]
    75.                     }).list,
    76.                     tempUser:{}
    77.                 }
    78.             },
    79.             methods: {
    80.                 showEditDialog(u){
    81.                     // this.dialogFlag = true;
    82.                     console.log(this.$refs.editUser);
    83.                     // 通过$refs可以直接访问组件对象，通过组件对象可以直接调用组件方法
    84.                     this.$refs.editUser.open();
    85.                     this.tempUser = u;
    86.                 },
    87.                 editUser(){
    88.                     console.log("被修改的数据:",this.tempUser);
    89.                     this.dialogFlag = false;
    90.                 }
    91.             },
    92.         })
    93.         .component("ItanyDialog",{
    94.             template:"#dialog",
    95.             emits:["update:flag"],
    96.             props:{
    97.                 flag:{
    98.                     type:Boolean,
    99.                     default:false
    100.                 }
    101.             },
    102.             methods:{
    103.                 open(){
    104.                     console.log("模态窗组件的自定义方法");
    105.                     this.$emit("update:flag",true)
    106.                 }
    107.             }
    108.         })
    109.         .mount("#app")
    110.     script>

  • 相关阅读:
    【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 游乐园门票 (200分) - 三语言AC题解(Python/Java/Cpp)
    【学习笔记】Servlet
    2022-06-08你抢不到的可达鸭，芯片成本只要几块钱KFC（-JPG）
    python运算符重载之构造函数和迭代器
    C++文件操作解析及使用(读、写文件 使用文件指针)
    部署Docker玩转Docker
    初识Docker
    Vue公共loading升级版（处理并发异步差时响应）
    R数据分析：解决科研中的“可重复危机”，理解Rmarkdown
    【VASP】POSCAR文件
  • 原文地址：https://blog.csdn.net/m0_62168050/article/details/126967644