vuejs单文件组件,style标签样式怎么使用Autoprefixer

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuejs单文件组件,style标签样式怎么使用Autoprefixer相关的知识,希望对你有一定的参考价值。

参考技术A 第一步:初始化项目目录我们需要创建如下目录及文件夹,最终目录结构如下:1234567891011-dist//文件生成目录--//自动生成-node_module//自动安装---src//文件入口--components//组件存放--app.vue//主.vue-

iview 使用笔记

在单文件组件中如何重载iview中的样式?无法重载iview中的样式?

<style lang="sass" scoped>
    /*
        添加 scoped 后样式将被锁定在当前组件,因此无法覆盖原iview样式,
        解决方式:
            1/不使用 scoped(不推荐),
            2/再建一个 style 标签 ,vue单文件组件中是允许定义多个style标签的
    */
<style>
/*如下*/
<style lang="sass" scoped>

</style>
<style lang="sass">

</style>        

使用iview上传组件Upload时,需要动态改变附带的参数data及上传的路径url?但 before-upload 动态改变时,子组件中参数未改变时已执行上传操作?

iview的Upload组件文档中: before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传

<template>
    <Upload
        ref="upload"
        :action="uploadUrl",
        :format="[‘jpg‘,‘jpeg‘,‘png‘,‘bmp‘,‘pdf‘]",
        :on-format-error = "handleFormatError",
        :before-upload = "handleBeforeUpload",
        :on-success = "handleSuccess",
        :on-error="handleError",
        :data="uploadData"
        >
        <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
        </div>
    </Upload>
</template>
<script>
    export default {
        data () {
            return {
                uploadModal: true,
                uploadData: {},
                activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72",
                uploadUrl: ‘‘,
            }
        },
        methods: {
            ... ...
            handleBeforeUpload (file) { /*上传前确定上传地址*/
                let researchId = this.activeUploadId;
                this.uploadUrl = api?research_id= + researchId + &filetype= + file.name.split(.)[1];
                this.uploadData = {
                    aspect: patient,
                    abc: file
                };
                let promise = new Promise((resolve) => {
                    this.$nextTick(function () {
                        resolve(true);
                    });
                });
                return promise; //通过返回一个promis对象解决
            }
            ... ...
        }
    }
</script>

 

以上是关于vuejs单文件组件,style标签样式怎么使用Autoprefixer的主要内容,如果未能解决你的问题,请参考以下文章

vueJS-单文件组件引入css文件

iview 使用笔记

vuejs的组件化开发中怎么自定义class覆盖原有样式?

React编写组件的局部样式

vue单文件组件加载样式失败

Vue 单文件组件 (SFC) 规范