AI 助理
备案控制台
开发者社区 云计算 文章 正文

vue3-slot-消息框-模态框

2022-05-17 203
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1.使用vue3 的slot插槽时,大部分和vue2-slot插槽差不多2.但也有一些地方需要注意记录如下

1.前言

1.使用vue3 的slot插槽时,大部分和vue2-slot插槽差不多

2.但也有一些地方需要注意记录如下


2.消息框

GR~3}OU{EC2V]Z]F6N1Z)BB.png


组件


<div class="message-box" v-if="show">
        <slot> </slot>
        <span class="message-box-close" @click="$emit('update:show',false)">X</span>
    </div>

slot 分发的是 组件标签之间的内容

slot在组件内的位置 ,才是 使用组件时候标签内容的实际出口

使用


<message-box v-model:show="showMsgView">警告</message-box>



3. 具名插槽

组件


<template>
  <!-- 具名插槽 -->
  <transition name="fade">
    <div class="message-box" v-if="show">
      <!-- title="来子组件自己的标题" -->
      <slot name="title" content="我是子组件的哦"> 默认标题</slot>
      <slot></slot>
      <span class="message-box-close" @click="$emit('update:show', false)"
        >X</span
      >
    </div>
  </transition>
</template>
<script> 
export default {
  props: ["show"],
};
</script>

在消息组件的基础上进行修改的

使用


<name-slot v-model:show="showMsgView">
      <!-- 名为title插槽的内容 -->
      <template v-slot:title="slotData">
        <!-- msg默认是当前组件里面的数据 -->
        <h1>温馨提示</h1>
        <p> 父组件:{{ msg }}  </p>
        <p>{{ slotData.content }}</p>
      </template>
      <template v-slot:default> 默认插槽 </template>
    </name-slot>

v-lslot的写法 标准化了

易错分析-1

3U1`S]UOOK7W@IM(%P1}~OS.png


v-slot 指令只能用于组件 或者 template

易错分析-2

T88JXM~60PVKTO2G1PY2R2I.png


普通标签和 template同时存在的话   template会被忽略掉

参考资料

v2-slot插槽

易错分析-3

QMY%@MJCOXJG`)0SC$5CA%B.png

1.png

默认插槽只能有一个,多余的会被忽略掉


4.模态框

4.1 添加模态

