首页 elementui 正文

我要投稿

elementui样式重复问题-vue项目开发，遇到这个问题

bendan520 elementui

2024-05-01 0 7,417 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

在日常工作中elementui样式重复问题，Vue多用于项目开发，所以我们总结了Vue项目中的一些常见问题，记录在这里，避免以后开发中过多的重复工作。

而掌握一些有用的方法，运用一些比较中级的技术点，也能让我们成为更好的Vue开发者。

立即观看

当观察一个变量时，它在初始化期间不会被执行。如下例所示，创建时需要自动调用一次。

// bad
created() {
  this.getsearchText();
},
watch: {
  searchText: 'getSearchText',
}
复制代码

可以添加immediate属性elementui样式重复问题，这样初始化的时候就会触发，代码可以简化成这样

// good
watch: {
  searchText: {
    handler: 'getSearchText',
    immediate: true,
  }
}
复制代码

vue 路由跳转打开新窗口

使用这个.$router.resolve

const openNewUrl=(url) => {
  let routeData = this.$router.resolve({path: url})
  window.open(routeData.href, '_blank')
  }
复制代码

el-input 将输入框限制为只能输入数字。


复制代码

el-input 过滤特殊字符或使 ID 卡不敏感

v-model 分为：value 和 @input

 input = idCardValid (e)' placeholder="请输入内容">
复制代码

  methods:{
    idCardValid(val){
      const idCard= val.replace(/^(d{6})d+(d{4})$/, "$1******$2")
      console.log(idCard)
      return idCard
    } 
},
复制代码

使用a标签下载本地静态资源文件

 点击下载
复制代码

检测元素外部（或内部）的点击

window.addEventListener('mousedown', e => {
  // 获取被点击的元素
  const clickedEl = e.target;
  
  if (el.contains(clickedEl)) {
   //在 "el "里面点击了
  } else {
   //在 "el "外点击了
  }
});
复制代码

iframe中的页面控制父框架页面跳转到某个地址

const { href } = this.$router.resolve({ path: "/index", query: { key: key } });
// iframe 控制父页面跳转
window.parent.window.location.href = href
复制代码

在 hookEvent 组件中使用

我们在开发中使用定时器时，通常会这样做

// bad
mounted() {
  // 创建一个定时器
    this.timer = setInterval(() => {
      // ......
    }, 500);
  },
  // 销毁这个定时器。
beforeDestroy() {
  if (this.timer) {
  clearInterval(this.timer);
  this.timer = null;
  }
}
复制代码

使用挂钩可以使维护更加方便。

// good
mounted() {
    let timer = setInterval(() => {
      // ......
    }, 500);
    this.$once("hook:beforeDestroy", function() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    });
  }
复制代码

监听子组件生命周期函数

原来的

//父组件

method () {
 onChildMounted() {
 // do something...
 }
},
// 子组件
mounted () {
 this.$emit('childMounted')
},
复制代码

挂钩：

//父组件

method () {
  onChildMounted() {
  // do something...
  }
},
复制代码

在Vue组件中，可以使用$on、$once来监听所有生命周期钩子函数。例如，窃听组件更新后的钩子函数可以写成 this.$on('hook:updated', () => {})

外部窃听生命周期功能

我们有时候会遇到这样的情况，我们使用了第三方组件，需要监听第三方组件的数据变化，但是该组件没有提供变化事件。我们可以使用Vue提供的@hook:updated窃听组件更新后的生命钩子函数。


  
  
  


import CustomSelect from './components/custom-select'
export default {
  components: {
    CustomSelect
  },
  methods: {
    onSelectUpdated() {
      console.log('custom-select组件的updated钩子函数被触发')
    }
  }
}

复制代码

vue跳转到同一个路径报错

在vue的router的js中，new VueRouter之前添加以下代码

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}
复制代码

vue-cli3打包后报错：Failed to load resources: net::ERR_FILE_NOT_FOUND

在根目录下新建文件vue.config.js

// vue.config.js
module.exports = {
  publicPath: './'
}
复制代码

例如，默认情况下，Vue CLI 会假设您的应用程序部署在域名的根目录下。如果应用程序部署在...，请将 publicPath 设置为 /my-app/。

该值还可以设置为空字符串（''）或相对路径（'./'），这样所有资源都会链接到相对路径，这样下载的包就可以部署在任意路径中。

css 解决固定布局中滚动条不出现的问题

如果我们的布局是固定的，并且希望高度为100%，我们通常这样设置：

div {
    display:fixed;
    height:100%;
    overflow:scroll;
}
复制代码

但这种情况下滚动条不会出现，设置

div {
  top: 0;
  bottom:0;
  position:fixed;
  overflow-y:scroll;
  overflow-x:hidden;
}
复制代码

require.context() 自动注册

require.context():

您可以通过 require.context() 函数创建自己的上下文。

可以向此函数传递三个参数：要搜索的目录、指示是否也应搜索其子目录的标志以及匹配文件的正则表达式。

webpack 在构建过程中会解析代码中的 require.context() 。

// 利用require.context()自动引入 除 index.js 外其他 js 文件
const routerContext = require.context('./', true, /.js$/)
routerContext.keys().forEach(route => {
  // 如果是根目录的 index.js 、不处理
  if (route.startsWith('./index')) {
    return
  }
  const routerModule = routerContext(route)
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  routes = routes.concat(routerModule.default || routerModule)
})
复制代码

生产环境中消除console.log

vue.config.js 中的配置

configureWebpack: (config) => {
  if (process.env.NODE_ENV === "production") {
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
      "console.log",
    ];
  }
}
复制代码

vue+elementUI 在输入框按下回车键时会刷新页面

