Vue-自定义属性和插槽(五)

news2025/1/20 0:54:31

目录

自定义指令

基本语法 (全局&局部注册)

指令的值

练习:v-loading 指令封装

 总结:

插槽(slot)

默认插槽

插槽 - 后备内容(默认值) 

具名插槽 

具名插槽基本语法: 

具名插槽简化语法: 

作用域插槽

 综合案例:商品列表


自定义指令

基本语法 (全局&局部注册)

自定义指令:自己定义的指令, 可以封装一些 dom 操作, 扩展额外功能

全局注册 :

Vue.directive('focus',{

  "inserted" (el) {

    el.focus()

  }

})

局部注册:

 // 局部的自定义属性
  directives: {
    //定义一个局部的focus指令
    "focus" :{
      inserted (el) {
        el.focus()
      }
    },
   //定义一个局部的color指令,且内容值修改时也会发生变化
    "color" :{
      inserted (el,bingding) {
        console.log(bingding.value);
        el.style.color = bingding.value
      },
      update(el,bingding){
        // console.log(bingding.value);
        el.style.color = bingding.value
      }
    }
  }

指令的值

需求:实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

练习:v-loading 指令封装

场景:实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态 => 用户体验不好

需求:封装一个 v-loading 指令,实现加载中的效果

分析:
1. 本质 loading 效果就是一个蒙层,盖在了盒子上
2. 数据请求中,开启loading状态,添加蒙层
3. 数据请求完毕,关闭loading状态,移除蒙层 

实现:
1. 准备一个 loading 类,通过伪元素定位,设置宽高,实现蒙层
2. 开启关闭 loading 状态(添加移除蒙层),本质只需要添加移除类即可
3. 结合自定义指令的语法进行封装复用

 总结:

自定义指令的作用?

        封装一些 dom 操作,扩展额外功能,例如获取焦点

自定义指令的使用步骤?

        1. 注册 (全局注册 或 局部注册)
                在 inserted 钩子函数中,配置指令dom逻辑
        2. 标签上 v-指令名 使用

指令值的语法:

        ① v-指令名 = "指令值",通过 等号 可以绑定指令的值
        ② 通过 binding.value 可以拿到指令的值
        ③ 通过 update 钩子,可以监听指令值的变化,进行dom更新操作

 

 

插槽(slot)

默认插槽

作用:让组件内部的一些 结构 支持 自定义

需求: 将需要多次显示的对话框, 封装成一个组件

问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办?

插槽基本语法:

1. 组件内需要定制的结构部分,改用<slot></slot>占位

2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

插槽 - 后备内容(默认值) 

通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白

能否给插槽设置 默认显示内容 呢?

插槽后备内容:封装组件时,可以为预留的 `<slot>` 插槽提供后备内容(默认内容)。

 

具名插槽 

需求:一个组件内有多处结构,需要外部传入标签,进行定制

默认插槽:一个的定制位置

具名插槽基本语法: 

具名插槽简化语法: 

作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组

场景:封装表格组件

1. 父传子,动态渲染表格内容
2. 利用默认插槽,定制操作列
3. 删除或查看都需要用到 当前项的 id,属于 组件内部的数据
    通过 作用域插槽 传值绑定,进而使用

基本使用步骤: 

1. 给 slot 标签, 以 添加属性的方式

2. 所有添加的属性, 都会被收集到一个对象中 

3. 在template中, 通过 ` #插槽名= "obj" ` 接收,默认插槽名为 default

 

 综合案例:商品列表

需求说明:
1. my-tag 标签组件封装
(1) 双击显示输入框,输入框获取焦点
(2) 失去焦点,隐藏输入框
(3) 回显标签信息
(4) 内容修改,回车 → 修改标签信息
2. my-table 表格组件封装
(1) 动态传递表格数据渲染
(2) 表头支持用户自定义
(3) 主体支持用户自定义

MyTable 

<template>
  <table class="my-table">
      <thead>
        <tr>
          <slot name="head"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in goods " :key="item.id">
          <!-- 作用域插槽--用于传递数据 -->
          <slot name="body" :item="item" :index="index"></slot>
          
        </tr>
        
      </tbody>
    </table>
</template>

<script>

export default {
    props: {
      goods: Array
    }
}
</script>

<style lang="less" scoped>
.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all .5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}
</style>

 MyTag

