今日笔记之20221114

1.vue中刷新页面，echarts图表不显示问题？

 <div id="myChart"></div>
<script>
export default {
  data(){
    return {
      myChart: {}
    }
  },
  mounted:{
    this.init();
  }
  methods: {
    init(){
      const myChart = document.getElementById('myChart');
      myChart.removeAttribute('_echarts_instance_'); // 需要手动删除 _echarts_instance 属性，让他重新自动生成。
      this.myChart = echarts.init(myChart);
      const options = {...};
      this.myChart.setOption(options);
    }
  }
}
</script>

2.vue项目中使用a标签跳转页面？

vue有两种路由模式，一个叫hash, 一个叫history。默认是hash模式，地址栏带 # 号。

使用 <router-link>跳转路由，其本质是使用 a标签进行跳转。
例如：
   history模式： <router-link to='/about'>about</router-link>  相当于  <a href="/about">about</a>
      即使用 href="/xxx" 进行跳转
   hash模式：    <router-link to='/about'>about</router-link>  相当于  <a href="#/about">about</a>
      即使用 href="#/xxx" 进行跳转
      注意： xxx就是跳转路径。

3.随机生成id

/**

 * 生成一个不重复的ID
 * @param { Number } randomLen
 */
function getUid(randomLen){
  return Number(Math.random().toString().substr(2,randomLen) + Date.now()).toString(36)
}
或者:
const id = (Math.random() + new Date().getTime()).toString(32);

4.公众号嵌入h5页面，禁止页面缩放

// 安卓端
// 在 <head> 标签中添加这行即可：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover,user-scalable=0" />

// ios端
// 需要在 window.onLoad 的时候进行初始化处理，例如：
window.onload = function(){
  document.addEventListener('touchstart', function(event){
     if(event.touches.length > 1) {
       event.preventDefault()
     }
  })
  document.addEventListener('gesturestart', function(event){
    event.preventDefault()
  })
}

5.iview组件中添加loading效果

<div v-if="showLoading" class="loading-box">
  <Spin class="loading-spin">
    <Icon type="ios-loading" class="loading-icon" />
    <div>加载中...</div>
  </Spin>
</div>
<script>
  export default {
    name: 'loading',
    data(){
      return {
        showLoading: false
      }
    }
  }
</script>
<style lang="less" scoped>
.loading-box{
  position: relation;
  width: 400px;
  height: 400px;
  .loading-spin{
     display: block;
     width: 200px;
     height: 100px;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     font-size: 14px;
  }
  .loading-icon {
     animation: loading-spin 1s linear infinite;
  }

  @keyframes loading-spin {
     from {
       transform: rotate(0deg);
     }
     50% {
       transform: rotate(180deg);
     }
     to {
       transform: rotate(360deg);
     }
  }
}

</style>

6. 绘制静态二维码

// 首先进行安装，安装成功后再使用即可

npm install qrcodejs2 --save

import QRCode from 'qrcodejs2'

 export default {
   data(){
     return {}
   },
   mounted(){
     if(this.$refs.qrCode){
       this.handleQRCode();
     }
   },
   methods:{
     handleQRCode(){
       new QRCode(this.$refs.qrCode,{
         text: 'qrcode',
         width: 180,
         height: 180,
         colorDark: '#333', //二维码颜色
         colorLight: 'transparent', //二维码背景色
         correctLevel: QRCode.CorrectLevel.L //容错率
       })
     }
   }
 }
 </script>

7. 用户切换角色，重置菜单栏

// 打开 router 文件并进入 index.js文件中
let routes = [...]
const createRouter = () => new Router({
  routes: routes
})

// 重置路由，用户切换或者退出时
const oldRouter = createRouter()
export function resetRouter(){
  const newRouter = createRouter()
  oldRouter.matcher = newRouter.matcher
}

// 其他页面切换角色或者退出时，调用此接口
import { resetRouter } from '@/router/index'
...
methods:{
  changeRole(){
    resetRouter()
  }
}

参考链接：

https://blog.csdn.net/wswq2505655377/article/details/124501115

https://www.cnblogs.com/chenzibai/p/15927423.html

posted on 2022-11-14 10:50 有匪阅读(27) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sunnyeve

今日笔记之20221114

导航

公告