vue 封装弹窗组件注意

ゝ一世哀愁。 2021-09-07 06:13 566阅读 0赞

父组件

  1. <template>
  2.     <div>
  3.     <p @click="onDelete">
  4.        打开
  5.      </p>
  6.     <!-- 弹框 -->
  7.     <code-dialog :status.sync="deleteDialogStatus" />
  8.   </div>
  9. </template>
  10. <script> import codeDialog from "./code"; export default { components: { codeDialog }, name: "detailsDialog", data() { return { deleteDialogStatus: false }; }, methods: { onDelete() { this.deleteDialogStatus = true; } }; </script>

子组件

  1. <template>
  2.   <div>
  3.     <el-dialog title="" :visible.sync="show" :center="true" :show-close="false" :close-on-click-modal="true" class="deletes" >
  5.     </el-dialog>
  6.   </div>
  7. </template>
  9. <script> export default { name: "codeDialog", data() { return { show:false }; }, props: ["status"] watch:{ status(val) { this.show = val; }, show(val) { this.$emit("update:status", val); } } }; </script>

发表评论

表情：
评论列表 （有 0 条评论，566人围观）

还没有评论，来说两句吧...

相关阅读

    相关 封装alert弹窗样式

    开发过程中，有些样式也是要注重美观的，对此，我们可以对一些基层方法做一些样式处理，是效果看起来更加的符合整体样式。 function alertInfo(message)\{

    忘是亡心i忘是亡心i/ 0 赞/ 425 阅读