当表单元素中只有一个输入框时，在输入框中按 Enter 键应提交表单。如果您希望禁止此默认行为，可以将 @submit.native.prevent 添加到标签中。




复制代码

el-select下拉框样式改变

使用样式穿透来改变下拉框的样式。你会发现即使你破解它也不起作用。那是因为下拉框默认是挂载在body下面的。解决办法：设置：popper-append-to-body="false"，然后使用style穿透

element-ui select组件的change事件中如何传递多个参数方法一

@change="onChange($event,customParam)"
复制代码

方法二

@change="((val)=>{changeEvent(val,args)})"  
复制代码

其他组件的默认wave也是同样的方式传递

{handleCommand(val,scope.row)})">
  
    
  
    
        新增
        查看
        更新
        删除
    

复制代码

el-input type=number 去掉聚焦时的上下箭头

解决



.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

复制代码

手动填写chrome表单导致输入文本框背景失效

我们在开发登陆页面时，经常会遇到由于登陆页面手动填写表单导致输入文本框背景失效的问题。

// 自动填充样式覆盖
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #fff; 
  transition: background-color 5000s ease-out 0.5s;
}
复制代码

巧妙使用$options

$options是一个初始化属性选项，记录当前Vue组件。当我们想要将数据中的值重置为其初始值时，它非常有用。

例如：

this.value = this.$options.data().value;
复制代码

重置对话框中的表单

利用之前介绍的 $options 功能

我们常见的业务场景是这样的：一个el-dialog中有一个el-form，我们通常会添加和编辑同一个组件。现在我们要求每次打开 el-dialog 时都必须重置 el-form。数据，并清除校准状态。

  // 弹框打开时
initForm(){
  this.$refs['form'] && this.$refs['form'].resetFields()
  this.form = this.$options.data.call(this).form;
}
复制代码

将 prop 限制为类型列表

当我们使用prop时，我们有时可能需要判断prop是否在我们指定的范围内（或者在指定的值内）。此时，我们可以在 prop 定义中使用 valida tor 选项将 prop 类型限制为特定于组的值。

  // 只能选择一个
  props: {
    type: String,
    validator(value) {
      return ['A', 'B', 'C'].indexOf(value) > -1
    }
  }
复制代码

验证器函数接收一个 prop 值，如果该 prop 有效或无效，则返回 true 或 false。

vue在子组件中判断父组件是否有风暴

在做二次封装时，我们经常使用 v-bind="$attrs" 和 v-on="$listeners" 进行多层组件窃听。那么我们还可以通过$listeners来判断父组件是否在子组件中。有一场暴风雨

例如，我们封装了一个带有重置按钮的搜索组件。当我们点击重置按钮时，默认的操作是清除搜索栏的值并刷新列表。如果父组件出现干扰，则以自定义事件为准，即我们想要点击重置按钮进行一些其他的自定义。

resetFields() {
  //...
  if (this.$listeners.resetFields) {
    // 自定义事件
      this.$emit('resetFields')
    } else {
      // 默认刷新列表事件
      this.loadList()
    }
}
复制代码

当同一个组件上有多个表，并且在 tabs 和 v-if/v-show 之间切换时，多个表中的数据会相互混淆并串在一起，从而导致 bug。

为每个表指定对应且唯一的键属性。

其他一些类似的问题也可以通过添加关键属性来解决。

vue元素同时验证多个Form表单







export default{
    methods: {
      onValidate() { // 保存操作
      const formArr =['form1', 'form2','form3']//三个form表单的ref
      const resultArr = [] //用来接受返回结果的数组
      let _self = this
      function checkForm(formName) { //封装验证表单的函数
        let result = new Promise(function (resolve, reject) {
          _self.$refs[formName].validate((valid) => {
            if (valid) {
              resolve();
            } else { reject() }
          })
        })
        resultArr.push(result) // 得到promise的结果
      }
      formArr.forEach(item => { // 根据表单的ref校验
        checkForm(item)
      })
      Promise.all(resultArr).then(values => {
         // 此时必填完成，做保存后的业务操作
        //  ...
        console.log('success');
      }).catch(_ => {
        console.log('err')
      })
    },
    }
}

复制代码

Vue中的方法参数是一个高阶函数


  import { debounce } from "lodash";
  export default {
    methods: {
      search: debounce(async function (keyword) {
        // ... 请求逻辑
      }, 500),
    },
  };

复制代码

将风暴绑定到slot插槽


 

    
    *下拉框代码省略*

 

export default {
    data(){
        return {
            visiable: false
        }
    }
 
    methods:{
        changeDisplay(){
            this.visiable = !this.visiable
        }
    }
}

复制代码

使用：



  

复制代码



    
    *下拉框代码省略*

 

export default {
    data(){
        return {
            visiable: false
            reference: undefined
        }
    }
 
    methods:{
        changeDisplay(){
            this.visiable = !this.visiable
        }
    }
 
    mounted() {
        if (this.$slots.default) {
          this.reference = this.$slots.default[0].elm
        }
        if (this.reference) {
          this.reference.addEventListener('click', this.changeVisiable, false)
          // hook
          this.$once('hook:beforeDestroy', () => {
          this.reference.removeEventListener('click', this.changeVisiable)
      })
        }
    }
}

复制代码

二次封装范围插孔

重新封装该组件时，我们知道可以通过判断$slots.xxx是否存在来判断我们使用该组件时是否传递了jack内容。这使您可以更好地自定义默认插孔内容。

那么当重新封装一个原本有作用域套接字的组件时，我们可以使用 $scopedSlots.xxx 来确定

组件



  
    {{node.text}}
    
  


使用
```vue

  
    
      
      
        
          
            {{ node.text }}
        
        
          {{ node.text }}

收藏 (0) 打赏

感谢您的支持，我会继续努力的!