demo3.vue 698 B

12345678910111213141516171819202122232425
  1. <template>
  2. <m-button @click="dialogVisible = true">自定义内容</m-button>
  3. <m-dialog
  4. v-model="dialogVisible"
  5. title="提示"
  6. width="30%"
  7. >
  8. <div>
  9. <m-input v-model="value" placeholder="请输入" clearable></m-input>
  10. <p>输入的值为:{{value}}</p>
  11. </div>
  12. <template #footer>
  13. <span class="dialog-footer">
  14. <m-button @click="dialogVisible = false" style="margin-right: 20px">取消</m-button>
  15. <m-button type="primary" @click="dialogVisible = false">确定</m-button>
  16. </span>
  17. </template>
  18. </m-dialog>
  19. </template>
  20. <script setup>
  21. import { ref } from 'vue-demi'
  22. const dialogVisible = ref(false)
  23. const value = ref('')
  24. </script>