vue slot的使用

slot的说明就看vue的官方文档

第一次使用slot  练习的一个小例子

最先编码的时候没有做到上下收缩,只能是列表式的,如下图

代码:

        <p class="title" style="text-align:left;font-weight:bold">特有属性</p>
        <div class="param-gap">
            <label class="left" for="">圆角&nbsp;:</label>
            <div class="right">
                <input class="data-value" :keep-selected="true" placeholder="请输入(上,右,下,左)" @input="updateData"/>
            </div>
        </div>

但是后面实际需要的效果是可以进行上下伸缩的,如下图

所以这样就得每一个 p元素上写成一个组件,组件里面写点击弹出下面的div,这种方式肯定可以实现,但是这里我就使用了插槽

首先:

用一个组件讲下方的元素进行包裹起来  collapse-item  组件里面的内容就可以当做一个插槽

<collapse-item title="点击我进行收缩的" :isShow="true">
    <div class="param-gap">
        <label class="left" for="" title="线型">线型:</label>
        <div class="right">
            <select class="data-value"  name="" id="">
                <option value="1">线型一</option>
                <option value="2">线型二</option>
                <option value="3">线型三</option>
                <option value="4">线型四</option>
                <option value="5">线型五</option>
            </select>
        </div>
    </div>
</collapse-item>

CollapseItem.vue进行正常引入

import CollapseItem from ‘./CollapseItem‘

CollapseItem.vue里面的代码

<template>
    <div style="width:100%" class="testbox" :class="{‘collapsed‘: !isActive }">
        <p class="click" @click="handleHeaderClick">
            <span>{{title}}</span>
            <i class="arrow icon iconfont icon_down"></i>
        </p>
        <div v-show="isActive">
            <slot></slot>
        </div>
    </div>
</template>

slot里面的最终解析出来的html就是上面collapse-item标签里面包裹的元素

效果图(点击可以上下收缩,图标切换)

最后还使用了一个动画效果,讲小图标进行旋转

注意:

下面的css  如果直接切换class  为 collapsed 的时候,会导致点击的时候图标会有动画的效果,但是再点击一下会瞬间回到初始位置,不会出现动画

    .collapsed .arrow {
        transition: transform 0.18s ease 0s;
        transform: rotate(-180deg) scale(1, 0.9);
    }

解决办法,就是让初始的位置就进行旋转180度,把图片icon原本是down换成up,这样初始的时候看起来就和原来一样,然后再在点击的时候切换 collapsed   具体看代码

CollapseItem.vue

<template>
    <div style="width:100%" class="testbox" :class="{‘collapsed‘: !isActive }">
        <p class="click" @click="handleHeaderClick">
            <span>{{title}}</span>
            <i class="arrow icon iconfont icon_up"></i>
        </p>
        <div v-show="isActive">
            <slot></slot>
        </div>
    </div>
</template>
<script>

export default {
    name: ‘CollapseItem‘,
    props:{
        title:String,//指定title为string类型的
        isShow: {
            type: Boolean,
            default() {
                return true
            }
        }
    },
    data(){
      return {
        isActive : true
      }
    },
    methods: {
        handleHeaderClick(){
            this.isActive = !this.isActive
        }
    }
}
</script>
<style lang="scss" scoped >

    .click {
        display: flex;
        justify-content: space-between;
    }
    .arrow{
        transition: transform 0.18s ease 0s;
        transform: rotate(-180deg) scale(1, 0.9);
    }
    .collapsed .arrow {

        transform: rotate(0deg) scale(1, 0.9);
    }

</style>

hutest

<template>
    <div class="one">
        <div class="box">
            <p class="box-head">这是标题</p>
            <div class="box-content">
            <collapse-item title="点击我进行收缩的" :isShow="true">
                <div class="param-gap">
                    <label class="left" for="" title="线型">线型:</label>
                    <div class="right">
                        <select class="data-value"  name="" id="">
                            <option value="1">线型一</option>
                            <option value="2">线型二</option>
                            <option value="3">线型三</option>
                            <option value="4">线型四</option>
                            <option value="5">线型五</option>
                        </select>
                    </div>
                </div>
            </collapse-item>
            </div>
        </div>
    </div>
</template>
<script>
import CollapseItem from ‘./CollapseItem‘
export default {
    name:‘hutest‘,
    components: { CollapseItem },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped >
    .param-pannel input,.param-pannel select{
        border:1px solid #ddd;
        width:100%
    }
    .param-pannel input[type=color]{
        padding:0
    }
    .one{
        position: fixed;
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box{
        width:400px;
        height: 400px;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        .box-head{
            flex: 0 0 auto;
            background-color: pink;
        }
        .box-content{
            flex:1 1 0px;
            background-color: #eee;
            display: flex;
        }
    }
</style>

注意图标使用的是element ui 所以需要引入,,如果不想引入,也可以直接写字体,或者键盘的尖括号,或者小于号旋转一下,然后将选装的样式进行调一下也可以达到类似的效果

尖括号举例

    .collapsed .arrow {
        transform: translateX(-25%) translateY(25%) rotate(0deg) scale(1, 0.9);
    }

效果同上图

原文地址:https://www.cnblogs.com/pengfei25/p/11815424.html

时间: 2024-11-09 06:08:05

vue slot的使用的相关文章

vue slot

一般我发现slot都是用在子组件 不知道对不对,不对的请留言指教 ,谢谢谢谢 使用slot场景一: 子组件Minput.vue <input type='text'/> 父组件 Minput <Minput>可以显示吗</Minput> 这种情况下  Minput标签内的文字是不会渲染出来的 如果现在想在里面把文字渲染出来怎么办 好 用slot 子组件 <input type='text'/> <slot></slot> 这样的话,父

[Vue @Component] Pass Props Between Components with Vue Slot Scope

Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together. For

vue slot插槽的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> </head> <

vue slot介绍

slot(插槽)属性是vue中比较常用的功能,主要分为:匿名插槽,具名插槽,作用域插槽.下面分别简单介绍下 一.匿名插槽 child.vue: <div> <h3>标题</h3> <slot></slot> </div> parent.vue: <child> <p>插槽内容</p> </child> 渲染结果: <div> <h3>标题</h3> &

Vue slot 插槽

Vue  的插槽感觉上是一个组件函数,和函数一样进行参数的传递来改变组件的据题内容. 使用指令:v-slot //插口的基本使用 <body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> &l

vue Slot理解

简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> <p>hello,world!</p> </my-component> // 组件内部(子) <div class="child-page"> <h1>子页面</h1> <slot></slot> /

vue自学入门-4(vue slot)

好长时间没有用vue了,从新安装vue脚手架. 1.从新安装webpack cnpm install --save-dev webpack 2.vue init webpack my-project-slot 3.进入目录 cnpm install 4.cnmp run dev 启动成功 5.router-view 部分会被替换成HelloWorld.vue内容 6.修改helloworld.vue内容如下 <template> <div class="hello"&

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html

vue slot slot-scope

https://segmentfault.com/a/1190000012996217 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类.非插槽模板指的是html模板,指的是‘div.span.ul.table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制