更新记录

1.0.3（2023-08-17） 下载此版本

少一个标题

自定义模态框 made-fmodel

这是 made-fmodel 插件的基础版本，支持 H5 小程序 手机端，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。

属性说明

使用说明

• 视图文件

    <!-- 基础版 -->
    <cus-model v-model="visible" @cancle='cancle' @confrim='confrim'></cus-model>
    <!-- 自定义版 -->
    <cus-model v-model="visible" :isCustom='true'>自定义数据</cus-model>

• 脚本文件

import cusModel from '@/components/made-fmodel/made-fmodel.vue'
export default {
    components: {
        cusModel
    },
  data() {
    return {
      visible:true
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

2、内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'two',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

3、标题加内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      heading:'温馨提示',
      mode:'three',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

4、标题加内容加取消和确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :leftBtnCons="leftBtnCons" :rightBtnCons="rightBtnCons" @confrim='confrim'
         @cancle="cancel"></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'four',
      heading:'温馨提示',
      content:'您确认将这个宝贝删除',
      leftBtnCons:'删除',
      rightBtnCons:'取消'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

文档说明

1、属性说明

2、事件说明

1.0.2（2023-08-17） 下载此版本

优化代码，添加更多自定义属性以及功能

1.0.1（2021-11-10） 下载此版本

插件说明

这是 uni-fmodel 插件的基础版本，支持 H5 小程序 手机端，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。

使用说明

1、最基础的内容加取消和确认

• 视图文件

<uni-fmodel :mode='mode' :content="content" :leftBtnCons="leftBtnCons" :rightBtnCons="rightBtnCons" @confrim='confrim'
         @cancle="cancel"></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'one',
      content:'您确认将这个宝贝删除',
      leftBtnCons:'删除',
      rightBtnCons:'取消'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

2、内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'two',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

3、标题加内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      heading:'温馨提示',
      mode:'three',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

4、标题加内容加取消和确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :leftBtnCons="leftBtnCons" :rightBtnCons="rightBtnCons" @confrim='confrim'
         @cancle="cancel"></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'four',
      heading:'温馨提示',
      content:'您确认将这个宝贝删除',
      leftBtnCons:'删除',
      rightBtnCons:'取消'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

文档说明

1、属性说明

2、事件说明

平台兼容性

自定义模态框 made-fmodel

这是 made-fmodel 插件的基础版本，支持 H5 小程序 手机端，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。

属性说明

使用说明

• 视图文件

    <!-- 基础版 -->
    <cus-model v-model="visible" @cancle='cancle' @confrim='confrim'></cus-model>
    <!-- 自定义版 -->
    <cus-model v-model="visible" :isCustom='true'>自定义数据</cus-model>

• 脚本文件

import cusModel from '@/components/made-fmodel/made-fmodel.vue'
export default {
    components: {
        cusModel
    },
  data() {
    return {
      visible:true
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

2、内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'two',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

3、标题加内容加确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :middleBtnCons="middleBtnCons" @confrim='confrim'></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      heading:'温馨提示',
      mode:'three',
      content:'您确认将这个宝贝删除',
      middleBtnCons:'确定'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    }
  }
}

4、标题加内容加取消和确认按钮

• 视图文件

<uni-fmodel :mode='mode' :heading='heading' :content="content" :leftBtnCons="leftBtnCons" :rightBtnCons="rightBtnCons" @confrim='confrim'
         @cancle="cancel"></uni-fmodel>

• 脚本文件

export default {
  data() {
    return {
      mode:'four',
      heading:'温馨提示',
      content:'您确认将这个宝贝删除',
      leftBtnCons:'删除',
      rightBtnCons:'取消'
    }
  },
  methods: {
    confrim() {
        //再次执行所需操作
    },
    cancel() {
        //再次执行所需操作
    },
  }
}

文档说明

1、属性说明

2、事件说明