react组件引入css文件在启动的时候提示css: Unexpected token, expected ;

JavaScript08

react组件引入css文件在启动的时候提示css: Unexpected token, expected ;,第1张

npm install babel-plugin-css-modules-transform -D

根目录添加一个.babelrc的文件,写入:

{

    "plugins": ["css-modules-transform"]

}

layout.js

import CustomCss from './a.css'

<div className='CoustomCss.hahaha'>

111111

</div>

a.css

.hahaha { background-color: red }

store文件夹:为table设计了一组私有的store数据,类似(vuex, redux),这个一会详细讲。

config.js: 一些配置和默认信息,包括默认宽度之类的

dropdown.js: 提供点击后产生dropdown的一些基础方法

filter-panel.vue: 渲染过滤面板的

layout-observer.js: 布局使用的一个Observer,里面提供了一些基础方法,主要包括两点:1.column变化时,动态更新显示宽度,2.table在进行滚动时,计算滚动位置。

table-body, table-column, table-footer, table-header,这个四个顾名思义都是分别负责渲染对应的body,column,footer,header

table-layout.js: 定义了一个TableLayout的基础类,内部建立了一个观察者模式。

table.vue: 组合上面几个渲染模块,渲染整个table组件

util.js: 一些工具方法

Watcher实际上是利用vue构造出的一个子类,提供了state状态包括列数据、选择数据、过滤数据、排序数据等,并且提供了一些列数据处理的方法(排序,过滤等)。

这里将这三个文件的内容通过mixin混入

current.js

current.js主要是处理current row变化的方法,row数据变更,以及事件的抛出。

expand.js

expand文件主要提供处理扩展行的几个方法

tree.js

tree.js主要是提供了树形数据的节点更新,序列化等方法

这里为watcher添加了mutations的原型方法,熟悉store设计理念的都能理解,修改store数据必须要通过mutation方法保证数据流向的清晰

helper这里理解为提供createStore, mapStates两个方法,

createStore方法主要是创建store对象,而mapState提供了把state映射到实例数据上的功能。在table.vue中使用创建store

在data中创建store

换一个思路

先把imageList.html 内的内容复制到 <div class="main"></div>中 在把该div隐藏 点击按钮时只要设置显示就可以了