vue常用代码

Xftp软件的前端代码路径
/usr/local/tomcat/webapps/lcwy_home/css
/usr/local/tomcat/webapps 欧洲花园wap页面服务器地址


vue动态修改标题
在main.js中实例之前加这段代码
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})
在每个子组件页面加v-title data-title="标题内容"
<div v-title data-title="标题内容">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>


视口
<meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width" name="viewport"> 
<meta name="format-detection" content="telephone=no">//解决苹果电话号码自动变link
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,telephone=no" name="viewport">


window.location.reload()//强制刷新
document.activeElement.blur();//阻止手机键盘弹出


$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。


// console.log(event.currentTarget)//相当于this
this.activeStatus = event.currentTarget.getAttribute("activeStatus");


常规方法删除数组指定元素
var aa = ["a","b","c","d","e"];
    aa.splice(i,1);//i是索引，1是长度
    console.log(aa)
常规方法从最后添加数组元素
aa.push("ccc");


this.$set(this.screenintSonSelect, i, data);//这里因为vue的规则不能直接给数组设置值
      this.$set(this.screenintSonFlag2, i, j);//只能通过set的方式设置


链接式导航
<router-link class="" to="/mall">
<img src="" alt="">
<span>花卉商城</span>
</router-link >


this.$router.go(-2);//可以回退多步
that.$router.back(-1);//只能回退一步
this.$router.push({
        path: "/mall/flowerGoods",
        query: {
          //通过编程式导航传递参数
          goodsId: goodsId
        }
      });
this.page = this.$route.query.index;//接收上个页面传过来的参数


vue router两种传参方式的区别
routes: [
 { path: '', name: '学习园地', component: study },
        { path: '/home/study', name: '', component: study },
    ]


this.$router.push({ path: "/home/study",query:{userId: 236} });//参数导航栏可见
this.$router.push({ name: '学习园地', params: { userId: 123 }})//参数导航栏不可见


import $ from "jquery"; //导入jquery
import { swiper, swiperSlide } from "vue-awesome-swiper"; //导入轮播图
import axios from "axios"; //导入数据请求插件
import comLink from "./common/common_link"; //导入总线
import { Indicator, Toast, Popup, DatetimePicker, MessageBox } from "mint-ui"; //导入ui插件
import store from "../../store";
import { mapState,mapMutations } from 'vuex'




import axios from 'axios'
Vue.prototype.$axios = axios//这句相当于Vue.use,原理是一样的
// 在每个组件中 this.$axios.get(url).xxx
//axios的post请求
getData: function(i) {
event.stopPropagation();//阻止事件冒泡            
      var goods = this.cartList[index];
      Indicator.open({
        text: "加载中...",
        spinnerType: "snake"
      });
      var that = this;
      let formData = new FormData(); //以formdata的格式上传图片
formData.append('userId',50)
      axios.post(comLink.apihost + "/app/order/logistics.html", formData)
        .then(function(response) {
          console.log(response.data);
          Indicator.close(); //关闭加载动画
          if ((response.data.code = "200")) {
            
          } else {
            Toast({
              message: response.data.msg,
              duration: 2000
            });
          }
        })
        .catch(function(res) {
          Indicator.close(); //关闭加载动画
          console.log(res);
          Toast({
            message: "数据库错误",
            duration: 2000
          });
        });
    }


//上下拉效果
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> 
            <ul>
                <li v-for="(data,i) in itemList" :key="i" :data-id="data.id" @click="goodsLink($event)">
                    <a href="javascript:;">
                      <div style="width: 10.86667rem;height: 11.3rem;">
                        <img :src="data.imgUrl" alt="">
                      </div>
                        <p class="tit">{{data.title}}</p>
                        <p class="text">{{data.sonTitle}}</p>
                        <div class="prices">
                            <div class="left" v-if="data.discountFee>0">￥{{data.discountFee}}</div>
                            <div class="left" v-else>￥{{data.price}}</div>
                            <!-- <div class="right"><span></span>{{data.total}}</div> -->
                            <div class="right">库存:{{data.total}}</div>
                        </div>
                    </a>
                </li>
            </ul>
 </mt-loadmore>




