2018-09-06 关于在vue中使用外部js,css的过程

html-css09

2018-09-06 关于在vue中使用外部js,css的过程,第1张

  走访了好几个移动框架,来回切换了几次,发现都不是很适合我使用,要么是组件不够用,要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式,所以思来想去还是用比较熟悉的mui移动框架( 官方网址 )。但是mui是没法使用npm进行安装的(一大遗憾),思来想去于是将mui框架所需的js,css文件放在static目录下:

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量,需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案,谢谢。

方法一:

使用原生js操作dom的方法,来改变css的样式,比如

document.getElementById(id).style.property =newstyle

这里的new style 里面就可以使用js传入的变量。

此方法固然可以,但是对应改变一些复杂的css,比如动画什么的,操作起来就不怎么方便了。此时,如下的方法二就显得尤为重要了!

方法二:

利用css变量来处理,思路是将js变量赋值给css变量,然后在css样式中使用css变量。如下图所示,我们传入year变量,然后生成了--top、--bottom等变量,然后这些变量就可以在css中使用!