vue使用element-ui中的Message 、MessageBox 、Notification
import Vue from 'vue'; import ElementUI from 'element-ui'; // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 // console.log('对响应数据做点什么') return response; }, function (error) { // 对响应错误做点什么 console.log(ElementUI) //Message 消息提示 ElementUI.Message({ message: '恭喜你，这是一条成功消息', type: 'success' }); //Notification 通知 ElementUI.Notification({ title: '警告', message: '这是一条警告的提示消息', type: 'warni...
vue import .scss报错
新版本的vue-cli已经帮我们把sass-loader配置好了，放在了util.js里面。 原来我们需要在webpack.base.config.js中去配置以下这段代码： { test: /\.scss$/, use: [ { loader: 'style-loader' // creates style nodes from JS strings }, { loader: 'css-loader' // translates CSS into CommonJS }, { loader: 'sass-loader' // compiles Sass to CSS } ] } 现在不需要这样配置。如果这样配置会报...
vue 安装sass，运行后报错loaderContext.getResolve is not a function
今天自己搭建vue-cli框架，安装了element-ui，运行没有任何问题，修改了下样式，为了避免修改ele里面组件的样式出现样式污染，想着装个sass写嵌套的，这样既方便又能很好的解决问题，那么动起来： 1.安装需要的依赖： npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装依赖包sass-loader npm install style-loader --save-dev //安装style-loader 2.在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置 ...
vue中无法加载scss
今天重装了vue-cli脚手架 这次我安装了node-sass+sass-loader之后还是不行，进入webpack.base.config.js发现没有配置scss。 所以增加如下： { test: /\.sass$/, loaders: ['style', 'css', 'sass'] }, 当然，如果需要在vue文件style标签使用scss的话，需要声明一下： <style rel="stylesheet/scss" lang="scss">
Vue开发环境安装并集成element-ui示例
补充：element-ui的组件的用法可以访问官网，里面的介绍很详细，非常适合初学者。传送门。 首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索！ 提示：在命令行分别输入node -v（node和-v之间有个空格） 和npm -v（同样有个空格）可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径，如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode。输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装淘宝镜像 3.继续输入npm inst...
如何用一行 CSS 分别实现 10 种现代布局？
前言 更新于 2020/7/12，和 Una Kravets 邮件确认了下，最近她在 web.dev 也发布了新的关于视频里面布局的 blog，有兴趣的可以前去一观 one line layouts 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。 注意：下面大部分代码已经由各大主流最新浏览器实现，...
remove watermark of gaoding
// ==UserScript== // @name remove watermark // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.gaoding.com/* // @grant GM_addStyle // @require https://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js // ==/UserScript== (function() { 'use strict'; //GM_addStyle('.editor-watermark{display:none;!important}'); // Your code here... var...
详解css3 pointer-events(阻止hover、active、onclick等触发事件)
pointer-events 更像是JavaScript，它能够： 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件 实际代码使用中案例： 1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。 2、一些层的绝对定位，覆盖按钮，穿透可以点击它。等等。 来看下具体用法： pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all...
:host 和::ng-deep的使用
:host 表示选择当前的组件。 ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。 1.修改样式 :host { background: #F5F5F5; overflow: hidden; padding: 24px; display: block; } .card-container ::ng-deep .ant-tabs-card .ant-tabs-content { height: 120px; margin-top: -16px; } 2.阻止默认事件 ::ng-deep .mat-horizontal-stepper-header{ pointer-events: none!important; } 3.