Alinkx Vue Ui

可拖拽的对话框

# 基础用法

这是一段信息

适用于需要灵活移动对话框的场景

<template>
  <div>
    <a-button @click="showModal">点我弹出</a-button>
    <alinkx-dialog :visible="visible" ok-text="ok" cancel-text="cancel" @ok="confirmDialog" @cancel="cancel">
      这是一段信息
    </alinkx-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods:{
    showModal(){
      this.visible = true
    },
    confirmDialog(e){
      console.log('点击了确认',e)
      this.visible = false
    },
    cancel(){
      console.log('点击了取消')
      this.visible = false
    }
  }
}
</script>
Expand Copy

# 自定义取消及确认按钮

这是一段信息 
<template>
  <div>
    <a-button @click="showModal">点我弹出</a-button>
    <alinkx-dialog :visible="visible" ok-text="确定" cancel-text="取消" :maskClosable="true" @ok="confirmDialog" @cancel="cancel">
      这是一段信息
    </alinkx-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods:{
    showModal(){
      this.visible = true
    },
    confirmDialog(e){
      console.log('点击了确认',e)
      this.visible = false
    },
    cancel(){
      console.log('点击了取消')
      this.visible = false
    }
  }
}
</script>
Expand Copy

# 自定义对话框宽度

这是一段信息 
<template>
  <div>
    <a-button @click="showModal">点我弹出</a-button>
    <alinkx-dialog :visible="visible" ok-text="确定" :width="1000" cancel-text="取消" :maskClosable="true" @ok="confirmDialog" @cancel="cancel">
      这是一段信息
    </alinkx-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods:{
    showModal(){
      this.visible = true
    },
    confirmDialog(e){
      console.log('点击了确认',e)
      this.visible = false
    },
    cancel(){
      console.log('点击了取消')
      this.visible = false
    }
  }
}
</script>
Expand Copy

# 确定按钮 loading

这是一段信息 
<template>
  <div>
    <a-button @click="showModal">点我弹出</a-button>
    <alinkx-dialog :visible="visible" ok-text="确定" cancel-text="取消" :confirmLoading="true" @ok="confirmDialog" @cancel="cancel">
      这是一段信息
    </alinkx-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods:{
    showModal(){
      this.visible = true
    },
    confirmDialog(e){
      console.log('点击了确认',e)
      this.visible = false
    },
    cancel(){
      console.log('点击了取消')
      this.visible = false
    }
  }
}
</script>
Expand Copy

# 没有footer

这是一段信息 
<template>
  <div>
    <a-button @click="showModal">点我弹出</a-button>
    <alinkx-dialog :visible="visible" ok-text="确定" cancel-text="取消" footer="" @ok="confirmDialog" @cancel="cancel">
      这是一段信息
    </alinkx-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods:{
    showModal(){
      this.visible = true
    },
    confirmDialog(e){
      console.log('点击了确认',e)
      this.visible = false
    },
    cancel(){
      console.log('点击了取消')
      this.visible = false
    }
  }
}
</script>
Expand Copy

# 属性

参数 说明 类型 可选值 默认值
visible 是否显示对话框 boolean --- false
ok-text 确认键的文本 string --- ok
cancel-text 取消键的文本 string --- cancel
maskClosable 点击蒙层是否允许关闭 boolean --- true
confirmLoading 确定按钮加载状态 boolean --- false
footer 是否显示确认与取消按钮 string --- ---
width 对话框的宽度 number --- 520

# 事件

参数 说明 回调参数
ok 确认时的回调 function(e)
cancel 取消时的回调 function(e)

alinkx-mongo-export