```html
<div class="demo-block" id="comfirm-demo1">
  <lx-group>
    <lx-x-switch
      v-model="show"
      title="Toggle"
    />
  </lx-group>
  <lx-confirm
    v-model="show"
    title="confirm deleting the item"
    @on-cancel="onCancel"
    @on-confirm="onConfirm"
    @on-show="onShow"
    @on-hide="onHide"
  >
    <p style="text-align:center;">
      Are you sure?
    </p>
  </lx-confirm>
</div>

<script>
// Confirm.md
new Vue({
  el: '#comfirm-demo1',
  data: {
    show: true
  },
  methods: {
    onCancel () {
      console.log('on cancel')
    },
    onConfirm () {
      console.log('on confirm')
    },
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    }
  }
})
</script>
```