vue3 ts setup 封装element-plus el-dialog,并使用v-model


封装 Element Plus 的 el-dialog 组件,并使其支持 v-model。

 

首先,确保你已经安装了 Element Plus,并在你的项目中正确引入了所需的样式和组件。然后,创建一个名为 CustomDialog.vue 的组件文件:

JavaScript 全选
<template>
  <el-dialog v-model="visible">
    <slot></slot>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emits = defineEmits(['update:modelValue']);

const visible = ref(props.modelValue);

watch(
  () => props.modelValue,
  (newValue) => {
    if (visible.value != newValue) {
      visible.value = newValue
    }
  }
)

watch(
  () => visible.value,
  (newValue) => {
    if (props.modelValue != newValue) {
      emit('update:modelValue', newValue)
    }
  }
)
</script>

在这个文件中,我们使用了 Vue 3 的 <script setup> 语法来创建组件的逻辑部分。我们使用 defineProps 来定义 props 对象,并使用 defineEmits 来定义 emits 对象,以便我们可以在 setup 中使用它们。

 

然后,我们使用 ref 创建了一个名为 visible 的响应式变量,并初始化为 props.modelValue。我们定义了一个 updateVisible 函数来更新 visible 变量,并触发 update:modelValue 事件。

 

最后,我们使用了 Element Plus 的 el-dialog 组件,将 visible 变量绑定到它的 v-model 上,并监听 update:visible 事件来更新 visible 变量。

 

现在,你可以在父组件中使用这个封装的对话框组件,并像这样使用 v-model:

JavaScript 全选
<template>
  <div>
    <button @click="dialogVisible = true">Open Dialog</button>
    <custom-dialog v-model="dialogVisible">
      <p>This is the content of the dialog</p>
    </custom-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CustomDialog from '@/components/CustomDialog.vue';

const dialogVisible = ref(false);
</script>

在这个示例中,我们将 dialogVisible 变量绑定到了 CustomDialog 组件的 v-model 上,这样就可以使用 dialogVisible 变量来控制对话框的显示和隐藏了。

 

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
上一篇:vue3重新封装element-plus组件库的按钮组件el-button
下一篇:VUE3监听div滚动,滚动超出后折叠collapse组件
评论列表

发表评论

评论内容
昵称:
关联文章

vue3 ts setup 封装element-plus el-dialog,使用v-model
vue3重新封装element-plus组件库的按钮组件el-button
vue3+vist 打包空白
vscode使用vue3+ts时代码提示问题
element-ui组件el-tabs控制内容滚动
vue3使用ts开发自定义组件,对外开放方法
element-ui el-row中有多个el-col的时候,某些情况下el-col显示错位
微信支付:API v3 Postman脚本使用指南
vue3+ts 组件导出类型
vue3 keep-alive跳转回来后 scroll位置丢失
vue3 + ts环境中props配置自定义类型
Vue 3 中,嵌套数据源且需要过滤内部数据源
微信支付: API V3支付回调签名验证
vue3 组合模式 组件自己引用自己 递归组件 组件命名
VUE Cli3项目添加LESS支持
纸壳CMS v3.5升级.Net 6免费下载
【.NET 与树莓派】MPD 的 Mini-API 封装
Bootstrap 弹窗JS组件封装
element-ui el-table不显示合计行的解决办法
VUE3版本 页面切换后数据丢失问题

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码