1、动态绑定style
子组件动态绑定颜色
:style="{ color: TextColor }"
接收父组件传递过来的颜色数据
props: {
// #090DEF
TextColor: {
type: String,
default: "#999",
},
}
2、动态绑定Class
冒号后面为True,则为true
:class="{ boxActive: checkNum == 5 }"
3、颜色渐变(向左边渐变)
background: linear-gradient(
to left,
rgba(6, 118, 103, 0.4),
rgba(6, 118, 103, 0.1)
);
4、图片背景铺满
background: url(../../../assets/images/energy/statusGreen.png) no-repeat;
background-size: 100% 100%;
5、密码效验(自定义校验器rules)放在data里面,return上面
data() {
// 校验确认密码是否一致
const validateRepPassword = (rule, value, callback) => {
if (value === this.formData.newPassword) {
// 相等,则通过
callback();
} else {
callback(new Error("两次输入的密码不一致"));
}
};
return {
formData: {}, //表单
// 校验
rules: {
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
],
repPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ validator: validateRepPassword, trigger: "blur" },
],
},
};
},
6、echars引入注意方式
记得下载echars4.9版本,不指定版本。默认下载最新版,5.0以上版本当时报了一个找不到init方法的错误
npm install echarts@4.9 --save
具体哪个页面引用就局部引用就行
import echarts from "echarts";
export default {
mounted() {
this.showMain();
},
methods: {
async showMain() {
// 基于准备好的dom,初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'))
// 或者 this.$refs.main
// var myChart = echarts.init(this.$refs.main);
var myChart = echarts.init(document.getElementById('main'))
}}
7、全局引入字体样式
比如这个这个echars中的20,用的是ZhanKuQingKeHuangYouTi-2字体,
字体地址资源
在main.js中引入
import '@/assets/font/ZhanKuQingKeHuangYouTi-2.css';
比如就在上面的圆环中使用该字体
title: [
{
text: this_.nowNumber,
x: "47%",
y: "32%",
textAlign: "center",
textStyle: {
fontSize: 26,
fontWeight: "normal",
color: "#e8f7ff",
fontFamily: "ZhanKuQingKeHuangYouTi-2",
// fontWeight:20
fontWeight: "bolder",
},
},
8、引入阿里图标库组件
在main.js中全局引入
import './assets/icon/iconfont.js' //引入阿里巴巴图标库js
import './assets/icon/iconfont.css'//引入阿里巴巴图标库css
使用的方法
<div class="temperatureOne">
<svg class="icon" aria-hidden="true">
<use :xlink:href="iconTem"></use>
</svg>
</div>
iconTem: "#icon-icon_qingtian",
因为我使用图标用于天气显示,所以需要动态绑定
7、@click.native
@click.native 原生点击事件:
1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native
修饰符)
2,等同于在自组件中:
子组件内部处理click事件然后向外发送click事件:$emit("click".fn)
<boxTitle
:name="tileBoxChoose"
class="titleBox"
@click.native="chooseBBB()"
/>
8、window作用
window.location.href(当前URL)
window.location.protocol(协议)
结果如下:
http:
window.location.host(域名 + 端口)
结果如下:
www.myurl.com:8866
window.location.hostname(域名)
结果如下:
www.myurl.com
window.location.port(端口)
结果如下:
8866
window.location.pathname(路径部分)
结果如下:
/test
window.location.search(请求的参数)
结果如下:
?id=123&username=xxx