最近问题记录

1. umi引用外部css不起作用

• 原因：没有写全
• 解决方案：

links: [
    {
      href: './css/xxx.css',
      type: 'text/css',
      rel: 'stylesheet',
      charset: 'utf-8',
    },
  ],

2. 登录时禁用浏览器弹出保存密码按钮

• 原因：type='password'时浏览器机制会自动保存密码
• 解决方案：密码框把type置为text，然后change时把密码替换为•

const formRef = useRef(null);
let [pwd, setPwd] = useState([])
const [show, setShow] = useState(false)

const hidePwd = () => {
    setShow(false);
    const copyVal = JSON.parse(JSON.stringify(pwd.join('')))
    let newVal = copyVal?.replace(/\d|[a-z]|[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g,'•');
    formRef.current?.setFieldsValue({'password': newVal})
}

const showPwd = () => {
    setShow(true);
    formRef.current?.setFieldsValue({'password': pwd.join('')})
}

<ProFormText
    name="password"
    fieldProps={{
        size: 'large',
        prefix: <LockOutlined className={'prefixIcon'} />,
        suffix: show ? <EyeOutlined onClick={hidePwd} /> : <EyeInvisibleOutlined onClick={showPwd}  />,
        onChange: (e) => {
            const value = e.target.value;
            const copyVal = JSON.parse(JSON.stringify(value))
            let newVal = copyVal?.replace(/\d|[a-z]|[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g,'•');
            if(pwd.length > value.length) {
                newVal = ''
                pwd = []
            }else {
                pwd.push(value.substr(value.length - 1, 1));
            }

            setPwd(pwd)
            if(show) {
                formRef.current?.setFieldsValue({'password': pwd.join('')})
            }else {
                formRef.current?.setFieldsValue({'password': newVal})
            }

        }
    }}
    placeholder={'密码'}
    rules={[
        {
            required: true,
            message: '请输入密码！',
        },
    ]}
   />   

3. 后台操作vue项目，写入查询条件生效，点击查询未生效

• 原因：vue是双向数据绑定，后台直接拿到dom改变其value，vue对应的数据没有变动，因此查询时并没有获取到数据
• 解决方案：vue项目把查询条件更改的方法暴露出来挂载到window上让后来window.xxx拿到这个方法传入值即可

mounted() {
    (window as any).setName = (name: any) => {
        return this.setFormName(name)
    }
},
methods: {
    setFormName(name: any) {
        this.form.name = name;
    }
}