demo3.vue 671 B

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