uniapp H5 模式下 自定义 input 原生样式失败的解决方法
spooking 归属分类: 前端开发 评论数: 0 个

我再uniapp中使用 layui-vue 时, 发现 lay-input 的样式总是有问题。
从下图中可以看到,input有个黑框,宽度也不对。

2024-05-06T08:35:25.png

问题的产生

uniapp 默认会将 input 封装成 uni-input 组件 ,项目中的所有 input 字符串, 包括 css中的 input 都会被替换成 uni-input ,所以是没有办法直接定义css样式的。

解决办法

  1. 使用站外样式
    项目内的样式文件都会被自动替换,带外链的样式文件不会。

    <!-- 会被替换 -->
    <link href="/static/css/style.css" rel="stylesheet">
    
    <!-- 不会被替换 -->
    <link href="https://xxx.com/static/css/style.css" rel="stylesheet">
  2. 修改 HBuilder X 的插件代码,暂时屏蔽 input 的封装。
    【h5 可以这样玩,其他模式慎用】

    修改 D:\Soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-shared\dist\uni-shared.cjs.js
    'use strict';
    
    var shared = require('@vue/shared');
    
    const BUILT_IN_TAG_NAMES = [
     'ad',
     'ad-content-page',
     'ad-draw',
     'audio',
     'button',
     'camera',
     'canvas',
     'checkbox',
     'checkbox-group',
     'cover-image',
     'cover-view',
     'editor',
     'form',
     'functional-page-navigator',
     'icon',
     'image',
     //'input', 屏蔽了这一行,就不会封装input成为uni-input

    效果

    2024-05-06T08:37:07.png