elementUI参考学习 vue运行问题以及组件style样式设置的区别

最新推荐文章于 2024-05-22 18:11:11 发布

All rivers run in to the sea

最新推荐文章于 2024-05-22 18:11:11 发布

阅读量607

点赞数 2

分类专栏： vue 文章标签： vue.js elementui 学习

本文链接：https://blog.csdn.net/qq_43944285/article/details/124763544

版权

本文探讨了在使用Vue.js和ElementUI时遇到的问题，包括组件样式设置，如`scoped`和`/deep/`的用法，`!important`的优先级。还介绍了如何通过ID避免待办事项的下标bug，以及运用`filter`筛选数据。此外，文章阐述了如何在Vuex中分割组件，并展示了配置文件如`vue.config.js`和路由设置，以及ElementUI的表单验证和自动打开谷歌浏览器的设置。

摘要由CSDN通过智能技术生成

组件样式 scoped 和 /deep/ 加scoped 后不会修改其他组件的加/deep/ 后就可以修改组件内部的加!important 强制优先级最高覆盖样式 */

在这里插入图片描述

<style scoped>
/* 加scoped    后不会修改其他组件的  
   加/deep/ 后就可以修改组件内部的    加!important  强制优先级最高覆盖样式 */
/deep/.el-pager li.active {
   
  background-color: red !important;
}
</style>

id来找下标,防止待办事件的下标bug (点击未生效)

在这里插入图片描述

filter 筛选出不一样的并返回需要的

在这里插入图片描述

分割组件vuex 在index.js导入组件(todos.js (为导出组件))

在这里插入图片描述
index.js

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
import todos from './modules/todos'
Vue.use(Vuex)

const store = new Vuex.Store({
   
  // 严格模式下，控制state的修改只能通过mutations来完成
  strict: true,
  // modules 模块拆分
  modules: {
   
    todos
  }
})

export default store

和index.js同级 modules/todo.js

export default {
   
  namespaced: true,
  state(){
   
    return {
   
      // 全部, 未完成，已完成
      conStr:'全部', 
      list: JSON.parse(localStorage.getItem('todos')) || [
        {
    id: 100, name: "吃饭", isDone: true },
        {
    id: 201, name: "睡觉", isDone: false },
        {
    id: 103, name: "打豆豆", isDone: true }
      ]
    }
  },
  getters:{
   
    // 根据list和conStr来计算当前要展示的内容
    newList(state){
   
      if(state.conStr === '未完成'){
   
        return state.list.filter(it => it.isDone === false)
      } else if(state.conStr === '已完成'){
   
        return state.list.filter(it => it.isDone )
      } else {
   
        return state.list
      }
    }
  },
  mutations: {
   
    // state:  自动获取
    // name: 传入的
    addTodo(state, name){
   
      console.log(state, name)
      // 添加数据
      state.list.push({
   
        id: Date.now(),
        name,
        isDone: false
      })
    },
    // 删除
    delTodo(state, id){
   
      // 找到对应的下标
      const idx = state.list.findIndex(it => it.id === id)
      // 做删除
      state.list.splice(idx, 1)
    },
    // 修改 id 对应元素的 isDone
    changeIsDone(state, id){
   
      const idx = state.list.findIndex(it => it.id === id)
      console.log('changeIsDone', idx)
      // 找到下标为idx的元素，切换它的状态
      state.list[idx].isDone = !state.list[idx].isDone
    },
    // 修改conStr
    changeConStr(state, val){
   
      state.conStr = val
    },
    // 统一修改全部的状态
    // val就是要改成的值
    changeAllIsDone(state, val){
   
      state.list.forEach(it => it.isDone = val)
    }
  }
}

TodoFooter.vue

<template>
  <footer class="footer">
    <span class="todo-count">总计：<strong>{
   {
   list.length}}</strong></span>
    <ul class="filters">
      <li @click="change('全部')">
        <a :class="{selected: conStr==='全部'}" href="javascript:;" >全部</a>
      </li>
      <li @click="change('未完成')">