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();
  • 相关阅读:
    适用于IE的自适应大小并且自动居中的对话框页面(javaScript)
    ASP.net后台动态加载JS文件
    分层就是分工与协作
    用Response.Filter生成静态页[要注意并发问题]
    新旧身份证合法性验证及验证算法
    子窗口刷新父窗口的问题
    获取字符串的真实长度
    子窗口刷新父窗口然后关闭
    datalist的数据绑定事件收藏
    通过Response.Filter属性实现网站内容的动态GZIP压缩
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/14597736.html
Copyright © 2011-2022 走看看