/*********上下拉变量**begin*****/
      allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      pageNum: 1, //
/*********上下拉变量**end*****/


/****************上下拉效果***begin****************** */
    loadTop: function() {
      //组件提供的下拉触发方法
      //下拉加载
      console.log("下拉刷新");
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom: function() {
      // 上拉加载
      this.pageNum++;
      var zhuangtai = this.zhuangtai;
      this.getStoryData(
        this.selec3,
        this.pageNum,
        this.selec4,
        this.selec1,
        "",
        this.selec2,
        false,
        false
      );
      console.log("上拉加载");
      this.$refs.loadmore.onBottomLoaded();
    },
    /****************上下拉效果***end****************** */






/********上下拉数据处理**begin*****/
            if (that.datas == "") {
              console.log(response.data);
              that.datas = response.data;
              for (var i = 0; i < that.datas.storyList.length; i++) {
                that.datas.storyList[i].imgUrl =
                  comLink.imgApiHost + that.datas.storyList[i].imgUrl;
              }
            } else {
              if (response.data.storyList.length == "0") {
                Toast({
                  message: "数据加载完毕！",
                  duration: 2000
                });
                return;
              } else {
                var data1 = that.datas.storyList;
                console.log(data1);
                var data2 = response.data.storyList;
                console.log(data2);
                for (var j = 0; j < data2.length; j++) {
                  data2[j].imgUrl = comLink.imgApiHost + data2[j].imgUrl;
                }
                data1 = data1.concat(data2);
                that.datas.storyList = data1;
              }
/********上下拉数据处理**end*****/


<!-- 时间选择器 -->
    <mt-datetime-picker 
        ref="picker"
        type="date"
        @confirm="confirm"
        :startDate="startData"
        :endDate="endDate"
        v-model="pickerValue">
    </mt-datetime-picker>
//时间选择
      pickerValue: new Date(),
      startData: new Date(),
      shengriDate: "1510902396000",
      endDate: new Date("2020-01-01"),
 
// 时间选择函数
    timeGate: function() {
      this.$refs.picker.open();
    },
    confirm: function(date) {
      console.log(date);
      var d = new Date(date); //格式化中国标准时间
      var youWant =
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      console.log(youWant);
      this.location = youWant;
    },




带秒的时间戳过滤器
Vue.filter('dateFmt2', (date) => {
    var date = new Date(parseInt(date)); //如果date为毫秒的不需要乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return Y + M + D + h + m + s;
    // $(this).parent().siblings(".flowerClassify-leiXing").find("li");
    // $(this).siblings().removeClass()
})








//mui确定取消弹框
MessageBox.confirm('您确定要删除该收藏吗？').then(action => {
                var that = this;
                axios.get(comLink.apihost+'/app/item/cancelFavorite.html',{
                      params:{
                          itemId:acquiesceId,
                          userId:localStorage.gerenxinxiId
                        }
                }).then(function (response) {
                    console.log(response.data);
                    if(response.data.code=="200"){
                        that.favoriteList="";//这样效果不好，网速不好会闪一下
                        that.getData(1);
                    }else{
                        Toast({//mintui提示效果
                              message: response.data.msg,
                              duration: 2000
                            });
                    }
                }).catch(function(res){
                    console.log(res);
                    Toast({//mintui提示效果
                      message: '服务器错误',
                      duration: 2000
                    });
                })
            },action=>{
                console.log("取消");
            });




axios.get(comLink.apihost+'/app/user/saveAddr.html',{
                  params:{
                      id:this.id,
                      phone:this.phone,
                      name:this.name,
                      province:this.province,
                      city:this.city,
                      district:this.district,
                      address:this.address,
                      userId:localStorage.gerenxinxiId,
                    }
            }).then(function (response) {
              console.log(response.data);
                if(response.data.code=="200"){
                  that.$router.push({ path: '/mine/mydizhi'});
                }else{
                    Toast({//mintui提示效果
                          message: response.data.msg,
                          duration: 2000
                        });
                }
            }).catch(function(res){
                console.log(res);
                Toast({//mintui提示效果
                  message: '服务器错误',
                  duration: 2000
                });
            })




//图片预览插件
<img class="preview-img" v-for="(data,i) in imgs" :key="i" :src="data.src" @click="$preview.open(i, imgs,options)">




imgs: [],
options: {
        index: 3,
        escKey: false,
        allowPanToNext:true,
        timeToIdle: 4000
      }


for (var i = 0; i < response.data.imgs.length; i++) {//改变数据格式，适配图片预览插件
              that.imgs.push({src:comLink.apihost + response.data.imgs[i]});
              that.imgs[i].w = 600;
              that.imgs[i].h = 400;
            }




//确定取消弹框
          MessageBox.confirm("您还未选择保险，是否去选择保险?")
            .then(action => {
              this.$router.push({ path: "/menpiao/baoxian" });
            })
            .catch(function() {});








//时间戳处理
console.log(Math.round(new Date().getTime() / 1000)); //获取当前时间戳
            var oneDay = 77400; //每天的时间戳
            var endtime = response.data.scenicTicketsDto.presellNum * oneDay; //天数剩时间戳
            var endtime2 = Math.round(new Date().getTime() / 1000) + endtime; //当天时间戳加上可预订天数时间戳
            var d = new Date(endtime2 * 1000); //这两句时间戳转时间
            var endtime3 =
              d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); //转成-的格式
            console.log("可预约时间为" + endtime3);
            that.endDate = new Date(endtime3);






//vuex使用
配置
const state = {
    insurance: [], //保险临时数据
    lianxiren: [], //联系人临时数据
    youhuiquan: [], //优惠券临时数据
    vip: [], //开通vip临时数据
};


export default {
    //设置保险临时数据
    setInsuranceData(state, insuranceData) {
        state.insurance = insuranceData
    },
    // 设置联系人临时数据
    setLianxirenData(state, lianxirenData) {
        state.lianxiren = lianxirenData;
    },
    // 设置优惠券2临时数据
    setyouhuiquanData(state, youhuiquanData) {
        state.youhuiquan = youhuiquanData;
    },
    // 设置优惠券2临时数据
    setVipData(state, vipData) {
        state.vip = vipData;
    },
}


export default {
    getInsuranceData: state => {
        return state.insurance
    },
    getLianxirenData: state => {
        return state.lianxiren
    },
    getyouhuiquanData: state => {
        return state.youhuiquan
    },
    getVipData: state => {//设置获取方法
        return state.vip
    }
}


使用
this.$store.commit("setLianxirenData", {//传入
                username: this.username,
                IDnum: this.IDnum,
                sex: this.sex,
                phone: this.phone,
                email: this.email,
                QQ: this.QQ,
                weachat: this.weachat,
                text: this.text
              });
 
this.$store.getters.getLianxirenData//获取数据






//时间戳换算
console.log(Math.round(new Date().getTime() / 1000)); //获取当前时间戳
            var oneDay = 77400; //每天的时间戳
            //var endtime = response.data.scenicTicketsDto.presellNum * oneDay; //天数剩时间戳
            //var endtime2 = Math.round(new Date().getTime() / 1000) + endtime; //当天时间戳加上可预订天数时间戳
            //var d = new Date(endtime2 * 1000); //这两句时间戳转时            // var endtime3 =
            //   d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); //转成-的格式


var d = new Date(data); //格式化中国标准时间
      var youWant =
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      this.time = youWant;


//原生api时间计算
 var d = new Date();//获取当前时间
            console.log(d.getDate())
            //setDate() 方法用于设置一个月的某一天。先获取当前天数+可预定天数
            d.setDate(d.getDate() + response.data.scenicTicketsDto.presellNum);
            that.endDate = d;




//原生提示框
$('.hint').on("click", function() {
                var a = confirm("不绑定手机号，部分功能将无法使用！");
                if (a == true) {
                    window.location.href = "http://www.baidu.com"
                } else {}
            })


//移动端屏幕适配函数
<script>
    (function(doc, win) {
        console.log("屏幕适配函数执行");
        var _root = doc.documentElement,
            resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
            resizeCallback = function() {
                var clientWidth = _root.clientWidth,
                    //三个12需要根据设计图来更改
                    fontSize = 12;
                console.log(clientWidth)
                if (!clientWidth) return;
                if (clientWidth < 640) {
                    fontSize = 12 * (clientWidth / 320);
                    console.log(fontSize)
                } else {
                    fontSize = 12 * (640 / 320);
                }
                _root.style.fontSize = fontSize + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvent, resizeCallback, false);
        doc.addEventListener('DOMContentLoaded', resizeCallback, false);
    })(document, window);
</script>




package.json里面
"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js", //加了--open才会自动打开，不能有注释








vue项目目录结构


   ├── index.html                      入口页面
    ├── build                           构建脚本目录
    │   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
    │   ├── build.js                        生产环境构建脚本
    │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                        构建相关工具方法
    │   ├── webpack.base.conf.js            wabpack基础配置
    │   ├── webpack.dev.conf.js             wabpack开发环境配置
    │   └── webpack.prod.conf.js            wabpack生产环境配置
    ├── config                          项目配置
    │   ├── dev.env.js                      开发环境变量
    │   ├── index.js                        项目配置文件
    │   ├── prod.env.js                     生产环境变量
    │   └── test.env.js                     测试环境变量
    ├── mock                            mock数据目录
    │   └── hello.js
    ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
    ├── src                             项目源码目录    
    │   ├── main.js                         入口js文件
    │   ├── app.vue                         根组件
    │   ├── components                      公共组件目录
    │   │   └── title.vue
    │   ├── assets                          资源目录，这里的资源会被wabpack构建
    │   │   └── images
    │   │       └── logo.png
    │   ├── routes                          前端路由
    │   │   └── index.js
    │   ├── store                           应用级数据（state）
    │   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                          纯静态资源，不会被wabpack构建。
    └── test                            测试文件目录（unit&e2e）
        └── unit                            单元测试
            ├── index.js                        入口脚本
            ├── karma.conf.js                   karma配置文件
            └── specs                           单测case目录
                └── Hello.spec.js




-save-dev 是指将包信息添加到 package.json 里的 devDependencies节点，表示开发时依赖的包。
-save 是指将包信息添加到 package.json 里的dependencies节点，表示发布时依赖的包。




子组件的使用
1、文件放在src的subcomponents文件夹内
2、和普通组件一样的写法
3、在父组件中的使用
只需要在父组件中导入
import subswipe from "./../../subcomponents/subswipe";
在父组件中注册子组件
export default {
  data() {
    return{
      
    }
  },
  components: {
    subswipe
  }
};


在html中以标签的形式导入
<subswipe></subswipe>
父传值给子组件
先在子组件定义props和data同级
props:{'lunbo_url':String,'lunbo_time':{
            type: Number,//限制传入类型
            required: true,//是否必须
            validator: function (value) {//验证要求value大于等于1000
                return value >= 1000
            }
        }}
在父组件html中导入时
<subswipe lunbo_url="api/getlunbo"  :lunbo_time="time"></subswipe>
在子组件html中使用
<mt-swipe :auto="lunbo_time">


子传值给父组件
在子组件的methods中定义函数，通过事件调用或者函数内调用触发
notify(){
                /**
                * 参数1：要触发的事件名称
                * 参数2：传递的值
                */
                this.$emit('numberChange',this.count)
            }
在父组件的html中通过v-on绑定触发事件，要对应一个函数
<subnumber v-on:numberChange="getSubNumberCount"></subnumber>
在父组件的methods中定义getSubNumberCount函数，函数返回值就是子页面传来的
getSubNumberCount(count){
                this.myCount = count
            },


vue组件切换动画效果
html
 <transition name="slide"> 
     <router-view/>
 </transition>


css
.slide-enter-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
// 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name="slide"，会有如下四个CSS类名：
// slide-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
// slide-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
// slide-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
// slide-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；




vue前进刷新后退不刷新（keep-alive组件缓存）
根组件app.vue
<keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
路由配置.js
需要缓存的页面加 meta: { keepAlive: true }
{ path: '/home', name: '花卉乐园', component: home, meta: { keepAlive: true } },


纯css阻止鼠标点击事件
.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}