V{CC6E_K@TN27N`{9@HIO$B.png


模板


<template>
  <div>
    <transition name="move">
      <div
        class="mark-wrap"
        v-show="modelValue"
        @click="$emit('update:modelValue', false)"
      >
        <div class="content-wrap" @click.stop>
          <span class="close" @click="$emit('update:modelValue', false)"
            >×</span
          >
          <h3>{{ title }}</h3>
          <div class="content">
            <slot></slot>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

整个背景灰色 ,点击消失

逻辑


<script>
export default {
  props: ["modelValue", "title"],
  props:{
      modelValue:{
          type:Boolean,
          required:true,
          default:false
      },
       title:{
          type:String,
          default:"标题"
      }
  }
};
</script>


样式


<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.mark-wrap {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
}
.content-wrap {
  padding: 30px;
  max-height: 500px;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
}
.close {
  position: absolute;
  top: 0px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
}
.content-wrap h3 {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #dedede;
}
.content {
  padding: 10px;
}
/* 过渡 */
.move-enter-from,
.move-leave-to {
  opacity: 0;
}
.move-enter-active,
.move-leave-active {
  transition: all 0.5s;
}
</style>

样式整个背景的灰色

使用


<button @click="showModal = true">添加用户</button>
    <my-modal v-model:modelValue="showModal">
    <label>
      <input type="text" placeholder="用户名">
    </label>
    <label>
      <input type="text" placeholder="密码">
    </label>
    </my-modal>

默认不传标题

4.2 查看信息

]W)RG5)WGV_110ASV_CM0L7.png


使用的组件 还是之前的组件

内容不同,由使用者传递具体的内容

这才能体会到  slot的分发 到底啥意思


<button @click="showUpdateModal = true">查看用户</button>
    <my-modal v-model:modelValue="showUpdateModal" title="查看用户">
      <table>
        <tr>
          <td>用户名</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
      </table>
    </my-modal>




云高风轻
目录
相关文章
夏天49597
|
23天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手，逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时，还探讨了常见问题及易错点，如背景点击关闭、键盘事件冲突和动画效果。通过本文，读者可以全面了解 React 模态框组件的实现细节。
夏天49597
44 0
theMuseCatcher
|
4月前
|
JavaScript
Vue2按钮组件（Button）
这篇文章介绍了如何在Vue框架中创建一个可自定义样式和行为的按钮组件，包括按钮的文本、类型、尺寸、宽度、高度、圆角、跳转目标、禁用状态和是否居中显示等属性。
theMuseCatcher
139 1
Vue2按钮组件（Button）
theMuseCatcher
|
4月前
|
JavaScript
Vue3按钮（Button）
这是一个高度可定制的按钮组件，支持多种属性设置，包括按钮类型、形状、图标、尺寸、背景透明度、波纹颜色、跳转地址、打开方式、禁用状态、加载状态及指示符样式等。预览图展示了不同配置下的按钮样式变化。组件通过Vue实现，并提供了丰富的自定义选项以适应各种场景需求。
theMuseCatcher
157 1
Vue3按钮（Button）
theMuseCatcher
|
4月前
Vue3对话框（Dialog）
该 Vue2 对话框组件提供丰富的可定制属性，如标题、内容、宽度、高度等，并支持自定义按钮文本和样式。其预览效果展示了多种使用场景，包括全屏切换、加载状态及自定义样式等。该组件适用于各种需要弹窗功能的应用场景。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/dialog.html)提供了更多实例。此文章详情见原文链接，若涉及版权问题，请告知以便删除。
theMuseCatcher
151 1
Vue3对话框（Dialog）
theMuseCatcher
|
4月前
Vue3信息提示（Modal）
这是一个基于 Vue2 的信息提示模态框组件，支持多种弹窗类型（如 info、success、error 等），并提供丰富的自定义属性，包括按钮文本、按钮类型、居中方式等。该组件可根据内容自动调整高度，并兼容不同按钮样式配置。预览效果展示了不同类型的模态框及其样式。代码中详细介绍了组件的实现方式和使用方法。
theMuseCatcher
98 1
Vue3信息提示（Modal）
theMuseCatcher
|
4月前
Vue2信息提示（Modal）
这是一个基于 Vue3 的信息提示模态框（Modal）组件，提供了丰富的自定义属性，包括标题、内容、宽度、按钮文本等。它支持两种模式：确认提示框（confirm）和信息提示框（info），并有六种不同的展示效果。模态框可以水平垂直居中或固定高度水平居中显示，支持加载中状态。该组件模仿了 ant-design-vue 的样式，适用于各种场景下的信息提示。
theMuseCatcher
84 1
Vue2信息提示（Modal）
theMuseCatcher
|
4月前
Vue2对话框（Dialog）
这是一篇介绍如何在Vue3中使用对话框（Dialog）的文章。该对话框组件可自定义标题、内容、尺寸等属性，并支持全屏切换、加载中状态等功能，整体样式参考了ant-design-vue Modal的设计。文章详细介绍了创建和使用Dialog组件的方法。
theMuseCatcher
48 0
Vue2对话框（Dialog）
球球不吃虾
|
7月前
|
JavaScript 前端开发 UED
教你用vue自定义指令做一个组件的遮罩层loading效果
教你用vue自定义指令做一个组件的遮罩层loading效果
球球不吃虾
570 0
技术宅小温
|
7月前
|
JavaScript 前端开发
＜ elementUi组件封装： 通过 el-tag、el-popover、vue动画等实现公告轮播 ＞
在 Vue + elementUi 开发中，遇到这么一个需求，要实现公告轮播的效果。说实话，一开始是打算通过Javascript去获取并修改对应元素来控制轮播的，但是发现这样子代码比较多，而且性能不是很好。然后…聪明的小温想到了，能不能通过vue的动画过渡，实现公告的滚动效果呢！一不做二不休，直接上手，果然是可以实现的！接下来，简单阐述下，开发中使用方法！
技术宅小温
191 0
破浪前进
|
7月前
|
移动开发 JavaScript 小程序
uView Modal 模态框
uView Modal 模态框
破浪前进
143 0