zoukankan      html  css  js  c++  java
  • vue实现按字母A-Z选择城市

    <template>
    <div class="assetAllocation">
    <Header class="header" @PagebackFun="BackFun" :IsBack="IsBack" :HeaderText="HeaderText"></Header>
    <div class="contentBox">
    <div v-for="(cityObj,index) in compopanyJSON" :id="index+'Content'">
    <p class="letterColor" v-show="cityObj.length > 0">{{index}}</p>
    <ul>
    <li v-for="item in cityObj" class="assetsCity" @tap="selectCom(item.compopany)" :id="item.compopany+'City'">{{item.compopany}}</li>
    </ul>
    </div>
    <div class="letters">
    <ul>
    <li class="letter" v-for="(key,indexL) in letters" @tap="selectCompony(key,indexL)">{{key}}</li>
    </ul>
    </div>
    <div class="middle"></div>
    </div>
    </div>
    </template>

    <script>
    import Header from '../../components/Header/Header';
    import pinyin from '../../../node_modules/js-pinyin/index'
    export default {
    name: 'selectCompany',
    data() {
    return {
    IsBack: true,
    HeaderText: '资产分布',
    listObj: [{
    "compopany": "安康",
    "id": "001"
    }, {
    "compopany": "重庆",
    "id": "002"
    }, {
    "compopany": "北京",
    "id": "003"
    },
    {
    "compopany": "大明湖",
    "id": "004"
    }, {
    "compopany": "二龙",
    "id": "005"
    }, {
    "compopany": "福州",
    "id": "006"
    },
    {
    "compopany": "广州",
    "id": "001"
    }, {
    "compopany": "广东",
    "id": "001"
    }, {
    "compopany": "哈尔滨",
    "id": "001"
    },
    {
    "compopany": "济南",
    "id": "001"
    }, {
    "compopany": "昆明",
    "id": "001"
    }, {
    "compopany": "拉萨",
    "id": "001"
    }
    ],
    letters: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
    selectedCity: "",
    compopanyJSON: {},
    }
    },
    components: {
    Header
    },
    mounted() {
    let that = this;
    let pinyin = require('js-pinyin');
    pinyin.setOptions({
    checkPolyphone: false,
    charCase: 0
    });
    //getFullCharsn 获取字符串全部拼音,并且首字母大写;getCamelChars() : 获取字符串拼音首字母,并大写;传入的参数不是汉字时,不会进行转换,仍然输出源字符串。
    let cityArr = [];
    for(let i = 0; i < that.listObj.length; i++) {
    //遍历数组,拿到城市名称
    let compopanyName = that.listObj[i].compopany;
    //取全部城市的首字母
    if(compopanyName.indexOf("重")!=-1&&compopanyName.indexOf("重") == 0){
    pinyin.getCamelChars(compopanyName).substring(0, 1) == "C"; //这里截取首字母的第一位
    var fristName = "C";
    }else{
    var fristName = pinyin.getCamelChars(compopanyName).substring(0, 1); //这里截取首字母的第一位
    }
    //给原json添加首字母键值对
    that.listObj[i].first = fristName;
    //放入新数组
    cityArr.push(that.listObj[i]);
    }
    let cityJson = {};
    //根据首字母键值对给原数据按首字母分类
    for(let j = 0; j < that.letters.length; j++) { //这里的FirstPin是一个写入了所有字母的数组,见data中
    cityJson[that.letters[j]] = cityArr.filter(function(value) {
    return value.first === that.letters[j];
    })
    }
    that.compopanyJSON = cityJson;
    },
    methods: {
    BackFun() {
    var that = this;
    that.$router.go(-1);
    },
    selectCompony(key, indexL) {
    let that = this;
    let li = document.getElementsByClassName("letter");
    let el = document.getElementById(key + "Content");
    if(el) {
    let middleContent = document.getElementsByClassName("middle")[0];
    for(let index in that.compopanyJSON) {
    if(index == key && that.compopanyJSON[key].length > 0) {
    for(let i = 0; i < li.length; i++) {
    if(indexL == i) {
    li[i].classList.add("letterBg");
    } else {
    li[i].classList.remove("letterBg");
    }
    }
    middleContent.innerHTML = key;
    setTimeout(() => {
    middleContent.innerHTML = "";
    }, 500)
    }
    }
    let FTop = el.offsetTop;
    document.getElementsByClassName("contentBox")[0].scrollTop = FTop - 86;
    }
    },
    selectCom(item) {
    let that = this;
    that.selectedCity = item;
    let allLi = document.getElementsByClassName("assetsCity");
    let currentLi = document.getElementById(item + "City");
    let currentId = currentLi.getAttribute("id");
    for(let i = 0; i < allLi.length; i++) {
    let otherId = allLi[i].getAttribute("id");
    if(otherId == currentId) {
    allLi[i].classList.add("active")
    } else {
    allLi[i].classList.remove("active");
    }
    }
    setTimeout(() => {
    that.$router.push({
    path: "/AccountView",
    query: {
    selectedCity: that.selectedCity
    }
    });
    }, 300)
    },
    },
    }
    </script>

  • 相关阅读:
    sql 内连接外链接
    深入剖析java并发之阻塞队列LinkedBlockingQueue与ArrayBlockingQueue
    mysql关闭以及重启密码
    学习---书籍
    volatile修饰符
    System.out.println和System.err.println的区别
    懒加载和急加载(lazy/eager)
    load与get在hiberate中的区别
    html
    js
  • 原文地址:https://www.cnblogs.com/wulihong/p/12214973.html
Copyright © 2011-2022 走看看