//限制子盒子换行
 <div class="subscribe-content-top">
                <ul>
                    <li>单品花束</li>
                    <li>混合花束</li>
                    <li>MINI花束</li>
                    <li>礼品</li>
                    <li>花瓶</li>
                    <li>花瓶</li>
                    <li>花瓶</li>
                    <li>花瓶</li>
                    <li>花瓶</li>
                </ul>
            </div>


.subscribe-content-top {
      position: fixed;
      background: white;
      height: 36px;
      overflow-x: scroll;
      overflow-y: hidden;
      display: inline-block;
      width: 100%;
      ul {
        height: 36px;
        overflow-x: scroll;
        overflow-y: hidden;
        display: inline-block;
        white-space: nowrap;
        li {
          display: inline-block;
          line-height: 36px;
          padding: 0 13px;
          font-size: 14px;
          font-weight: 400;
        }
      }


//媒体查询适应移动端屏幕
//因为vscode默认rem是16像素，所以在375屏幕时需要把html的fontsize设置为16px,
//因此将屏幕宽度设置为23.4375份，以保持同等比例
// @media screen and (width:320px) {
//     html {
//         font-size: (320px/23.4375);
//     }
// }
// @media screen and (width:360px) {
//     html {
//         font-size: (360px/23.4375);
//     }
// }
// @media screen and (width:375px) {
//     html {
//         font-size: (375px/23.4375);
//     }
// }
// @media screen and (width:380px) {
//     html {
//         font-size: (380px/23.4375);
//     }
// }
// @media screen and (width:384px) {
//     html {
//         font-size: (384px/23.4375);
//     }
// }
// @media screen and (width:412px) {
//     html {
//         font-size: (412px/23.4375);
//     }
// }
// @media screen and (width:414px) {
//     html {
//         font-size: (414px/23.4375);
//     }
// }
// @media screen and (width:480px) {
//     html {
//         font-size: (480px/23.4375);
//     }
// }
// @media screen and (width:600px) {
//     html {
//         font-size: (600px/23.4375);
//     }
// }
// @media screen and (width:640px) {
//     html {
//         font-size: (640px/23.4375);
//     }
// }
// @media screen and (width:750px) {
//     html {
//         font-size: (750px/23.4375);
//     }
// }
// @media screen and (width:768px) {
//     html {
//         font-size: (768px/23.4375);
//     }
// }
// @media screen and (width:800px) {
//     html {
//         font-size: (800px/23.4375);
//     }
// }
// @media screen and (width:1024px) {
//     html {
//         font-size: (1024px/23.4375);
//     }
// }
// @media screen and (width:1280px) {
//     html {
//         font-size: (1280px/23.4375);
//     }
// }
// @media screen and (width:1440px) {
//     html {
//         font-size: (1440px/23.4375);
//     }
// }




(function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 根据设备的比例调整初始font-size大小
                    if (clientWidth > 750) clientWidth = 750;
                    docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);




//本地存储json数据
sessionStorage.flowerGoods_data = JSON.stringify([
                {
                  cartId: "",
                  skuId: this.skuId,buySubscribe,
                  itemId: this.item.id,
                  num: this.peoplenum
                }
              ]);


vue动态类名绑定
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>










原生3d列子配置
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全景</title>
    <link rel="stylesheet" href="./lib/Photo-Sphere-Viewer-master/dist/photo-sphere-viewer.css">
</head>


<body>
    <div id="containerId" style="height:800px;width:1000px;background:red;"></div>
    <div id="image" style="height:5px;width:6px;background:pink;"></div>
</body>


</html>
<script src="./lib/malko-D.js-v0.7.5-4-g5217f4c/malko-D.js-5217f4c/lib/D.min.js"></script>
<script src="./lib/uEvent-master/uevent.min.js"></script>
<script src="./lib/doT-master/doT.min.js"></script>
<script src="./lib/three.js-master/build/three.min.js"></script>
<script src="./lib/Photo-Sphere-Viewer-master/dist/photo-sphere-viewer.js"></script>
<script>
    var viewer = PhotoSphereViewer({
        container: 'containerId', //显示的盒子
        panorama: './img/3dimg.jpg', //图片路径，可以用对象显示6张立体的
        caption: "全景demo", //标题
        fisheye: false, //是否鱼眼显示
        //标记
        markers: [{
            // 当单击面板时打开面板的图像标记
            id: 'image', //标记id
            longitude: 0.2, //经度
            latitude: -0.13770, //纬度
            image: './img/pin-blue.png', //标记的图像路径
            width: 32, //标记的宽高
            height: 32,
            anchor: 'bottom center', //定义标记朝向其位置的位置，任何css职位都有效，如最低中位或20％80％，忽略多边形。
            tooltip: '工具提示内容. <b>点击我</b>', //工具提示内容
            content: "点击提示的内容", //点击提示内容
        }],
        move_speed: 1, //鼠标滑动速度
        //提示（不晓得是啥提示）
        tooltip: {
            offset: 5,
            arrow_size: 7,
            delay: 100
        },
        move_inertia: false, //在手动移动后启用平滑动画。
        loading_img: null, //显示在加载圆中心的图片路径
        loading_txt: "加载中...",
        mousewheel: true, //是否允许鼠标滚轮放大缩小
        mousemove: true, //是否允许鼠标点击+移动事件旋转视图
        keyboard: true, //启用全屏幕键盘导航
        gyroscope: true, //启用陀螺仪导航并在设备支持时添加导航栏按钮。
        size: null, //如果使用全景容器的最终尺寸（例如{width：500，height：300}。默认情况下使用容器的尺寸并在窗口调整大小时遵循
        //配置全景图之间的过渡效果
        transition: {
            duration: 1500, // duration of transition in milliseconds
            loader: true // should display the loader ?
        },
        //导航栏按钮工具提示文本
        lang: {
            autorotate: '自动旋转',
            zoom: '视图大小',
            zoomOut: '视图放大',
            zoomIn: '视图缩小',
            download: '下载图片',
            fullscreen: '全屏',
            markers: '商品列表',
            gyroscope: '陀螺仪'
        },
        //启用或禁用导航栏,默认显示，您还可以选择显示哪些按钮，甚至可以添加自定义按钮。
        // navbar:false,
        navbar: [
            'autorotate',
            // 'zoom',
            'markers',
            {
                id: 'my-button',
                title: '',
                className: 'custom-button',
                content: 'button',
                onClick: function () {
                    alert('Hello from custom button');
                }
            },
            'caption',//标题
            'fullscreen'//全屏
        ],
        min_fov:30,//最小视野(1-179之间)
        max_fov:90,//最大视野
        default_fov:90,//初始视野，在min_fov和max_fov之间。
        click_event_on_marker:true,//点击标记会触发点击事件以及选择标记。
    });
</script>






react-native改变安卓查包路径
file\:///C:/Android/gradle-2.14.1-all.zip


css边框阴影 box-shadow: 0px 0px 10px 1px #ccc;