wq-dialog-box

vue弹窗组件

安装

npm i wq-dialog-box

配置项

参数	说明	是否必传	默认值
width	设置宽度	yes	-
height	设置高度	yes	-

弹窗事件

事件名	说明	参数
confirm	确定方法	-
cancel	取消方法	-

使用方法

在main.js文件中引入wq-dialog-box组件
impotant xxx from 'wq-dialog-box'
然后注册到全局
Vue.use(xxx)

在页面中使用方法

<wq-dialog-box 
    ref="dialogBox" 
    :text="dialogText" 
    :width="500" 
    :height="422" 
    :needCancelBtn="false" 
    confirmBtnText="提交"
    @confirm="addOrRevise"
>
    <div class="aut-add-content clear-float">
        <div class="one">
            <span class="text">描述</span>
            <input class="rt erp-ipt erp-ipt-lg" v-model="listData.description"></input>
        </div>
        <div class="one">
            <span class="text">密码</span>
            <input class="rt erp-ipt erp-ipt-lg" v-model="listData.password"></input>
        </div>
        <div class="one">
            <span class="text">角色</span>
            <select class="rt erp-sel erp-sel-lg" v-model="listData.roleId">
            <option :value="item.roleId" v-for="item in roleList">{{ item.roleName }}</option>
            </select>
        </div>
        <div class="one">
            <span class="text">账号</span>
            <input class="rt erp-ipt erp-ipt-lg" disabled placeholder="提交后自动生成账号" :value="accountUsername"></input>
        </div>
        <p class="erp-warn-msg" ref="autMsg"></p>
    </div>
</wq-dialog-box>