详解.vue文件中style标签的几个标识符资源-CSDN文库

41 浏览量 2020-10-18 08:45:14 上传评论收藏 75KB PDF 举报

资源推荐

资源详情

资源评论

详解详解.vue文件中文件中style标签的几个标识符标签的几个标识符

主要介绍了详解.vue文件中style标签的几个标识符，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

.vue文件中文件中style标签的几个标识符标签的几个标识符

在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救.

卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法.

问题背景问题背景

问题由来问题由来

项目中使用了elementUI框架, 与.vue文件.

现状: <template>中使用$style:[类名], <style module>进行了样式的绑定.

个人认为使用$style这种方式的绑定, 写起来很麻烦.

不仅仅是麻烦更重要的是, 没有办法直接影响和修改element中的样式.

<template>

<span :class="$style.text">

...

</span>

</template>

<style module>

.text {}

</style>

陷入点陷入点

不知道清楚再style中使用了module这个属性的具体含义

dev启动环境下, 使用scoped形成独立作用域后, 并不能影响到elemnt中组件的样式.

使用scopedSlots标识style标签后, 解决问题. 但出现 dev环境正常, 部署后, 不起作用

问题详解问题详解

认识.vue的<style>标签

这应该是关系到, vue-loader这个webpack的插件

vue-laoder会解析组件, 提取语言块. 在需要的时候, 经过其他的loader处理, 最后组装成一个commonjs模块.

其实就是export default出来一个对象然后呢, 上面的<template>, 挂载在这个对象的template属性上

之前, 直接import引近来一些样式文件也是可行的, 但当时并未思考这些标识如何实现.

<style>可以有module和scoped属性, 来将样式封装到组件中. 具有不同封装模式的多个<style>标签, 可以在一个组件中混合

使用

默认情况下, style-loader会提取内容, 并通过<style>标签, 加入到文档的<head>中. 也可以通过配置webpack形成单个.css文件.

$style配合<module>如何工作

参考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html

在<style>中使用一个module属性, 可以形成名为$style的计算属性从而在节点中动态绑定样式.

<span :class="$style.text">

...

</span>

形成的计算属性可以绑定:class的object/array语法.

在html中 class绑定的事一个object语法.

如果在data上面的isRed这个属性是true的话, 就会添加上red这个属性名

从而形成了一个属性控制

<span :class="{[$style.red] : isRed}">

测试

</span>

<script>

data() {

return {

entries: [],

isRed: true,

};

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38522106

粉丝: 2
资源: 901

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip