WhiteSean-CSDN博客

原创 React中class组件和无状态函数式组件父组件调用子组件方法

1、Class组件中父组件调用子组件方法原理：当在子组件中调用onRef函数时，正在调用从父组件传递的函数。this.props.onRef（this）这里的参数指向子组件本身，父组件接收该引用作为第一个参数：onRef = {ref =>（this.child = ref）}然后它使用this.child保存引用。之后，可以在父组件内访问整个子组件实例，并且可以调用子组件函数。// 父组件class Parent extends React.Component { handleClick

2020-11-23 22:55:17 3375

原创 redux和react-redux原理分析

1、redux 的作用先上一张图随着单页面发开日趋复杂，需要管理更多的state（状态）管理不断变化的 state 非常麻烦，如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次可能会引起另一个 view 的变化。所以就会产生混乱，而 Redux 就是为了去解决这个问题2、redux 的工作流程components发起动作（store.dispatch）,接收一个action作为参数，

2020-11-22 21:02:15 926

原创 vue+scss实现一键全局换肤功能

vue+scss实现一键全局换肤功能需求：实现点击按钮，项目全局换肤思路：利用window.document.documentElement.setAttribute('data-theme', 'dark')设置html的attribute属性利用scss的混入@mixin定义不同主题的样式表，然后在需要的文件中使用@include加载定义的样式实现步骤：在App.vue中获取当前的主题，并且设置html的attribute ，当没有设置主题时默认设置一个主题，我这里是设置为dark

2020-08-25 17:16:44 2694 3

原创打包项目，控制台报错：Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

打包项目时，执行npm run build 控制台报错控：Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade解决方案：1、cnpm update caniuse-lite2、删除该项目node_modules下面的caniuse-lite和browserslist这两个文件夹，然后运行命令npm i caniuse-lite browserslist...

2020-08-19 17:08:29 9113 1

原创 vue中使用双重v-for循环列表，点击元素设置active样式，并且互不影响

先上效果图思路剖析1.给第一层级添加字段showFlag，默认值都为02.在切换方法中传入第一和第二层级的index,将对应外层级的showFlag的值等于内层级的index3.在视图中的内层循环动态设置class,该class的满足条件：内层index === 外层数组list[parentIndex].showFlag上代码 <div class="system-item" v-for="(data,parentIndex) in dataDiskList"> &

2020-06-24 17:45:09 3475 9

原创 elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题

1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件，这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级，那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。2.问题来了。。。设计师不想要前面的单选按钮，并且直接点击lable即可选中效果。（1）想办法把单选按钮拿掉，第一时间想到的办法就是css将其隐藏.el-radio { color: #606266

2020-06-15 13:47:04 17672 14

原创给v-model绑定的input框的文本内容根据搜索关键字高亮方法

标题接到一个令人抓狂的需求：在搜索框输入关键字搜索时，搜索的结果需要对该关键字做匹配并高亮显示，这是非常简单的。然而给我的需求并不是这么简单的，而是需要input的输入框的文本高亮，这里是用了elementUI 的el-cascader级联选择器，其实el-cascader的底层就是一个input。直接上最终效果一开始就想用过滤器实现，vue1.0支持过滤器，2.0取消了，官网说用computed，个人理解这里使用computed就需要定义get和set方法，否则双向绑定就会失效，这对于大数据量的

2020-06-15 13:42:04 1351

fuhegegnw的博客