<template>
  <div class="my-tag">
              <input
                v-if="isShow"
                ref="inp"
                class="input"
                type="text"
                placeholder="输入标签"
                @blur="isShow=false"  
                @keyup.enter="handleEnter"
                :value="value"
              />
              <div v-else @dblclick="handleClick"  class="text">{{value}}</div>
            </div>
</template>

<script>
export default {
  data(){
    return{
      isShow: false,
    } 
  },
  props:{
      value: String
    },
  methods: {
    
    handleClick(){
      //显示文本框
      this.isShow = true
      //页面改变后文本框获取焦点
      this.$nextTick(()=>{
        this.$refs.inp.focus()
      })
    },
    handleEnter(e){
      if(!e.target.value.trim()){
        return
      }
      // console.log('回车键被点击');
      // 向父组件发送消息  父组件使用的是v-model,所以监听的是input事件
      // console.log(this.$refs.inp.value);
      this.$emit('input',this.$refs.inp.value)
      //输入完成,隐藏输入框
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>

 App.vue

<template>
  <div class="table-case">
    <MyTable :goods="goods">
      <!-- 具名插槽 -->
      <template #head>
        <th>编号</th>
          <th>图片</th>
          <th>名称</th>
          <th width="100px">标签</th>
      </template>

      <template #body="{item,index}">
        <td>{{index+1}}</td>
          <td><img :src="item.picture" /></td>
          <td>{{item.name}}</td>
          <td>
             <!-- 标签组件 -->
          <MyTag v-model="item.tag"></MyTag>
          </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
//导入组件
import MyTable from '../src/components/MyTable.vue'
import MyTag from '../src/components/MyTag.vue'
export default {
  name: 'TableCase',
  data () {
    return {
      goods: [
        { id: 101, picture: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg', name: '梨皮朱泥三绝清代小品壶经典款紫砂壶', tag: '茶具' },
        { id: 102, picture: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌', tag: '男鞋' },
        { id: 103, picture: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png', name: '毛茸茸小熊出没,儿童羊羔绒背心73-90cm', tag: '儿童服饰' },
        { id: 104, picture: 'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg', name: '基础百搭,儿童套头针织毛衣1-9岁', tag: '儿童服饰' },
      ]
    }
  },
  // 注册组件
  components:{
    MyTable,
    MyTag
  }
}
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}

</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1447257.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

可视化工具:将多种数据格式转化为交互式图形展示的利器

引言 在数据驱动的时代&#xff0c;数据的分析和理解对于决策过程至关重要。然而&#xff0c;不同的数据格式和结构使得数据的解读变得复杂和困难。为了解决这个问题&#xff0c;一种强大的可视化工具应运而生。这个工具具有将多种数据格式&#xff08;包括JSON、YAML、XML、C…

调用讯飞火星AI大模型WebAPI

调用讯飞火星AI大模型 记录一次调用讯飞AI大模型的过程 官方文档 首先&#xff0c;去官网申请资格&#xff0c;获得必要秘钥等 再编写url&#xff0c;该url存在编码要求&#xff0c;具体看官网url编写 具体代码如下&#xff1a; getWebsocketUrl() {return new Promise((resol…

格式化字符串的简单学习

文章目录 Format String格式化字符串函数格式化字符串参数原理 这几天学的少&#xff0c;过完年就一直在走亲戚&#xff08;现在看到肉就犯恶心 Format String 格式化字符串函数可以接受可变数量的参数&#xff0c;并将第一个参数作为格式化字符串&#xff0c;根据其来解析之…

ChatGPT高效提问—prompt实践(视频制作)

ChatGPT高效提问—prompt实践&#xff08;视频制作&#xff09; 1.1 视频制作 ​ 制作视频对于什么都不懂的小白来说非常难。而随着AI技术的发展&#xff0c;这件事变得越来越简单&#xff0c;如今小白也可以轻松上手。如何借助ChatGPT来制作短视频。 ​ 其实方法非常简单&a…

【排序】归并排序

归并排序 动图演示&#xff1a; 基本思想&#xff1a;分治思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子…

CSS 评分器星星效果

<template><view class="rating"><!-- 5颗星 --><input value="5" name="rating" id="star5" type="radio"><label for="star5"></label><!-- 4颗星 --><input val…

中小学信息学奥赛CSP-J认证 CCF非专业级别软件能力认证-入门组初赛模拟题第一套(完善程序题)

CCF认证CSP-J入门组模拟测试题第一套 三、完善程序题 第一题 九宫格 请完善下面的程序,将1~9个数字分别填人3x3的九宫格中,第一行的三个数字组成一个三位数。要使第二行的三位数是第一行的2倍,第三行的三位数是第一行的3倍且每个格子里的数字都不能重复,现在要求输出所有的填…

08:K8S资源对象管理|服务与负载均衡|Ingress

K8S资源对象管理&#xff5c;服务与负载均衡&#xff5c;Ingress DaemonSet控制器污点策略容忍容忍污点 其他资源对象Job资源对象 有限生命周期CronJob资源对象 集群服务服务自动发现headless服务 实现服务定位与查找 服务类型 Ingress插件 发布服务的方式 DaemonSet控制器 Da…

GEE:梯度提升树(Gradient Boosting Tree)回归教程(样本点、特征添加、训练、精度、参数优化)

作者:CSDN @ _养乐多_ 对于分类问题,这个输出通常是一个类别标签 ,而对于回归问题,输出通常是一个连续的数值。回归可以应用于多种场景,包括预测土壤PH值、土壤有机碳、土壤水分、碳密度、生物量、气温、海冰厚度、不透水面积百分比、植被覆盖度等。 本文将介绍在Google…

vue-进阶语法(四)

目录 v-model原理 v-model应用于组件 sync修饰符 ref 和 $refs&#xff08;重点&#xff09; $nextTick v-model原理 原理&#xff1a;v-model本质上是一个语法糖。例如应用在输入框上&#xff0c;就是 value属性 和 input事件 的合写。 作用&#xff1a;提供数据的双向…

【开源】JAVA+Vue.js实现天然气工程运维系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司&#xff08;施工单位&#xff09;功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3.4 安…

ClickHouse--03--数据类型

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 数据类型1. Int2.FloattoFloat32(...) 用来将字符串转换成 Float32 类型的函数toFloat64(...) 用来将字符串转换成 Float64 类型的函数 3.DecimaltoDecimal32(value…

云原生介绍与容器的基本概念

云原生介绍 1、云原生的定义 云原生为用户指定了一条低心智负担的、敏捷的、能够以可扩展、可复制的方式最大化地利用云的能力、发挥云的价值的最佳路径。 2、云原生思想两个理论 第一个理论基础是&#xff1a;不可变基础设施。 第二个理论基础是&#xff1a;云应用编排理…

基于python深度学习的中文情感分析的系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Vue3高频知识点和写法

一 Vue插件 二 vue3项目创建 创建完成后npm install npm run dev 三 setup 一 响应式数据 setup函数是用来代替data和methods的写法的&#xff0c;在setup函数中声明的数据和函数&#xff0c;导出后可以在页面中使用。 但是暂时不是响应式数据&#xff0c;如果要响应式数据的…

备战蓝桥杯---动态规划(入门2)

今天主要介绍区间dp比较难的题&#xff1a; 下面是分析&#xff1a; 我们如果先固定点V0&#xff0c;那我们得去枚举两个点使它构成三角形&#xff0c;同时求目标值也比较难确定&#xff08;起始与终止都带0&#xff09;&#xff0c;于是我们考虑固定边&#xff0c;我们固定v0…

【开源】SpringBoot框架开发考研专业课程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

云原生容器化-4 Docker仓库

1.Docker仓库 1.1 Docker Hub docker仓库用于存放docker镜像&#xff0c;可以分为公用和私有两种。Docker Hub是全球公用的仓库&#xff0c;因服务器在国外&#xff0c;国内基本不可以&#xff1b;一般需要配置阿里、腾讯等加速器。公司内部而言&#xff0c;可以搭建私有的Do…

智能家居中可自行收集能量的无电池的无线设备

此图片来源于网络 1、背景 ZigBee是一种基于IEEE 802.15.4标准的低速短距离无线通信技术&#xff0c;用于创建个人区域网络。其名称来源于蜜蜂的八字舞&#xff0c;因为蜜蜂通过这种舞蹈来与同伴传递花粉的所在方位信息&#xff0c;从而构成了群体中的通信网络。ZigBee技术具…

【Linux】Kali Linux 系统安装详细教程(虚拟机)

目录 1.1 Kali linux简介 1.2 Kali Linux工具 1.3 VMware workstation和ESXi的区别 二、安装步骤 一、Kali概述 1.1 Kali linux简介 Kali Linux是基于Debian的Linux发行版&#xff0c; 设计用于数字取证操作系统。每一季度更新一次。由Offensive Security Ltd维护和资助。最…