样式

1.vue引用iconfont

• 将iconfont下载到本地，解压之后将iconfont的文件夹放到src/assets下

• 核心代码：

   <i class="iconfont">&#xe60e;</i>
复制代码

2. :class使用

（1）数组+三元运算符

<div class="test" :class="[isActive?'active':'']"></div>

<div class="test" :class="[isActive==1?'active':'']"></div>

<div class="test" :class="[isActive==index?'active': ''，errorClass]"></div>

<div class="test" :class="[isActive==index?'active':'otherActiveClass']"></div>
复制代码

（2）绑定多个对象

// 方式一：用逗号隔开

<div :class="{ 'active': isActive, 'sort': isSort }"></div>
复制代码

// 方式二：放在data中
<div :class="classObject"></div>

data() {
 return {
     classObject: {
        active: true,
        sort: false
      }
   }
}
复制代码

//方式三：使用computed属性
<div :class="classObject"></div>

data() {
  return {
    isActive: true,
    isSort: false
  }
 },
 
 computed: {
  classObject: function() {
   return {
    'active': this.isActive && !this.error,
    'text-danger': this.error && this.error.type === 'fatal'
   }
  }
 }
复制代码

//方式四：使用方法
<div :class="objClasses"></div>

data(){
    return{
        objClasses:{
            active:true,
            error:true
        }
    }
}
methods:{
    handler(){
        this.objClasses.active = false;
        this.objClasses.error = false;
    }
}
复制代码

//用方法来绑定对象
<div v-for="(item,index) of lineList" :key="index">
    <div :class="{'hasRedColor': compare(item,index)}">
        {{ item }}
    </div>
</div>

methods:{
 compare (value, index) {
   if (index % 2 == 1) {
         return true
    } else{
      return false
    }
  }
}
复制代码

（3）数组对象结合判断

<div :class='[activeClass,errorClass,{test:isTest}]'></div>

data(){
    return{
        activeClass:'active',
        errorClass:'error',
        isTest: true
    }
}

methods:{
    handle(){
        this.activeClass= ''
        this.errorClass = ''
    }
}
复制代码

（4）给dom添加一个类

<div :class="{ 'active' : isActive }"></div>

data(){
    return{
        isActive:false
    }
}
methods:{
    handler(){
        this.isActive = !this.Active //控制isActive的值在true和false之间取反
    }
}
复制代码

（5）判断是否绑定一个active

<div :class="{'active':isActive==-1}"></div>

<div :class="{'active':isActive==index}"></div>
复制代码

3. :style使用

（1）直接在元素上通过:style的形式

<div :style="{'display':config.isStyle ? 'block':'none'}">动态绑定样式</div>
<div :style="{color:'red','font-weight':200}">动态绑定样式</div>
复制代码

（2）通过数组，引用多个data上的样式对象

//在data上定义对象
data(){
    return{
      styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
      styleObj2:{'font-style':'italic'},
   }
}

//在元素中，通过属性绑定的形式，将样式对象应用到元素上
<div :style="[styleObj1,styleObj2]">绑定样式</h1>
复制代码

4.文本省略号

（1）单行文本省略

<textarea class="single-cut">单行文本省略号单行文本省略号</textarea>

.single-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

复制代码

（2）多行文本省略

<div class="txt-cut">
    多行文本溢出的文字这是一行多行文本溢出的文字
    这是一行多行文本溢出的文字这是一行多行文本溢出的文字
    这是一行多行文本溢出的文字这是一行多行文本溢出的文字
</div>

.txt-cut{
    overflow: hidden;
    text-overflow: ellipsis; //文本以省略号显示  
    display: -webkit-box; //将盒子转换为弹性盒子
    -webkit-line-clamp: 2; //设置显示多少行
    -webkit-box-orient: vertical;//文本显示方式，默认水平
}
复制代码

5.页面通用样式

*{
    box-sizing: border-box;
}
html,body{
    padding: 0;
    margin:0;
    width: 100%;
    height:100%;
}
ul,li{
    list-style:none;
}
复制代码

6.小程序swpier轮播图样式问题

.swiper-container{
    swiper{
        width:750rpx;
        height:340rpx;
        image{
            width:100%; //这里的意思是父元素多宽，image这里同父元素一样
        }
    }
}
复制代码

7.选中后四个元素

//如何选中后四个元素
&:nth-last-child(-n+4){
//原图的宽高 232 *386  //swiper高度 = swiper宽度 * 原图的高度  / 原图的宽度
// 232 /386 = 33.33vw / height

    //第一张图片的高度：height：33.33vw * 386 / 232；
    height:33.33vw * 386 / 232 /2;

    border-left:10rpx solid #fff;

}

//选中第2、3个元素
&:nth-child(2),&:nth-child(3){}
复制代码