组件双向数据绑定 v-model

最新推荐文章于 2024-09-24 11:51:03 发布

冰雪为融

最新推荐文章于 2024-09-24 11:51:03 发布

阅读量297

点赞数

分类专栏： vue 文章标签： vue vue双向数据绑定 v-model

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/113760522

版权

vue 专栏收录该内容

81 篇文章

订阅专栏

该博客介绍了如何在Vue中利用v-model来控制模态框（Modal）的显示与隐藏，提供了详细的组件代码示例，包括模板、脚本和样式。示例展示了如何设置模态框的属性如标题、宽度、回调函数等，并在父组件中通过v-model双向绑定来控制其可见状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过v-model控制模态框的显示隐藏

示例：

<template>
  <a-modal
    title=""
    :centered="true"
    :visible.sync="visible"
    :mask="false"
    :footer="null"
    :width="width"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="modal-tips">
      <div><i class="iconfont iconStyle" :class="icon" /></div>
      <div class="text">{{ text }}</div>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: 'Index',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: 300
    },
    icon: {
      type: String,
      default: 'iconbiaojiwancheng'
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(value) {
        if (this.value !== value) {
          this.$emit('input', value)
        }
      }
    }
  },
  methods: {
    handleOk() {
      this.handleCancel = false
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
.modal-tips {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .iconStyle {
    font-size: 46px;
    color: #1ac476;
  }
  .text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2329;
    margin-top: 10px;
  }
}
</style>

使用：

<Tips v-model="showTips" :text="tips" />