error prompt:
vue.common.js?e881:593 [Vue warn]: Unknown custom element: <s-identify> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Login> at E:\vue\vue-manage-system\src\components\page\Login.vue
<App> at E:\vue\vue-manage-system\src\App.vue
<Root>
main.js call
import Vue from "vue";
import App from "./App";
import router from "./router";
import axios from "axios";
import ElementUI from "element-ui";
import "element-ui/lib/theme-default/index.css"; //
// import "../static/css/theme-green/index.css"; //
import SIdentify from "./components/page/Identify";
import "babel-polyfill";
Vue.use(SIdentify);
Vue.use(ElementUI);
Vue.prototype.$axios = axios;
new Vue({
router,
render: h => h(App)
}).$mount("-sharpapp");
use:
in the page<template>
<div class="login-wrap">
<div class="ms-title"></div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="" ></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="" v-model="ruleForm.password" @keyup.enter.native="submitForm("ruleForm")"></el-input>
</el-form-item>
<el-form-item prop="validate">
<el-input v-model="ruleForm.valiate" class="validate-code" placeholder="" ></el-input>
<div class="code" @click="refreshCode">
<s-identify :identifyCode="identifyCode"></s-identify>
</div>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm("ruleForm")"></el-button>
</div>
<p style="font-size:12px;line-height:30px;color:-sharp999;cursor: pointer;float:right;" @click="handleCommand()">
</el-form>
</div>
</div>
</template>
Identify.vue file
<template>
<div class="s-canvas">
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</div>
</template>
<script>
export default{
name: "SIdentify",
props: {
identifyCode: {
type: String,
default: "1234"
},
nesting between components
find the reason