前端学习问题整理

1.vue插件eslint报错
解决：找到build->webpack.base.config.js。注释或者去掉对eslint-loader的引用。
2.实现禁止选中文字
解决：

 div{
  -moz-user-select:none;

  -webkit-user-select:none;

  user-select:none;   
  } 

3.Vue项目封装请求数据的接口总结

一、配置url（能够放在一个js中）前端
1.引入axios：import axios from “axios”
2.配置url
          const service=axios.create({ios
            baseURL:请求的地址,json
       		timeout:5000     //访问超时的时间限制axios
           });
3.	抛出（若是是新起的js文件）：export default service;
二、写接口的文件（js文件）url
1.将配置url和axios引入：（例如配置的url文件叫request.js）
2.配置各个接口：(例如叫example.js)
      Get请求： 	
                     export function testGet(参数){
                             return request({
                                       method:’get’,
                                       url:’具体接口’,
                                      params:{
                                             //json格式，若是有就写，没有就去掉。
                                     }
                            })
                   }
     Post请求：
                    export function testPost(参数){
                                const data={}  //写要传递的参数，json格式
                                return request({
                                       method:’post,
                                       url:’具体接口’,
                                       datatype:’json’,
                                       data
                               })
                    }
三、使用
       1.引入：import   {要引入的方法名字}   from   example.js
       2.使用
            TestGet().then(res=>{  //成功进这个 }).catch(err=>{ //报错进这个});
            放在当前页面使用的方法里。

4.uni-app实现选择图片功能（chooseImage）

1 <template>
 2     <view>
 3         <button type="primary" @click="img">button</button>
 4         <button type="primary" @tap="info">info</button>
 5     </view>
 6 </template>
 7 
 8 <script>
 9     export default {
10         data() {
11             return {
12                 
13             }
14         },
15         methods: {
16             // img:function(){
17             //     uni.chooseImage({
18             //         // count:  允许上传的照片数量
19             //         count:5,
20             //         // sizeType:  original 原图，compressed 压缩图，默认二者都有
21             //         sizeType: "original",
22             //         success: function(res){
23             //             console.log(res)
24             //         } 
25             //     });
26             // },
27             img(){
28                 uni.chooseImage({
29                     // count:  允许上传的照片数量
30                     count:5,
31                     // sizeType:  original 原图，compressed 压缩图，默认二者都有
32                     sizeType: "original",
33                     success(res){
34                         console.log(res)
35                         uni.previewImage({
36                             // 对选中的图片进行预览
37                             urls: res.tempFilePaths,
38                             // urls:['','']  图片的地址 是数组形式
39                         })
40                     } 
41                 });
42             },
43             info(){
44                 uni.getImageInfo({
45                     src:'http://tmp/touristappid..4zDrukCye8Nz43bf15211b0e1e455089ee0b03dac6b7.png',
46                     success(res){
47                         console.log(res)
48                     }
49                 })
50             }
51             // info:function(){
52             //     uni.getImageInfo({
53             //         src:'http://static.hcoder.net/public/images/logo.png',
54             //         success: function(res){
55             //             console.log(res)
56             //         }
57             //     })
58             // }
59         }
60     }
61 </script>
62 
63 <style>
64 
65 </style>

5.黏性布局 position: sticky;
6.基于用户的滚动位置来定位，吸顶。
传给 v-bind:class 一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>

<div class="tab">
                        <ul class="tabdate">
                            <li data-id="year" class="activeli">年</li>
                            <li data-id="mon">月</li>
                            <li data-id="day">日</li>
                        </ul>
                    </div>
.tab {
            /* position: absolute;
                right: 24px;
                top: 22px; */
            margin-left: 200px;
            margin-top: -40px;

        }

        .tabdate {
            /* border: 1px solid #112552;
                width: 93px; */
            padding: 0;
            display: flex;
            color: #ffffff;
            font-size: 16px;

        }

        .tabdate li {
            list-style: none;
            padding: 0 7px;
            color: #fff;
            cursor: pointer;
            border: 1px solid #112552;
        }

        .tabdate li:hover {
            background:  rgba(145, 187, 239, 0.18);
            color: #fff;
            border: 1px solid #112552;

        }

        .activeli {
            color: #fff !important;
            background: rgba(145, 187, 239, 0.18);
            /* border-radius: 4px; */
            border: 1px solid #112552;
        }

  <script>
        function socialNum() {
            let RankData = {
                // title: '参与总量',
                // xname: '(数量)',

                yearRank: {
                    name: '年',
                    ydata: ['国保重点', 'SK重点', '内保重点', '治安重点', '信访重点', '刑事重点', '经侦重点', '涉毒重点', '涉外重点', '网安重点'],
                    xdata: [21, 25, 26, 33, 42, 21, 23, 25, 32, 28],

                },
                monthRank: {
                    name: '月',
                    ydata: ['国保重点', 'SK重点', '内保重点', '治安重点', '信访重点', '刑事重点', '经侦重点', '涉毒重点', '涉外重点', '网安重点'],
                    xdata: [20, 21, 22, 33, 44, 22, 22, 25, 32, 28],
                },
                dayRank: {
                    name: '日',
                    ydata: ['国保重点', 'SK重点', '内保重点', '治安重点', '信访重点', '刑事重点', '经侦重点', '涉毒重点', '涉外重点', '网安重点'],
                    xdata: [40, 25, 26, 33, 42, 21, 23, 25, 32, 28],
                }
            }
            let xRankData = RankData.yearRank.xdata,
                yRankData = RankData.yearRank.ydata;
            // 默认显示的数据
            myChartsRankList(cleft1, RankData.title, RankData.xname, yRankData, xRankData)

            $(".tabdate li").click(function () {
                $(this).addClass("activeli").siblings().removeClass("activeli");
                if ($(this).data("id") == "year") {
                    xRankData = RankData.yearRank.xdata;
                    yRankData = RankData.yearRank.ydata;
                    myChartsRankList(cleft1, RankData.title, RankData.xname, yRankData, xRankData)
                } else if ($(this).data("id") == "mon") {
                    xRankData = RankData.monthRank.xdata;
                    yRankData = RankData.monthRank.ydata
                    myChartsRankList(cleft1, RankData.title, RankData.xname, yRankData, xRankData)
                } else if ($(this).data("id") == "day") {
                    xRankData = RankData.dayRank.xdata;
                    yRankData = RankData.dayRank.ydata
                    myChartsRankList(cleft1, RankData.title, RankData.xname, yRankData, xRankData)
                }
            })
        }
        socialNum();

        // 柱状图
        function myChartsRankList(id, title, xname, yData, xData) {
            const myChartsRankList = echarts.init(id)
            myChartsRankList.setOption({
                title: {
                    text: title,

                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },

                // 提示框
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b} <br> 数量: {c}"
                },
                //网格
                grid: {
                    // show:'true',
                    left: '2%',
                    right: '8%',
                    bottom: '1%',
                    top: '8%',
                    containLabel: true
                },
                //x轴
                xAxis: {
                    show: true,
                    // name: xname,
                    splitLine: {
                        show: false
                    },
                    type: 'value',
                    // min: 0,
                    //坐标轴线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: ' dotted',
                            color: '#fff'
                        }
                    },

                    //刻度
                    "axisTick": {
                        "show": false
                    },
                    data: ["1月", "2月", "3月", "4月", "5月", "6月"]
                },
                //y轴
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    type: 'category',
                    data: yData,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            type: ' dotted'
                        }
                    },
                    //坐标轴线
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 0,
                        margin: 10,
                        inside: false,
                        textStyle: {
                            //color: '#fff',
                            fontWeight: '10'
                        }
                    },
                    //刻度
                    "axisTick": {
                        "show": false
                    },
                },
                //内容数据
                series: [

                    //柱形图背景色设置
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: 'rgba(24,31,100,1)', // 定义柱形的背景色
                                barBorderRadius: [0, 5, 5, 0] // 定义背景柱形的圆角
                            }
                        },
                        barGap: '-100%', // 设置柱形重合的重要步骤
                        data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                        z: 0,
                        silent: true,
                        animation: false, // 关闭动画效果
                        barWidth: '7px' // 设置柱形宽度
                    },
                    //柱形图设置
                    {
                        type: 'bar', //柱状/条形图
                        barWidth: '7',

                        //图形上的文本标签
                        label: {

                            normal: {
                                show: true,
                                position: 'right', //在上方显示
                                // color: 'rgba(24,31,100,1)',
                                // formatter: '{c}',
                                formatter: function (v) {
                                    var val = v.data;
                                    if (val == 0) {
                                        return '';
                                    }
                                    return val;
                                },
                                color: '#fff'
                            }
                        },

                        //住行统一图形形状与颜色
                        itemStyle: {
                            //鼠标移入动态的时候显示的默认样式
                            // emphasis: {
                            //     barBorderRadius: 7,

                            // },
                            //静态的时候显示的默认样式
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0,
                                    [{
                                            offset: 0,
                                            color: '#5BA2FE'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#48CDFF'
                                        },
                                        {
                                            offset: 1,
                                            color: '#C0E5FF'
                                        }
                                    ]
                                ),
                                barBorderRadius: [0, 5, 5, 0]
                            },

                        },

                        data: xData
                    }
                ]
            })
        }
    </script>