V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenqh
V2EX  ›  Vue.js

关于 antd 遇到的问题

  •  
  •   chenqh · 2021-12-12 19:15:11 +08:00 · 1763 次点击
    这是一个创建于 1069 天前的主题,其中的信息可能已经有所发展或是发生改变。

    <a-input-number> 在 rule 为 [{required:true}] 的时候为什么输入 0, 也会报错?

    如果我既想让值是 number, 也想 required, 也想 0 也能通过改怎么办?

    5 条回复    2021-12-13 11:40:05 +08:00
    dfkjgklfdjg
        1
    dfkjgklfdjg  
       2021-12-12 19:31:30 +08:00
    没能复现,可能需要你检查一下代码,或者可以去 codepen 之类的做一个演示了。
    chenqh
        2
    chenqh  
    OP
       2021-12-12 19:39:01 +08:00
    <template>
    <a-modal
    title="更新通道费率(统统 /1000)"
    ok-text="确定"
    cancel-text="取消"
    width="800px"
    @ok="fn_handle_ok"
    v-model:visible="o_visible"
    v-model:loading="o_loading"
    >

    <a-form ref="o_form_ref" :rules="o_form_rules" :model="o_form_model" :wrapperCol="{span: 16}" :labelCol="{span: 8}">
    <a-row :gutter="[16, 16]">
    <a-col xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="{span: 24}" v-for="(channel,index) in o_channel_list">
    <a-form-item :label="channel.label" :name="channel.name" :key="index" >
    <a-input-number v-model:value="o_form_model[channel.name]" min="-1" max="1000"></a-input-number >
    <span class="ant-form-text">

    </span>
    </a-form-item>
    </a-col>
    </a-row>
    </a-form>

    </a-modal>

    </template>

    <script>

    import {ref} from "vue"
    import {reactive} from "vue"
    import { message } from 'ant-design-vue';
    import {toRaw} from "vue"
    import {useStore} from "vuex";
    export default {
    emits: [
    "on-ok"
    ],
    setup(props, {emit}) {
    let o_data_ready = ref(false)
    let store = useStore()
    let o_visible = ref(false);
    let fn_visible = o => {
    o_visible.value = o;
    }
    let o_loading = ref(false);
    let check_dev = async (rule, value) => {
    if(value == '') {
    return Promise.reject("请输入值")
    }
    return Promise.resolve(value);
    }

    let o_form_rules = {
    dev: [{required: true, message: "请输入金额", trigger: "change"}],
    }
    let o_channel_list = [
    {label: "dev:", name: "dev"},
    {label: "mock:", name: "mock"}
    ]
    let o_form_model = reactive({})
    let o_form_ref = ref();

    let fn_form_model = o => {
    for(let key in o_form_rules) {
    o_form_model[key] = o[key]
    }
    console.log("o_form_model", o_form_model);
    }
    let extra = {}
    let fn_extra = o => {
    extra = o
    }
    let fn_form_model_clear = () => {
    fn_extra({})
    for(let key in o_form_rules ) {
    o_form_model[key] = 0;
    }
    }

    let fn_handle_ok = () => {
    o_form_ref.value.validate().then(async () => {
    let data = Object.assign({}, extra, toRaw(o_form_model))
    await store.dispatch("user/api_user_update_channel", data)
    emit("on-ok")
    fn_form_model_clear()
    }).catch(e => {
    message.error(e)
    console.error(e);
    })
    }


    // __export__
    return {
    o_data_ready,
    o_visible,
    fn_visible,
    o_loading,
    fn_handle_ok,
    o_form_rules,
    o_channel_list,
    o_form_model,
    fn_form_model_clear,
    fn_form_model,
    fn_extra,
    o_form_ref,
    }
    // __end_export__
    }
    }
    </script>
    chenqh
        3
    chenqh  
    OP
       2021-12-12 19:40:21 +08:00
    @dfkjgklfdjg 代码是这样的, 难道是因为我放在 modal 里面的原因?还是因为子组件的原因? codepen 不会用呀,不知道怎么加载 antd
    chenqh
        4
    chenqh  
    OP
       2021-12-12 20:05:38 +08:00
    知道是怎么回事了`{required: true, message: "请输入金额", trigger: "change"}` 加个 type 就好了 `{required: true, message: "请输入金额", trigger: "change", type: "number"}` 郁闷了
    c1273082756
        5
    c1273082756  
       2021-12-13 11:40:05 +08:00
    指定一下类型就行了, 实在不行写个自定义的 rules 就 ok 了, 想怎么定义规则就怎么定义规则, 然后返回 Promise.resolve()就 ok
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2890 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:58 · PVG 21:58 · LAX 05:58 · JFK 08:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.