实现升序降序功能（Vue、CSS）

vue实现排序功能，css实现排序图标，javascript的sort方法

Windyluna

3079人浏览 · 2022-01-10 10:50:55

Windyluna · 2022-01-10 10:50:55 发布

一、Vue实现排序功能组件：升序、降序

效果图：
在这里插入图片描述

封装组件：

<template>
  <div class="sort-box" @click="changeSort">
    <div :style="{ cursor: isCursor }">{{ name }}</div>
    <div class="sort-con">
      <div class="s-item" :class="{ active: currentDesc == item.name }" v-for="(item, index) in sortIconList" :key="index">
        <i :class="`iconfont ${item.icon}`"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseSort',
  props: {
    currentDesc: {
      type: String,
      required: true,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    isCursor: {
      type: String,
      default: 'pointer',
    },
  },
  data() {
    return {
      isActive: 0,
      sortIconList: [
        {
          name: 'asc',
          icon: 'icon-shengxu',
        },
        {
          name: 'desc',
          icon: 'icon-jiangxu',
        },
      ],
    }
  },
  methods: {
    changeSort(index) {
      this.$emit('changeSort', this.currentDesc)
    },
  },
  created() {},
  watch: {},
}
</script>

<style lang="scss" scoped>
.sort-box {
  display: flex;
  align-items: center;
}
.sort-con {
  .s-item {
    cursor: pointer;
    position: relative;

    i {
      font-size: 13px;
    }
    &.active {
      i {
        color: #67e5ff;
      }
    }
  }
  .s-item:first-child {
    height: 14px;
  }
}
</style>

在页面上调用：

<template>
	<base-sort :name="'次数'" :currentDesc="currentDesc" @changeSort="changeSort"></base-sort>
</template>
<script>
export default {
	data() {
	  return{
	  	currentDesc: 'desc',
	  }
	},
	methods:{
	  changeSort(val) {
	      this.currentDesc = val === 'asc' ? 'desc' : 'asc'
	  },
	}
}
</script>

二、CSS实现升序、降序图标

效果图：
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">


    .on {
      border-bottom: 2px solid #e61773;
      width: 150px;
      height: 40px;
      display: table-cell;
      position: relative;
    }

    .on a {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #5e5e5e;
    }

    .angle_top {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      transform: rotate(180deg);
      bottom: 14px;
      right: 17px;
    }

    .angle_bottom {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      top: 10px;
      right: 17px;
    }
  </style>
</head>
<body>

<div class="on">
  <a href="javascript:void(0)" data-category="price" data-orderby="asc" class="js_category">价格
    <i class="angle_top"></i>
    <i class="angle_bottom"></i>
  </a>
</div>
</body>
</html>

三、升序降序逻辑（JS的sort方法）

var arr = [1,55,33,44,11,99,10,44];
// 降序
console.info(arr.sort(function(a, b) {
    return b - a;
}));
// 升序
console.info(arr.sort(function(a, b) {
    return a - b;
}));
// 升序
arr2 = [{sort: 21},{sort: 12},{sort: 33},{sort: 14},{sort: 55}];
console.info(arr2.sort(function(a, b) {
    return a.sort - b.sort;
}));

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^