zoukankan      html  css  js  c++  java
  • vue3.0之如何挂到vue原型,这种全局变量,方法,属性

    main.ts

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    const app = createApp(App);
    
    //全局挂载方法和原型
    const test = () => {
      console.log('ccccc');
      return '测试成功001';
    };
    app.config.globalProperties.$Test = test;
    app.config.globalProperties.$Testwo = '我是测试';
    app.use(ElementPlus).use(store).use(router).mount('#app')

    login.vue

    <template>
      <div class="warpper-login">
        <!-- 背景图 -->
        <!-- 静态版登录背景 -->
        <div class="j-bc-loginBc"></div>
        <!-- 登录框 -->
        <div class="login-panel">
          <div class="login-welcome">welcome</div>
          <div class="info">
            <div class="title-info">
              <label class="icon icon-title"></label>
              <span>{{ title }}</span>
            </div>
            <div class="text-user">
              <label class="icon icon-user"></label>
              <input type="text" v-model.trim="paramData.username" class="input" id="username" @keyup.enter="login" placeholder="请输入帐号" />
            </div>
            <div class="text-pass">
              <label class="icon icon-pass"></label>
              <input type="password" v-model.trim="paramData.password" class="input password" @keyup.enter="login" placeholder="请输入密码" />
            </div>
            <div class="submit" @click="goto">
              <span>立&nbsp;即&nbsp;登&nbsp;录</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script  lang="ts">
    import SourceMirror from '@/components/resource/dutyMirror';
    import Cookies from 'js-cookie';
    import { useRouter } from 'vue-router';
    import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue';
    export default defineComponent({
      setup(props, context) {
        const { proxy }: any = getCurrentInstance();
    
        const title = ref('综合指挥系统');
        const router = useRouter();
        const paramData = reactive({
          username: '11',
          password: ''
        });
        function goto() {
          const param = {
            name: paramData.username,
            password: paramData.password
            //admin@123.abx
          };
          SourceMirror.login(param).then(res => {
            if (res.data.code === 200) {
              let accessToken = res.data.data.accessToken;
              sessionStorage.setItem('accessToken', accessToken);
              sessionStorage.setItem('userName', res.data.data.user.userName);
              Cookies.set('accessToken', accessToken);
              // router.push('/home');
            } else {
              proxy.$message({
                message: '登录失败',
                type: 'warning'
              });
            }
            console.log(res);
            //  router.push('/home');
          });
        }
        return {
          goto,
          paramData,
          title
        };
      }
    });
    </script>
    <style lang="less" scoped>
    </style>

    解析:

     const { proxy }: any = getCurrentInstance();
  • 相关阅读:
    centos 用户指定目录访问
    centos FTP 用户指定目录禁用上级目录
    centos下SVN搭建多个库文件总汇
    listview点击checkbox,修改值
    C#转成时间格式
    nmap 查看主机上开放的端口
    xargs、管道、exec区别
    OSI七层模型,作用及其对应的协议
    linux面试题(重点)
    数据库备份还原 mysqldump
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/14597736.html
Copyright © 2011-2022 走看看