移动端小工具收集

前言：在ios手机上对定位几乎支持率为0，可以使用flex等代替。
min-height: 100%;
display: flex;
flex-direction: column;

调试工具

npm install vconsole

main.js
// 应用--打开调试控制台
// if(process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'development'){
//   const vConsole = new Vconsole();
// }
if (process.env.NODE_ENV === "test") {
  const vConsole = new Vconsole();
}
//  const vConsole = new Vconsole();

vue剪切板功能(例：淘宝复制单号)

npm install --save vue-clipboard2

// main.js
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

<template>
  <div class="home">
    <!-- <input type="text" v-model="message" readonly="readonly"/> -->
    <!-- <p>{{ message }}</p> -->
    <p>{{ msg }}</p>
    <p>
      <button
        type="button"
        v-clipboard:copy="message"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        点我Copy一下
      </button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "xuan6",
      abc: ""
    };
  },
  created() {},
  computed: {
    msg() {
      return this.message;
    }
  },
  methods: {
    //复制功能
    onCopy(e) {
      console.log("复制成功： " + e.text);
    },
    onError(e) {
      console.log("cope失败");
    }
  }
};
</script>

<style lang="less" scoped>
input {
  border: 0; // 去除未选中状态边框
  outline: none; // 去除选中状态边框
  background-color: rgba(0, 0, 0, 0); // 透明背景
}
</style>