index.vue

<template>
  <div class="page">
    <h3>{{finishDesc}}</h3>
    <h3>{{todoDesc}}</h3>
    <div>
      <van-field v-model="userId" name="userId" label="userId" placeholder="请输入userId" class="input" ref="input" />
      <van-button round block type="info" @click="modify">修改</van-button>
    </div>
    <hr />
    <span ref="copy">测试copy</span>
    <button @click="EventCopy">copy</button>
    <div v-for="(item,index) in list" :key="index">
      <h4>{{item.name}}</h4>
      <router-link v-for="(child,Index) in item.myselfList" :key="Index" :to="child.url" :class="child.class">{{child.title}}: {{child.url}}</router-link>
      <hr />
    </div>
  </div>
</template>
<script>
import data from './data.json'
import utils from "@/utils/";
export default {
  name: 'catalog',
  data() {
    return {
      finishDesc: '',
      todoDesc: '',
      list: [],
      userId: ''
    }
  },
  created() {
    const { finishDesc, todoDesc, list } = data
    this.finishDesc = finishDesc
    this.todoDesc = todoDesc
    this.list = list
  },
  mounted() {
    this.$refs.input.focus()
  },
  methods: {
    EventCopy() {
      utils.Copy(this.$refs.copy);
    },
    modify() {
      if (this.userId) {
        this.$store.commit('user/MStoreUserId', this.userId)
        window.Toast('修改完成')
      } else {
        window.Toast('请填写userId')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  padding: 30px;
}
.block {
  display: block;
  line-height: 40px;
}
.red {
  color: red;
}
hr {
  margin: 20px 0;
}
.input {
  border: 2px solid #ccc;
  border-radius: 10px;
  margin-bottom: 10px;
}
</style>